Likanug // lab
返回文章列表

文章

技术分享

关于http-only cookie和普通的cookie的区别

#http#信息安全#Web
目录
  1. 我们来仔细区分一下 HttpOnly Cookie 和普通 Cookie（非 HttpOnly Cookie），并解释它们在安全性和访问方式上的差别。
  2. 1️⃣ 定义区别
  3. 2️⃣ 访问方式
  4. 普通 Cookie
  5. HttpOnly Cookie
  6. 3️⃣ 安全性差异
  7. 4️⃣ 总结
  8. 📎 参考文章

我们来仔细区分一下 HttpOnly Cookie 和普通 Cookie（非 HttpOnly Cookie），并解释它们在安全性和访问方式上的差别。#

1️⃣ 定义区别#

特性HttpOnly Cookie普通 Cookie
JavaScript 访问❌ 前端 JS 无法通过 document.cookie 读写✅ 可以通过 document.cookie 读写
用途保存敏感信息，如 token、session ID，防止 XSS 被窃取一般用于存储用户偏好、界面状态等非敏感信息
设置方式后端通过 Set-Cookie: access_token=xxx; HttpOnly 设置后端或前端都可以设置，如 document.cookie = "name=value"
发送请求浏览器会在同域请求时自动发送同域请求时自动发送
安全性更安全，不会被前端脚本窃取如果页面被 XSS 攻击，可能被 JS 读取窃取

2️⃣ 访问方式#

普通 Cookie#

// 读取 cookie
console.log(document.cookie);

// 设置 cookie
document.cookie = "theme=dark; path=/; max-age=3600";

HttpOnly Cookie#

// JS 无法访问 document.cookie
// 必须通过后端 Set-Cookie 设置和删除
// 设置cookie
let jwt =""; 
let cookie = Cookie::build("access_token", jwt)
        .http_only(true)
        .secure(true) // 生产环境必须 https
        .path("/")
        .same_site(actix_web::cookie::SameSite::None) // 为None时可                         //以跨站点请求携带 Cookie
        .finish();
 // 清除cookie
let cookie = Cookie::build("access_token", "")
    .path("/")
    .http_only(true)
    .secure(true) // 之前 cookie 是 Secure
    .same_site(SameSite::None)
    .max_age(time::Duration::seconds(0)) // 设置立即过期
    .finish();
  • 如果你尝试用 document.cookie 访问 HttpOnly cookie，浏览器根本看不到。
  • 删除 HttpOnly cookie 也必须通过 后端返回一个过期的 Set-Cookie。

3️⃣ 安全性差异#

  1. 防止 XSS 攻击
    • 普通 cookie 在页面被注入恶意 JS 时可能被窃取
    • HttpOnly cookie JS 无法访问，因此攻击者无法直接读取
  2. 仍然可能被 CSRF 攻击
    • HttpOnly cookie 会随每次请求自动发送，如果没有 CSRF 防护（如 SameSite）仍然可能被利用
    • 所以 HttpOnly + SameSite 是常见安全组合

4️⃣ 总结#

  • HttpOnly = 前端 JS 不可访问，安全性高 → 用于 token/session
  • 普通 Cookie = 前端 JS 可访问，适合非敏感数据
  • 对于 access_token、session ID 等敏感信息，推荐使用 HttpOnly cookie，并配合 Secure + SameSite

📎 参考文章#