JavaScript中如何操作Cookie_Cookie安全性你注意了吗

document.cookie 受同源策略和 Cookie 属性双重限制：无法跨域读取、httpOnly Cookie 不可被 js 读取；Secure Cookie 在 HTTP 页面中设置会被丢弃；SameSite 影响跨站发送；写入不支持删除或修改属性，读取需手动解析。

直接读写 document.cookie 有啥限制？

浏览器对 document.cookie 的读写是受同源策略和 Cookie 属性双重约束的。你不能跨域读取其他站点的 Cookie，也不能通过 JS 读取设置了 HttpOnly 标志的 Cookie —— 这类 Cookie 只能由服务端在响应头中设置、由浏览器自动携带，JS 调用 document.cookie 时完全看不见它。

写入时也受限：如果当前页面协议是 http://，却尝试设置 Secure 属性，该 Cookie 会被浏览器静默丢弃；同样，SameSite=Strict 或 SameSite=Lax 在某些跨站请求场景下会阻止发送。

• document.cookie = "a=1" 只会新增或覆盖同名 Cookie，无法删除或修改已有属性（如过期时间、路径）
• 读取 document.cookie 返回的是字符串，格式为 "a=1; b=2; c=3"，需手动解析，没有内置 API 解析
• 所有写入操作都必须拼接完整属性字符串，漏掉 Path=/ 可能导致后续读不到（默认路径是当前路径，不是根路径）

如何安全地封装一个 Cookie 操作函数？

原生操作太脆弱，建议封装最小可用的 setCookie 和 getCookie，重点处理编码、路径、作用域和安全属性：

function setCookie(name, value, options = {}) {   const { expires, path = '/', domain, secure, sameSite = 'Lax', httpOnly } = options;   let cookieStr = `${encodeURIComponent(name)}=${encodeURIComponent(value)}`;   if (expires instanceof date) cookieStr += `; Expires=${expires.toUTCString()}`;   if (path) cookieStr += `; Path=${path}`;   if (domain) cookieStr += `; Domain=${domain}`;   if (secure) cookieStr += '; Secure';   if (sameSite) cookieStr += `; SameSite=${sameSite}`;   // 注意：httpOnly 是响应头字段，JS 无法设置，这里仅作提醒，不参与拼接   document.cookie = cookieStr; } 
function getCookie(name) { const cookies = document.cookie.split('; ').reduce((acc, pair) => { const [k, v] = pair.split('='); acc[decodeURIComponent(k)] = decodeURIComponent(v); return acc; }, {}); return cookies[name]; }

关键点：

立即学习“Java免费学习笔记（深入）”；

• 始终对 name 和 value 做 encodeURIComponent，否则含空格、分号、等号会破坏格式
• Path=/ 必须显式指定，否则默认是当前 URL 路径（比如 /admin/user），导致首页读不到
• SameSite=Lax 是当前推荐值，能兼顾 csrf 防护与大部分正常跳转场景；Strict 过于严格，用户从外部链接进站时可能丢失登录态

Secure 和 HttpOnly 到底谁管什么？

这两个属性常被混淆，但职责完全不同：

• Secure：只允许 Cookie 通过 https 协议传输。JS 写入时若当前是 HTTP 页面，加了 Secure 会被忽略；服务端 Set-Cookie 响应头中加了，则浏览器只在 HTTPS 请求中带上它
• HttpOnly：纯服务端控制字段，JS 完全无法访问。它防的是 xss 后的 Cookie 窃取，比如攻击者注入 ，有 HttpOnly 的 Cookie 就不会出现在 document.cookie 字符串里
• 二者可共存：Set-Cookie: sessionid=abc123; HttpOnly; Secure; SameSite=Lax

注意：前端 JS 设置 Cookie 时，HttpOnly 字段会被浏览器直接忽略——它只能由服务端在响应头中声明。

为什么你设的 Cookie 明明写了 Expires 却还是会话级？

常见错误是把时间戳当日期对象传给 Expires：

• ❌ 错误：expires: Date.now() + 24 * 60 * 60 * 1000（这是毫秒数，不是 Date 对象）
• ✅ 正确：expires: new Date(Date.now() + 24 * 60 * 60 * 1000)
• 更稳妥写法是用 Max-Age（单位秒），它比 Expires 更可靠，不受客户端时间偏差影响，但 JS 无法通过 document.cookie 设置 Max-Age，只能靠服务端响应头

另一个坑：chrome 94+ 对第三方 Cookie 加强限制，默认开启 SameSite=Lax，如果你的 Cookie 是嵌在 iframe 或跨站表单提交中使用的，很可能根本发不出去——这时得确认是否真需要跨站共享，否则优先改用后端透传或 Storage API 配合 postMessage。

真正容易被忽略的，是开发环境混用 localhost 和 127.0.0.1：它们被视为不同域名，带 Domain 属性的 Cookie 在其中一个下设了，在另一个下就读不到。调试时统一用 localhost，别来回切。