06 · Cookie / Session / Token 传输
凭证怎么在"网络中"被携带，是前端最常踩坑的领域：跨域不带 Cookie、Token 放哪、刷新页面为什么登出。本篇讲传输机制；授权设计见 C03 认证授权 与 S02 认证授权体系。
速览卡
| 项 | 内容 |
|---|---|
| 一句话定位 | 凭证在 HTTP 传输层的携带机制 |
| 核心内容 | Cookie 属性、Session 传输、Token 放哪、跨域携带 |
| 读完能回答 | 为什么跨域不带 Cookie？Token 放 localStorage 安全吗？ |
| 相关板块 | N04 HTTP ｜ C03 认证授权 |
一、三兄弟的分工
| 机制 | 谁存储 | 怎么传输 | 特点 |
|---|---|---|---|
| Cookie | 浏览器 | 请求头自动带 | 有属性可约束，会被 CSRF 波及 |
| Session | 服务端 | 客户端只存 sessionId（常放 Cookie） | 可即时失效，但占服务端存储 |
| Token | 客户端 | 自定义头（如 Authorization） | 无状态，难即时失效 |
二、Cookie 关键属性
| 属性 | 作用 | 建议 |
|---|---|---|
Domain / Path | 限定携带范围 | 精确到需要的最小范围 |
Secure | 仅 HTTPS 传输 | 生产必开 |
HttpOnly | 禁止 JS 读取 | 防 XSS 偷取凭证 |
SameSite | 控制跨站携带 | Lax 兼顾体验与安全 |
Max-Age / Expires | 有效期 | 与业务会话匹配 |
为什么跨域不带 Cookie：Cookie 按"域名 + 路径"匹配，加上
SameSite限制，跨站默认不携带。前端要带需credentials: 'include'且后端配好 CORS。
三、Token 传输：放哪、怎么带
| 存储 | 优点 | 风险 |
|---|---|---|
| localStorage | 简单、可编程 | XSS 可读走 |
| Cookie（HttpOnly） | JS 读不到 | 需防 CSRF，配合 SameSite |
| 内存 | 最安全 | 刷新丢，需续期 |
传输位置：普遍做法是
Authorization: Bearer <token>。放在 URL 查询参数是坏习惯，会进日志与历史。
四、刷新页面为什么登出
text
Token 在内存 → 刷新即丢
Token 在 localStorage → 刷新还在但 XSS 风险更高
Session 在服务端 + Cookie → 刷新无感权衡点永远是即时失效能力 vs 存储安全：Session 能立刻踢人，Token 要等过期或黑名单。
五、自检清单
- [ ] 能说清 Cookie / Session / Token 各自存哪、怎么传输
- [ ] 能背出 Cookie 五个关键属性及其作用
- [ ] 能解释"跨域不带 Cookie"的机制
- [ ] 知道 Token 放 localStorage 的 XSS 风险与替代方案
- [ ] 能说清刷新登出与存储位置的关系
六、常见误区
| 误区 | 事实 |
|---|---|
| "Token 比 Cookie 安全" | 安全取决于存储与传输，不是名称 |
| "Token 放 URL 没关系" | 会进日志与浏览器历史 |
| "HttpOnly 就没 CSRF 了" | HttpOnly 防 XSS 读取，CSRF 需 SameSite/Token 防 |
| "Session 永远占内存" | 可放 Redis，但仍是服务端状态 |
七、动手练习
练习 A：观察 Cookie
打开任意登录站点，DevTools → Application → Cookies，找出每个 Cookie 的 HttpOnly / Secure / SameSite 设置。
练习 B：复现跨域不带 Cookie
本地起前后端两个端口，前端跨域请求，对比加不加 credentials 与后端 CORS 的差异。
练习 C：对比失效
分别用 Session 和 JWT 实现登出，对比"踢人"的即时性与代码复杂度，形成自己的选型结论。
相关文档
本区
- 04 · HTTP 与 HTTPS 深入 —— 凭证依赖的传输层
其他域
- 认证与授权：Session / JWT / OAuth2 —— 服务端落地
- 认证授权体系：OAuth2 / JWT / 权限模型 —— 原理与攻击面