HttpOnly

HttpOnly是什么

HttpOnly是一个Cookie的属性，当设置了HttpOnly标记后,JS将无法访问该 Cookie。这是一种安全机制，主要用于防止XSS（跨站脚本）攻击。

存储方式对比

Cookie（带 HttpOnly）

• 特点：
  • 服务器端可设置和读取
  • 客户端 JavaScript 无法访问（设置 HttpOnly 时）
  • 会随每个 HTTP 请求自动发送到服务器
  • 容量限制约 4KB
  • 可设置过期时间
• 适用场景：
  • 存储用户身份认证信息（如 session ID）
  • 需要防范 XSS 攻击的敏感数据
  • 需要随请求自动发送到服务器的数据
• 后端设置

  res.cookie('sessionId', 'abc123', {
  httpOnly: true,
  secure: true,
  sameSite: 'strict'
  });
  

• 前端无法设置

LocalStorage

• 特点：
  • 永久存储，除非手动清除
  • 容量较大（约 5-10MB）
  • JavaScript 可以自由访问
  • 不会随请求发送到服务器
• 适用场景：
  • 存储用户偏好设置
  • 缓存静态数据
  • 存储应用状态
  • 不敏感的持久化数据

SessionStorage

• 特点：
  • 仅在当前会话期间有效（关闭标签页即清除）
  • 容量较大（约 5-10MB）
  • JavaScript 可以自由访问
  • 不会随请求发送到服务器
• 适用场景：
  • 表单数据临时保存
  • 页面间数据传递
  • 一次性使用的临时数据

适用场景

1. 敏感数据（如身份认证令牌）：使用HttpOnly Cookie
2. 用户偏好等非敏感持久数据：使用LocalStorage
3. 临时表单数据或会话数据：使用SessionStorage
4. 需要与服务器交互的数据：考虑使用Cookie

安全性

• HttpOnly Cookie 可以防止XSS攻击
• LocalStorage和SessionStorage容易受到XSS攻击，不要存储敏感信息
• 所有客户端存储都不应该存储用户密码等高度敏感的信息