React中CSRF令牌的存储位置、访问方法及安全性疑问

关于隐藏输入字段的访问问题 #

不用非得直接操作DOM，React有更优雅的方式：

• 用useRef钩子绑定隐藏输入框，需要的时候直接通过ref获取值，完全符合React的开发规范。示例代码：

  import { useRef } from 'react';
  
  function MyForm() {
    const csrfRef = useRef(null);
  
    const handleSubmit = () => {
      const csrfToken = csrfRef.current.value;
      // 携带令牌发起请求
    };
  
    return (
      <form onSubmit={handleSubmit}>
        <input type="hidden" name="_csrf" value="服务器生成的令牌" ref={csrfRef} />
        {/* 其他表单元素 */}
        <button type="submit">提交</button>
      </form>
    );
  }
  

• 另一种更简单的方式是让服务端把令牌注入到全局变量里，比如在HTML模板中添加：

  <script>
    window.CSRF_TOKEN = '服务器生成的令牌';
  </script>
  

  之后在React组件里直接用window.CSRF_TOKEN即可，不需要碰DOM或者状态。

存在React状态中的XSS风险问题 #

把CSRF令牌存在React状态里不会额外增加XSS风险——只要你的页面存在XSS漏洞，攻击者能拿到的不只是状态里的令牌，DOM里的隐藏输入、全局变量里的令牌同样会被窃取。

XSS的核心风险是攻击者能执行恶意脚本，进而获取客户端所有可访问的资源。所以重点不是令牌存在哪里，而是做好XSS防护：比如依赖React自动转义用户输入、避免使用危险的innerHTML、配置内容安全策略（CSP）、过滤用户提交的富文本等。

如果确实要把令牌存在状态里，直接存就行，不会比其他存储方式更危险。

推荐方案总结 #

优先选服务端注入全局变量，或者用useRef绑定隐藏输入框——这两种方式既符合React开发习惯，又能安全获取令牌。如果业务需要存在状态里，也完全没问题，只要做好XSS防护就够了。

内容的提问来源于stack exchange，提问作者Jia Huang