Web中Cookie的安全防御与跨域实践深入解析

在Web开发中，Cookie是一个既基础又容易让人困惑的话题。你可能每天都在用，但真要细说它的安全机制和跨域限制，又未必能讲得透彻。这篇文章，我们就从最底层开始，把Cookie的方方面面掰开揉碎聊清楚，尤其是安全防御和跨域实践中的那些关键点。

一、什么是 Cookie？

说白了，Cookie就是网站为了记住你，塞在你浏览器里的一小段文本信息。它就像一张临时身份证，或者一张贴在屏幕边的便签条。

它的工作流程其实很简单：你第一次访问某个网站时，服务器可以在响应里生成一个Cookie发给你浏览器；浏览器乖乖存下来；等你下次再访问同一个网站时，浏览器会自动把这个Cookie带上去；服务器一看，“哦，又是你”，于是就能提供个性化内容了——比如让你保持登录状态。

关于Cookie，有几个天生的特性你得知道：

• 大小有限，通常每个Cookie不超过4KB；
• 有有效期，有些是会话级的（关掉浏览器就消失），有些是持久化的（比如7天后过期）；
• 它遵循同源策略——不过也有一些放宽机制，后面会详细说。

二、Cookie 的结构与属性

一个Cookie由一对“键值对”和若干元数据属性组成。下面这个HTTP响应头里的Set-Cookie就是一个典型例子：

Set-Cookie: sessionId=abc123; Domain=.example.com; Path=/shop; Expires=Wed, 21 Oct 2026 07:28:00 GMT; Secure; HttpOnly; SameSite=Lax

其中Name=Value是必备部分，比如sessionId=abc123，用来存实际数据。剩下的都是可选属性，但它们才是真正影响Cookie行为的控制开关。

三、Cookie 的作用域

浏览器在发送Cookie时会做一连串的检查，必须全部通过才能把Cookie带上：

• 域名匹配：如果显式设置了Domain，那么请求的域名必须与该Domain（或其子域）完全匹配；如果没设置Domain，那就只对当前设置的域名（不含子域）发送。比如在login.example.com设了一个Cookie但没指定Domain，那api.example.com是收不到这个Cookie的。
• 路径匹配：请求的URL路径必须是Cookie中Path属性所指定的路径或其子路径。比如Path=/app的Cookie，在请求/app/user时会发送，但请求/admin时就不会。
• 协议匹配：如果Cookie带了Secure属性，那就只能在HTTPS请求中发送。
• SameSite校验：根据SameSite的设置来决定跨站请求是否允许携带。
• 有效性：Cookie不能过期。

四、Cookie 的实际使用场景

① 用户登录（会话管理）

这是最常见的场景：用户提交用户名密码后，服务器验证成功，生成一个随机的sessionId，然后通过Set-Cookie下发（通常会带上HttpOnly、Secure、SameSite=Lax这几个标记）。后续请求浏览器自动带上这个Cookie，服务器就能认出你是谁，保持登录状态。

② 记住“7天免登录”

登录时勾选“记住我”后，服务器除了下发会话Cookie，还会额外设置一个remember_token，Max-Age设置为604800（7天）。下次访问时，如果会话已经过期，但remember_token还在，服务器会自动帮你重建会话。

③ 记录用户偏好（如主题颜色）

用户点击“深色模式”时，前端通过Ja vaScript执行document.cookie = "theme=dark; max-age=31536000; path=/"。下次加载页面时，JS读取Cookie中的theme值，直接应用深色模式——整个过程不需要麻烦服务器。

④ 购物车（未登录状态）

用户未登录时添加商品，前端把商品ID和数量序列化后存入Cookie，比如cart=[{"id":1,"qty":2}]经过编码后存进去。结账时JS读取购物车数据发给服务器。当然，这个方案有局限性——Cookie大小有限，只适合少量商品。等用户登录后，最好迁移到服务端存储。

⑤ A/B 测试分组

用户首次访问时，服务器随机分配一个分组（比如group=A）并设置Cookie，有效期一个月。之后该用户始终看到A版本界面，确保实验一致性。

五、Cookie 的生成、读取、修改、删除

最常见的生成方式是在服务器端通过HTTP响应头Set-Cookie下发。Node.js（Express）的写法很简单：

res.cookie('username', 'Alice', { maxAge: 900000, httpOnly: true, secure: true });

当然，客户端也能通过Ja vaScript生成Cookie，但这种方式不太常用，而且没办法设置HttpOnly属性，也不能跨域：

document.cookie = "color=blue; path=/; max-age=86400";

读取Cookie呢？
服务端直接从HTTP请求头Cookie里拿：Cookie: sessionId=abc123; color=blue。
客户端JS则可以通过console.log(document.cookie)拿到所有非HttpOnly的Cookie，返回的是一个分号分隔的字符串。

修改Cookie也简单，使用相同的Name、Domain、Path重新设置一次就能覆盖旧值：

// 修改名为 color 的值
document.cookie = "color=red; path=/";

删除Cookie呢？把过期时间设成过去的时间就行：

document.cookie = "color=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";

六、客户端可以修改 Cookie 吗？

答案是肯定的。毕竟Cookie就存在用户自己的浏览器里，用户天然拥有完全的控制权。

通过浏览器开发者工具就能改：按F12打开开发者工具，找到Application（或“存储”）标签，左侧选择Cookies，选中当前网站。你会看到所有Cookie的清单，双击“值”那一列就能直接编辑，甚至新增或删除。

也可以通过Ja vaScript修改——但前提是这个Cookie没有设置HttpOnly属性：

// 查看所有cookie
console.log(document.cookie);

// 修改cookie（直接覆盖）
document.cookie = "username=newValue; path=/";

// 添加新cookie
document.cookie = "theme=dark; max-age=3600";

// 删除cookie
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";

有一点值得留意：如果服务器在设置Cookie时加了HttpOnly标记，document.cookie是读不到也改不了这个Cookie的——这是为了防止XSS攻击。但用户依然可以通过浏览器开发者工具直接修改它，毕竟那是浏览器提供的原生界面，不受HttpOnly限制。

七、Cookie 可以实现跨域访问吗？

默认情况下，答案是不行。Cookie严格遵循同源策略，一个域（比如a.com）设置的Cookie只能被a.com的请求自动携带，不会发给b.com。这是最基本的安全设计。

但在有限条件下，确实可以实现某种程度的“跨域”访问：

• 同一父域下的子域共享：通过设置Domain属性可以实现“跨子域”共享。比如在login.example.com设置Cookie时指定Domain=.example.com（注意前面的点），那么www.example.com、api.example.com等所有子域都能访问到这个Cookie。严格来说这不算是真正的跨域，但确实经常被问成“跨域”问题。
• 真正跨域的情况（比如a.com给b.com发请求时携带Cookie）：这就苛刻多了，必须同时满足三个条件：
  • 服务器设置Cookie时必须加上SameSite=None和Secure（必须使用HTTPS）；
  • 前端发起请求时（比如用fetch或XMLHttpRequest）加上credentials: 'include'选项；
  • 目标服务器（b.com）的响应头中必须包含Access-Control-Allow-Origin（不能是*，必须是明确的a.com）以及Access-Control-Allow-Credentials: true。

这种跨域Cookie方式存在安全风险（CSRF），现代浏览器对它的限制相当严格，一般只建议在受信任的服务之间使用。

八、Cookie 的其他常见问题

Cookie中能不能存中文？
可以，但最好用encodeURIComponent编码一下，避免分号、逗号等特殊字符搞出问题：

document.cookie = `name=${encodeURIComponent('张三')}; path=/`;

如何让Cookie只在当前浏览器会话有效？
很简单，不设置Expires和Max-Age即可，它就会变成会话级Cookie。

删除一个Cookie时为什么必须指定Path和Domain？
因为Cookie是通过“Name + Domain + Path”三元组唯一标识的。如果不提供相同的Domain和Path，浏览器会认为你是在设置一个新的Cookie，而不是删除目标Cookie。假设原Cookie的Path是/app，你只用document.cookie = "color=; expires=..."是删不掉的。

如何防止Cookie被CSRF利用？
设置SameSite=Lax或Strict。Lax允许从外部链接进入时携带Cookie，但禁止POST表单等跨站请求携带——这能防御绝大多数的CSRF攻击。

Max-Age和Expires同时出现时，哪个优先？
现代浏览器中Max-Age优先。如果两个都没设置，那就是会话级Cookie。