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

喜欢吃辣椒炒肉拌面
212 阅读3分钟

1. 什么是 Cookie

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

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

特点：

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

2. Cookie 的结构

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

字段名说明
NameCookie 的名称
ValueCookie 的值（通常经过 URL 编码）
Domain可以访问该 Cookie 的域名
Path可以访问该 Cookie 的路径
Expires / Max-AgeCookie 的过期时间（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 的区别

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

✅ 总结：

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