如何安全地在单页应用（SPA）中使用JWT进行用户认证？

题目

如何安全地在单页应用（SPA）中使用JWT进行用户认证？

信息

• 类型：问答
• 难度：⭐⭐

考点

JWT认证原理,安全存储策略,防御XSS/CSRF攻击,Token刷新机制

快速回答

在SPA中安全使用JWT的核心要点：

• 存储位置：避免localStorage，优先使用HttpOnly Cookie（服务端渲染）或内存存储（纯SPA）
• 传输安全：始终通过HTTPS传输，设置Secure和SameSite属性
• 攻击防御：结合CSRF Token防御跨站请求伪造，Content Security Policy防御XSS
• 生命周期：设置短有效期Access Token（15-30分钟）并实现Token刷新机制

一、核心原理说明

JWT（JSON Web Token）是一种无状态的认证机制，由三部分组成：

Header.Payload.Signature
// 示例Payload
{
  "sub": "1234567890",
  "name": "John Doe",
  "iat": 1516239022,
  "exp": 1516239322  // 关键过期时间
}

SPA的认证流程：
1. 用户登录后服务端签发JWT
2. 客户端存储JWT并在后续请求携带
3. 服务端验证签名和有效期

二、安全存储策略对比

三、最佳实践方案

推荐方案：Access Token + Refresh Token

1. Access Token有效期15分钟，存储于内存或sessionStorage
2. Refresh Token有效期7天，存储于HttpOnly Cookie
3. 实现Token自动刷新逻辑：

   // 前端拦截401响应后自动刷新Token
   axios.interceptors.response.use(
     response => response,
     async error => {
       if (error.response.status === 401) {
         const newToken = await refreshToken(); // 使用Refresh Token获取新Access Token
         retryOriginalRequest();
       }
     }
   );

四、防御攻击措施

• XSS防御：
  • 避免在JWT中存储敏感数据
  • 设置Content-Security-Policy头
  • 对用户输入严格转义
• CSRF防御：
  • 为Cookie设置SameSite=Strict
  • 敏感操作要求二次认证
  • 验证Origin和Referer头

五、常见错误

• ❌ 将JWT存储在localStorage（XSS可窃取）
• ❌ 使用过长有效期（超过30分钟）
• ❌ 在JWT中存储敏感数据（如密码、支付信息）
• ❌ 未验证Token签名（服务端必须验证！）

六、扩展知识

• JWT黑名单：实现登出功能需服务端维护短期黑名单
• OAuth 2.0扩展：第三方登录时使用PKCE增强安全性
• 最新规范：RFC 8725推荐使用Paseto替代JWT解决已知漏洞