简介

  • Cookie 是存储在用户浏览器中的一小段文本数据，用于记录和管理用户的状态信息。Cookie 是由服务器发送并存储在客户端的，随后每次用户请求相同域名的资源时，浏览器会自动携带该域的 Cookie 信息。

基本特征

  • 大小限制：每个 Cookie 的大小限制为约 4KB，具体取决于浏览器。
  • 数量限制：每个域名最多可存储约 20~50 个 Cookie，超出数量时旧的 Cookie 会被删除。
  • 自动携带：Cookie 会自动随请求发送到服务器，这可能会增加网络开销。
  • 作用域控制：
    • 域名范围 (Domain)：指定哪些域可以访问此 Cookie。
    • 路径范围 (Path)：指定 Cookie 适用的路径。
  • 安全性：
    • Secure：标记为 Secure 的 Cookie 只能通过 HTTPS 传输。
    • HttpOnly：标记为 HttpOnly 的 Cookie 无法通过 JavaScript 访问，增加了安全性。
    • SameSite：限制跨站请求时 Cookie 的发送，防止跨站请求伪造（CSRF）。

组成部分

一个 Cookie 包含以下字段：

  • 名称和值：key=value 是 Cookie 的核心数据部分。
  • 域名 (Domain)：指明 Cookie 属于哪个域，默认为当前域。
  • 路径 (Path)：限制 Cookie 的作用路径。
  • 过期时间 (Expires) 或 存活时间 (Max-Age)：
    • Expires：指定具体的过期时间，格式为 UTC 时间。
    • Max-Age：指定从设置起多少秒后过期。
  • 安全标志 (Secure)：限制 Cookie 只能通过 HTTPS 传输。
  • HttpOnly 标志：禁止 JavaScript 访问 Cookie。
  • SameSite 属性：防止第三方网站滥用 Cookie。

Cookie 的分类

  1. 会话 Cookie (Session Cookie)：仅在浏览器会话期间有效，关闭浏览器即失效。不设置 Expires 或 Max-Age 属性的 Cookie 默认为会话 Cookie。
  2. 持久性 Cookie (Persistent Cookie)：具有明确的过期时间或存活时间，存储在用户设备上，直到到期或被删除。
  3. 安全 Cookie：带有 Secure 和 HttpOnly 属性，用于增强安全性。

使用场景

  1. 用户认证：Cookie 常用于存储会话标识符（如 JWT），帮助服务器识别用户身份。
  2. 用户偏好设置：例如网站语言、字体大小等个性化设置。
  3. 购物车：在电商网站中，Cookie 可用于存储未登录用户的购物车内容。
  4. 统计和分析：记录用户访问行为，帮助网站进行流量分析。
  5. 广告跟踪：在跨域环境下通过 Cookie 追踪用户行为，实现精准广告投放。

JavaScript 操作 Cookie

（1) 获取

  1. console.log(document.cookie);
  2. // 输出格式：key1=value1; key2=value2

（2）设置

  1. document.cookie = "username=JohnDoe; domain=example path=/; expires=Fri, 31 Dec 2025 23:59:59 GMT";

（3）删除

设置一个过期时间为 0 即可删除

  1. document.cookie = "username=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT";

（4）格式化

  1. function getCookies() {
  2.   return document.cookie.split("; ").reduce((cookies, cookie) => {
  3.     const [key, value] = cookie.split("=");
  4.     cookies[key] = value;
  5.     return cookies;
  6.   }, {});
  7. }
  8. console.log(getCookies());

HTTP 响应中设置 Cookie

  1. Set-Cookie: sessionId=abc123; Path=/; HttpOnly; Secure; SameSite=Strict

Cookie 的限制与问题

  • 大小和数量限制：受浏览器限制，不能存储过多或过大的数据。
  • 安全问题：
    • 容易被窃听（未加密的传输）。
    • 容易被篡改（未签名的内容）。
    • 跨站脚本攻击（XSS）可能窃取 Cookie。
  • 性能影响：每次请求都会附加 Cookie，增加网络传输负担。
  • 跨域限制：默认情况下，Cookie 仅限同域名使用，跨域时需要额外配置。

其他的技术替代对比

参考链接