面试官: “ 说一下你对 Cookie 的理解 ? ”

1. 什么是 Cookie

Cookie （小甜饼）是 服务器发送给浏览器并保存在客户端的一小段数据，用于：

• 记录用户状态（如登录信息、购物车内容）
• 跟踪用户行为（如浏览历史、广告推送）
• 存储少量配置信息（如主题偏好、语言设置）

特点：

• 大小限制：通常每个 Cookie 最大 4KB
• 数量限制：每个域名一般最多 50 个 Cookie
• 自动携带：浏览器在访问同一域名时会自动将 Cookie 附加在请求头中发送给服务器

---

2. Cookie 的结构

一个 Cookie 通常包含以下字段：

字段名	说明
Name	Cookie 的名称
Value	Cookie 的值（通常经过 URL 编码）
Domain	可以访问该 Cookie 的域名
Path	可以访问该 Cookie 的路径
Expires / Max-Age	Cookie 的过期时间（Expires 是具体日期，Max-Age 是秒数）
HttpOnly	如果设置，Cookie 不能通过 JavaScript 访问（防止 XSS 攻击）
Secure	如果设置，Cookie 只能通过 HTTPS 传输
SameSite	控制跨站请求时是否发送 Cookie（防止 CSRF 攻击）

---

3. Cookie 的工作流程

1. 服务器发送 Cookie : 当浏览器第一次访问服务器时，服务器在响应头中添加：

   Set-Cookie: username=Tom; Path=/; HttpOnly; Secure

   浏览器收到后会将该 Cookie 保存到本地。

2. 浏览器存储 Cookie : Cookie 会被保存在浏览器的某个文件或内存中，根据 Domain 和 Path 来区分。

3. 浏览器发送请求时携带 Cookie : 之后每次访问同一域名和路径时，浏览器会自动在请求头中添加：

   Cookie: username=Tom

   服务器通过读取这个 Cookie 来识别用户。

---

4. Cookie 的分类

（1）会话 Cookie（Session Cookie）

• 没有设置 Expires 或 Max-Age
• 浏览器关闭后自动删除
• 常用于保存短期会话信息（如登录状态）

（2）持久 Cookie（Persistent Cookie）

• 设置了 Expires 或 Max-Age
• 在过期时间前一直有效，即使浏览器关闭
• 常用于保存长期信息（如记住登录、用户偏好）

---

5. Cookie 的优缺点

优点

• 简单易用：服务器和浏览器都原生支持
• 自动携带：无需手动处理
• 轻量级：适合存储少量数据

缺点

• 容量小：每个 Cookie 最大 4KB

• 安全性差：

  • 容易被窃取（XSS 攻击）
  • 容易被伪造（CSRF 攻击）

• 性能影响：

  • 每次请求都会携带，增加带宽消耗
  • 过多 Cookie 会影响页面加载速度

---

6. Cookie 的安全设置

为了提高安全性，建议设置以下属性：

• HttpOnly：防止 JavaScript 访问（减少 XSS 风险）

• Secure：只在 HTTPS 连接中传输

• SameSite：

  • Strict：仅在同站请求时发送
  • Lax：允许部分跨站请求（如 GET 表单提交）

• 合理的过期时间：短期 Cookie 减少被盗风险

---

7. 示例：使用 Cookie

（1）服务器设置 Cookie（Node.js + Express）

const express = require('express');
const app = express();

app.get('/login', (req, res) => {
  // 设置一个会话 Cookie
  res.cookie('username', 'Tom', {
    httpOnly: true,
    secure: process.env.NODE_ENV === 'production',
    sameSite: 'Strict',
    maxAge: 3600000 // 1 小时
  });
  res.send('登录成功');
});

app.get('/profile', (req, res) => {
  // 读取 Cookie
  const username = req.cookies.username;
  if (username) {
    res.send(`欢迎你，${username}`);
  } else {
    res.send('请先登录');
  }
});

app.listen(3000);

（2）浏览器查看 Cookie

• Chrome：F12 → Application → Cookies
• Firefox：F12 → Storage → Cookies

---

8. Cookie 与 Token 的区别

特性	Cookie	Token
存储位置	浏览器	浏览器（LocalStorage/SessionStorage）或 App
传输方式	自动在 HTTP 请求头中发送	需要手动在请求头中添加（如 Authorization: Bearer <token>）
容量限制	每个 Cookie 最大 4KB	无固定限制（但过大影响性能）
安全性	较低（易受 XSS/CSRF 攻击）	较高（可结合 HttpOnly、Secure、SameSite）
适用场景	简单会话管理、短期状态存储	复杂认证授权、跨域请求、移动应用

---

✅ 总结：

• Cookie 是服务器保存在浏览器的一小段数据，用于记录状态和跟踪用户
• 自动携带在请求头中，方便但有容量和安全限制
• 常用于简单会话管理，现代 Web 开发中更多与 Token 结合使用
• 安全使用需设置 HttpOnly、Secure、SameSite 等属性