React环境下如何安全处理并在客户端存储JWT token

首先澄清一个常见误区：HttpOnly Cookie 完全可以在 React 项目中正常使用，不存在「无法生效」的问题，你不需要通过 JS 读取它就能完成鉴权逻辑，这也是目前行业公认的最高安全性方案。

方案1：优先使用带安全属性的 HttpOnly Cookie #

该方案可以完全避免 JWT 被 XSS 脚本窃取，推荐所有适配的场景优先使用：

• 登录请求响应时，后端直接通过 Set-Cookie 响应头将 JWT 写入 Cookie，同时为 Cookie 配置 HttpOnly、Secure、SameSite=Strict 属性，以及合理的过期时长
• 后续 React 侧发起所有需要鉴权的请求时，浏览器会自动携带该 Cookie，不需要你手动在 JS 中将 JWT 塞入请求头
• 跨域部署场景下，只需给请求工具配置凭证携带规则即可：Axios 配置 withCredentials: true，原生 Fetch 配置 credentials: 'include'，同时后端配置 CORS 规则允许携带凭证，不要将 Access-Control-Allow-Origin 设置为 *

方案2：需要前端读取 JWT 时使用内存存储 #

如果你的业务逻辑需要在前端读取 JWT 中的自定义字段（比如用户权限、身份标识等），则放弃持久化存储，将 JWT 保存在内存中：

• 登录成功拿到 JWT 后，直接存入全局状态管理工具（Redux、Zustand、React Context 等均可），不要写入 localStorage、sessionStorage、IndexedDB 任何可持久化的前端存储
• 给 JWT 设置极短的过期时间（建议15分钟以内），同时将刷新凭证 Refresh Token 存入 HttpOnly Cookie，JWT 过期后前端自动调用刷新接口获取新的 JWT，无需用户重复登录
• 严格落实前端 XSS 防护规则：所有用户输入内容做转义处理，避免使用 innerHTML、dangerouslySetInnerHTML 等高危 API，禁止加载执行不可信的第三方脚本，开启内容安全策略（CSP）

方案3：必须持久化存储时使用加密后的 sessionStorage #

如果项目受限于部署逻辑无法使用 Cookie 方案，且必须持久化存储 JWT，可采用该降级方案：

• 将 JWT 做对称加密后存入 sessionStorage，加密密钥不要硬编码在前端代码中，可在用户登录后从后端动态获取，仅保存在内存中使用
• sessionStorage 会在当前标签页关闭后自动清空，相比 localStorage 泄露风险更低，仍需配合短有效期 JWT + Refresh Token 机制降低泄露后的影响范围

内容的提问来源于stack exchange，提问作者Aleister Crowley