面试官：用户登录后，Token 你存哪？我当场懵了沉默是金，总会发光大家好，我是沉默面试官：“说说看，用户登录后拿到

沉默是金，总会发光

大家好，我是沉默

面试官：“说说看，用户登录后拿到的 Token，你会存在哪里？” 你回答：“localStorage 呗。”

面试官点点头，然后追问一句——“那要是被 XSS 攻击了呢？”

空气突然安静。

这道题看似基础，却是前端安全面试的分水岭。
不同的答案，代表着你对浏览器安全模型、攻击手段与防御思维的理解深度。

今天，我们就不讲废话。
直接用实战和逻辑，带你吃透 Token 存储的真正门道。

**-**01-

有哪些选项？

选项一：Web Storage

典型代码：

localStorage.setItem('auth_token', token);axios.interceptors.request.use((config) => {  const token = localStorage.getItem('auth_token');  if (token) config.headers.Authorization = `Bearer ${token}`;  return config;});

优点：

简单易懂、立刻可用。
localStorage 持久保存，sessionStorage 临时保存。

缺点：

一旦存在 XSS 漏洞，攻击者可以直接读取你的 Token。
防御难度极高，几乎没有绝对安全的方案。

总结一句话：
“你能看到的地方，攻击者也能看到。”

结论：慎用。
除非项目内网使用、无外部输入，否则等于给攻击者发邀请函。

选项二：Cookie

在后端登录成功后写入：

Set-Cookie: auth_token=jwt_xxx; Path=/; HttpOnly; Secure

浏览器自动带上 Cookie，无需手动干预。

优点：

HttpOnly：前端 JS 无法读取，彻底防御 XSS。
Secure：只在 HTTPS 下传输，防止中间人劫持。
自动管理：不需要每次请求都手动加 Header。

缺点：

容易被 CSRF（跨站请求伪造）攻击。
需要配合 CSRF Token、Origin 验证等防御措施。

总结一句话：
“Cookie 像银行保险箱，钥匙安全，但你得防小偷伪造存取单。”

结论：可用，但务必配合 CSRF 防御。

选项三：内存存储

let inMemoryToken = null;

优点：

不落地、不暴露，几乎免疫 XSS。
页面关闭即失效，安全到极致。

缺点：

刷新页面 Token 消失，用户体验爆炸。

总结一句话：
“最安全的锁，就是连钥匙都没有的锁。”

结论：适合银行级别安全要求，不适合普通 Web 应用。

- 02-

如何选？

组合拳！

真正的高手，不选“单一答案”，而是搭架构。

实践一：Cookie（HttpOnly + Secure） + 防 CSRF

服务端存 Token。
前端不接触敏感信息。
加上 CSRF Token 验证。

这套方案稳定、传统、经得起时间考验。

实践二：Access Token + Refresh Token（现代 Web 应用标配）

登录成功后，后端返回：

Token 类型	存储位置	有效期	用途
Access Token	内存	短期（如2小时）	调接口
Refresh Token	HttpOnly Cookie	长期（如7天）	刷新 Access Token

刷新流程：
1️⃣ 页面使用 access_token 调 API；
2️⃣ 若过期，则自动调用刷新接口，用 refresh_token 换新 access_token；
3️⃣ 用户全程无感知。

**
**

这就是平衡之道：
安全与体验，两者兼得。

对比一览表

存储位置	优点	缺点	适用场景
Web Storage	简单易用	极易被 XSS 攻击	内部工具/低敏应用
Cookie	防 XSS (HttpOnly)	需防 CSRF	传统 Web 应用
内存	安全性最高	刷新即失效	高安全系统
组合方案	安全 + 体验平衡	实现略复杂	现代 SPA 应用

- 03-

面试官想听的答案

如果你写的是小工具：localStorage 可以，但你得知道风险。
如果你写的是传统系统：Cookie + CSRF 防护是经典标配。
如果你写的是现代前端项目（Vue/React） ：用 Access Token（内存） + Refresh Token（HttpOnly Cookie） 。

安全，从来不是黑白对错，而是成本与风险的博弈。

聪明的开发者，不是永远追求“最安全”，而是知道——
“什么样的安全，最适合当下这套系统。”

**-**04-

总结

每一个 Token 存储方案，都是一场“信任的博弈”：

浏览器能信任脚本吗？
用户能信任 Cookie 吗？
后端能信任请求头吗？

理解背后的逻辑，
你不仅能答出“存哪”，

还能解释—— “为什么存那儿”。

“安全不是技术点，而是设计哲学。”

**-**05-

粉丝福利