🔑 背景：为什么需要认证凭证
HTTP 协议是 无状态 的。每个请求都是独立的，服务端不会天然知道"请求是谁发的"。
因此我们需要在请求中附带 凭证（Credential），来标识用户身份。
主流方案：
- LocalStorage 存 Token（通常是 JWT）
- HttpOnly Cookie 存 Token / Session ID
🗂️ LocalStorage Token 方案
工作原理
-
用户登录成功 → 服务端返回 JWT
-
前端将 JWT 存储在
localStorage -
每次请求时，前端手动在请求头中加上：
httpAuthorization: Bearer <jwt-token> -
服务端通过 JWT 签名验证用户身份
优点
- 实现简单：前端灵活控制，Axios 拦截器统一加 Token。
- 跨域灵活：不依赖浏览器 Cookie，天然支持跨域。
- 无状态架构：后端不需要维护 Session，适合微服务。
缺点
- XSS 风险高：JS 可读写 localStorage，一旦被注入恶意脚本可能被窃取。
- Token 管理复杂：需要前端额外实现刷新逻辑（Refresh Token）。
- 前端负担大：必须在每个请求里手动设置 Header。
典型适用场景
- 单页应用（Vue、React）
- 移动端（Flutter、React Native、UniApp）
- API 驱动型架构，强调前后端完全分离
🍪 HttpOnly Cookie 方案
工作原理
-
用户登录成功 → 服务端下发 Cookie：
httpSet-Cookie: token=xxxx; HttpOnly; Secure; SameSite=Strict -
浏览器自动保存 Cookie
-
之后每个请求会自动带上该 Cookie
-
服务端验证 Cookie 内容（Session ID / JWT）
优点
- 更高安全性：HttpOnly 防止 JS 窃取。
- 浏览器自动管理：请求自动带 Cookie，无需前端手动操作。
- 兼容性好：可与传统 Session 模型无缝衔接。
缺点
- CSRF 风险：浏览器自动带 Cookie，可能被第三方恶意请求利用。
- 跨域配置复杂 ：需要配合
CORS + withCredentials。 - 状态压力：如果是 Session ID，需要服务端维护会话。
典型适用场景
- 后台管理系统（B端 SaaS、ERP、CMS）
- 高安全性系统（金融、电商、政务系统）
🔒 安全性深入分析
XSS（Cross-Site Scripting，跨站脚本）
- 本质：攻击者把恶意 JavaScript（或 HTML）注入到目标站点，在受害者浏览器里执行。
- 结果：可以窃取 cookie/token、劫持会话、劫持页面 UI、篡改 DOM、做键盘记录、发起请求等。
- 三种常见类型：
- 反射型（Reflected）：恶意脚本通过 URL/请求参数被立刻反射并执行（例如搜索、错误信息回显）。
- 存储型（Stored）：恶意脚本被存储到服务器（留言板、评论、用户资料等），之后任何访问该数据的用户都会执行。危害最大。
- DOM-based ：脚本只在客户端操作 DOM 时被注入/执行（例如直接把
location.hash写进innerHTML），与服务器返回无关。
CSRF（Cross-Site Request Forgery，跨站请求伪造）
- 本质：攻击者诱导已登录用户的浏览器自动向受信任站点发起请求（因为浏览器会自动带上 cookie），从而在用户权限下执行未授权操作。
- 结果：在用户不知情的情况下修改数据（转账、修改邮箱/密码、发表/删除内容等）。
- 典型前提：认证依赖浏览器会自动带的凭证（cookie/session），并且受害站点仅通过该凭证来鉴权且没有额外请求来源验证。
3. Token 泄漏后的危害
- LocalStorage：泄漏后可无限制使用，直到过期。
- Cookie：同样有风险，但结合短有效期 + Refresh Token 可缓解。
⚙️ 架构 & 性能考量
LocalStorage Token
- 无状态：后端仅校验签名即可，无需存储会话。
- 扩展性好：非常适合微服务 / 分布式架构。
HttpOnly Cookie
- 状态依赖：如果用 Session ID，后端需依赖 Redis 或数据库存储。
- 复杂性增加：需要在多节点部署时共享 Session（Session 复制或集中式存储）。
🧑💻 开发 & 运维
| 维度 | LocalStorage | HttpOnly Cookie |
|---|---|---|
| 前端实现 | 需要拦截器手动加 Header | 浏览器自动附带 |
| 跨域 | 天然支持 | 需 CORS 配置 |
| 安全防护 | 重点防御 XSS | 重点防御 CSRF |
| 调试 | JWT 可解码，前端可见 | HttpOnly 无法直接调试 |
| Token 管理 | 前端维护刷新逻辑 | 后端统一管理 |
🚀 最佳实践
推荐方案：混合模式
-
Access Token（短时效）
- 存放在 HttpOnly Cookie，防止被 JS 窃取
- 每次请求自动携带
- 有效期短（几分钟 ~ 半小时）
-
Refresh Token（长期有效）
- 存放在 Secure Cookie 或服务端数据库
- 用于在 Access Token 过期时刷新
- 有效期长（几天 ~ 几周）
-
安全措施
- 全站 HTTPS
- CSRF Token 校验
- 严格 Content-Security-Policy (CSP)
- 最小权限设计（Token 只包含必要信息）
📊 对比
| 对比维度 | LocalStorage Token | HttpOnly Cookie |
|---|---|---|
| 安全性 | 容易被 XSS 攻击 | 容易被 CSRF 攻击 |
| 实现复杂度 | 前端逻辑复杂 | 后端配置复杂 |
| 跨域支持 | 简单灵活 | 需要额外配置 |
| 架构适配 | 适合前后端分离、微服务 | 适合传统 Web、B 端后台 |
| 可扩展性 | 高（无状态） | 中（有状态，依赖 Session 存储） |
| 调试便利 | Token 可见，易调试 | HttpOnly 不可见，调试不便 |
🔐 结论
- LocalStorage Token：灵活、跨端友好，但要防御 XSS。
- HttpOnly Cookie：安全性更强，适合后台系统，但要防御 CSRF。
- 企业推荐 ：使用 HttpOnly Cookie 存放短期 Access Token + Refresh Token 刷新机制 。
- 保证安全性（防止 XSS 窃取）
- 保证用户体验（自动续期，减少频繁登录）
- 兼顾分布式架构可扩展性
📌 一句话总结：
Token 放 LocalStorage 是开发者自己背包随身带，Token 放 HttpOnly Cookie 是浏览器帮你保管。
前者怕小偷（XSS），后者怕钓鱼（CSRF）。企业级项目通常选择 HttpOnly Cookie + Refresh Token。