本文总结了 9 条最关键、最容易踩坑的 Cookie 使用要点,配上实际开发建议,一次性帮你查漏补缺。
-
所有请求都会自动带上 Cookie
浏览器会自动把 Cookie 附加到发往同一域的每个请求里(包括接口、图片、CSS、JS等)。
建议:
- Cookie 不应该塞太多内容,否则每个请求都变大,影响性能。
- 只放必要的信息,比如 session_id,别放 JSON 字符串、token 列表等大数据。
-
Cookie 最大 4KB,超过就被截断或忽略
主流浏览器对单个 Cookie 大小限制是 4096 字节(含 name、value 和其他属性)。
建议:
- 不要用 Cookie 存 JWT 或大对象。
- 如果数据超过 4KB,放到
localStorage
、sessionStorage
或IndexedDB
更合适。
-
设置
HttpOnly
防止 XSS 窃取 Cookie开启
HttpOnly
后,JavaScript 无法通过document.cookie
读取该 Cookie,即使存在 XSS 漏洞。建议:
- 登录态、session ID、token 等敏感信息必须放到
HttpOnly
的 Cookie 里。 - 不要将敏感数据暴露给前端 JS。
- 登录态、session ID、token 等敏感信息必须放到
-
设置
Secure
确保 Cookie 只通过 HTTPS 传输带有
Secure
标记的 Cookie 只会在 HTTPS 请求中发送。HTTP 请求不会带。建议:
- 所有认证相关 Cookie 一律加上
Secure
。 - 你的站点应该强制使用 HTTPS,别再用 HTTP 开发调试。
- 所有认证相关 Cookie 一律加上
-
使用
SameSite
属性防止 CSRF 攻击SameSite
控制跨站请求时是否发送 Cookie,是防止 CSRF 的关键机制。三个值:
Strict
:最安全,只有同站点请求才带 CookieLax
:常用默认值,部分 GET 请求会带 CookieNone
:允许跨域,但必须配合Secure
建议:
- 认证 Cookie 至少设置
SameSite=Lax
。 - 跨域场景(如主站+子站)用
SameSite=None; Secure
。
-
Cookie 会在子域名间共享(如果你没限制)
给
.example.com
设置的 Cookie,app.example.com
、api.example.com
都能访问。建议:
- 只对需要用到的子域设置 Cookie,比如只给
app.example.com
设置登录态。 - 避免跨子域 Cookie 泄露,防止不相关子域误用。
- 只对需要用到的子域设置 Cookie,比如只给
-
Cookie 过期时间影响是否“持久”
- 没有设置
Expires
或Max-Age
的 Cookie 是“会话 Cookie”,关掉浏览器就没了。 - 设置了就是“持久 Cookie”,会保留到指定时间。
建议:
- “记住我”这种功能必须设置过期时间。
- 临时状态信息可以用会话 Cookie。
- 没有设置
-
第三方 Cookie 快没用了
主流浏览器(Chrome/Safari/Firefox)都在限制第三方 Cookie,跨站登录、广告跟踪都受到影响。
建议:
- 不要依赖第三方 Cookie 做认证或追踪。
- 改用服务端会话机制、一方存储或 token 方案。
-
删除 Cookie 的方法是设置一个“已过期”的值
Cookie 没法直接
delete
,只能通过设置Expires=过去时间
来使它失效。示例代码:
document.cookie = "token=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/;";
注意:
- 删除 Cookie 时的
path
和domain
必须和设置时一样,否则删除不成功。 - 很多人以为删了,其实还在。
- 删除 Cookie 时的