哈喽，前端小伙伴们！做登录功能时，后端给的Token，到底该存在localStorage还是Cookie里？

这个看似简单的选择，藏着前端安全的关键。今天就用聊天的方式，唠透Token存储的干货，新手也能轻松get～

先搞懂：为啥Token存储位置很重要？

Token就是你登录的“电子身份证”，一旦被窃取，别人就能冒充你操作用户账号。不同存储方式，直接决定Token被偷的难度，以及要面对的XSS、CSRF等安全风险，选对了就是第一道安全保险。

三种主流存储方式，优缺点一次性说透

前端常用的Token存储就三种，咱们不绕弯，优缺点直接摆明白：

1. localStorage / sessionStorage：最简单，但最“裸奔”

上手超简单，localStorage持久化、sessionStorage关浏览器就消失，JS能直接读写，不用后端配合。

优点：实现简单，无CSRF风险（不自动附加请求）；缺点：XSS攻击能直接读取Token，攻击面广，难以完全防范。

2. 普通Cookie（非HttpOnly）：看似方便，实则“双面坑”

浏览器自动存储、自动附加到同源请求，原生支持过期时间和路径控制，前端不用手动加Token。

缺点很致命：既会被XSS读取，又会因自动携带引入CSRF风险，除非业务极简单且改不了后端，否则别用。

3. HttpOnly Cookie：目前最推荐的“安全选手”

核心优势：设置httpOnly: true后，JS无法读取，从根源防御XSS窃取，浏览器也会自动携带请求，前端不用额外操作。

缺点：需后端配合设置，且因自动携带会引入CSRF风险，但防御手段很成熟，后面专门说解决办法。

再聊透：XSS和CSRF，到底是啥？

反复提的XSS、CSRF，用大白话讲清楚，不用记专业定义：

1. XSS（跨站脚本攻击）：偷偷偷数据

攻击者注入恶意脚本，自动执行后窃取浏览器里的敏感数据。localStorage、普通Cookie（JS可读）是高风险，HttpOnly Cookie（JS不可读）基本免疫，但其攻击面广，完全防范难度大。

2. CSRF（跨站请求伪造）：诱导你“主动”干坏事

攻击者诱导你点击链接、访问页面，浏览器自动携带Cookie发起恶意请求（比如改密码、转账）。Cookie类（普通/HttpOnly）都是高风险，localStorage需手动注入Token，无此风险，且防御手段成熟。

划重点：不同场景该选哪种？

没有最好，只有最适合，对应场景选就行：

1. 选localStorage：仅适合这些情况

后端只支持Bearer Token、不接受Cookie，且前端有严格XSS防护（CSP、输入过滤），无过多敏感数据。务必缩短Access Token有效期（15-30分钟），配合Refresh Token，敏感操作二次验证。

2. 普通Cookie：尽量别用

同时面临XSS和CSRF风险，双重隐患，非特殊情况不推荐。

3. HttpOnly Cookie：优先选

有敏感数据、前后端协作可控，优先选它。用SameSite属性（lax/strict）防御大部分CSRF，高安全场景叠加CSRF Token，敏感操作加校验（密码、验证码）。

补充：CSRF防御具体怎么做？（针对Cookie方案）

1. SameSite属性：最简单的防御

- strict：最安全，跨站不发Cookie，体验稍差；- lax：Chrome默认，平衡安全与体验，GET安全请求可发；- none：跨站全发，需配合secure，慎用。

2. CSRF Token：双重保障

后端下发唯一Token，前端请求时携带（请求头或页面隐藏字段），攻击者无法读取，后端校验通过才处理请求。常用双重提交Cookie或独立Token存储两种方式。

落地指南：从localStorage迁移到HttpOnly Cookie

老项目想升级安全等级，前后端改动很简单，成本不高：

1. 后端改动（核心）

登录接口改Set-Cookie下发Token，设置httpOnly、secure、sameSite；登出接口清除Cookie。

2. 前端改动

请求加credentials: 'include'，删除手动读写Token的逻辑。

3. 无法迁移？降级防护

强化XSS防护（CSP、避免innerHTML、输入转义）；缩短Access Token有效期，Refresh Token存HttpOnly Cookie，敏感操作二次验证。

最后总结：没有绝对安全，只有纵深防御

Token存储本质是权衡XSS和CSRF风险，主流实践直接抄作业：优先「HttpOnly Cookie + SameSite」，高安全场景加CSRF Token；没法用Cookie就选「localStorage + 极短有效期 + 严格XSS防护」。

安全需结合业务、成本综合决策，层层防护才能最大程度保护用户账号。有疑问或不同经验，欢迎评论区交流～