如何在React中安全存储JWT Token，避免被客户端脚本访问

核心原理：依赖HttpOnly Cookie #

要让客户端脚本无法通过document.cookie访问Cookie，核心是后端给Cookie设置HttpOnly属性——这和前端框架无关，但React需要配合完成请求的Cookie携带逻辑。

1. 后端配置HttpOnly Cookie #

登录接口返回Cookie时，必须指定以下关键属性：

• HttpOnly: true：直接禁止JavaScript访问该Cookie
• Secure: true：仅在HTTPS环境下传输（生产环境强制开启）
• SameSite: Strict/Lax：防范CSRF攻击，根据业务场景选择
• Path: /：确保全站接口都能携带该Cookie

示例（ASP.NET Core后端配置）：

Response.Cookies.Append("token", "your-auth-token", new CookieOptions
{
    HttpOnly = true,
    Secure = Environment.IsProduction(),
    SameSite = SameSiteMode.Strict,
    Expires = DateTimeOffset.UtcNow.AddHours(24)
});

2. React中配置请求自动携带Cookie #

React项目里的请求库（Axios/Fetch）需要开启凭证携带配置，让浏览器自动在请求中带上HttpOnly Cookie：

方案一：Axios全局配置

import axios from 'axios';

// 创建全局API实例
const api = axios.create({
  baseURL: 'https://your-api-domain.com',
  withCredentials: true // 关键：允许浏览器自动携带Cookie
});

// 登录请求（无需手动处理Cookie）
api.post('/api/auth/login', { username, password })
  .then(res => {
    // 浏览器已自动保存HttpOnly Cookie
  });

// 后续接口请求（自动携带Cookie完成身份验证）
api.get('/api/user/profile')
  .then(res => {
    // 处理返回的用户数据
  });

方案二：Fetch API配置

// 登录请求
fetch('https://your-api-domain.com/api/auth/login', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ username, password }),
  credentials: 'include' // 跨域场景用include，同域用same-origin
})
.then(res => {
  // 浏览器自动管理HttpOnly Cookie
});

// 后续接口请求
fetch('https://your-api-domain.com/api/user/profile', {
  credentials: 'include'
})
.then(res => res.json())
.then(data => {
  // 处理数据
});

3. 跨域场景额外配置 #

如果React项目和API不在同一域名下，后端必须配置CORS允许携带凭证：
示例（ASP.NET Core CORS配置）：

builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowReactApp",
        policy =>
        {
            policy.WithOrigins("https://your-react-app-domain.com")
                  .AllowAnyHeader()
                  .AllowAnyMethod()
                  .AllowCredentials(); // 必须开启，允许Cookie跨域传输
        });
});

app.UseCors("AllowReactApp");

注意事项 #

• 不要尝试手动存储HttpOnly Cookie：脚本无法访问该Cookie，前端无需（也不能）将其存入localStorage/sessionStorage，完全由浏览器自动管理。
• 生产环境强制开启Secure属性：HttpOnly Cookie只有在HTTPS下才会被浏览器正确存储和传输，HTTP环境下可能被拦截。
• 配合CSRF防护：若Cookie设置SameSite=Lax已能覆盖大部分场景，但敏感操作（如修改密码）建议额外添加CSRF Token验证。

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