JavaScript操作Cookies方法与安全提示

最近发现不少小伙伴都对文章很感兴趣，所以今天继续给大家介绍文章相关的知识，本文《JavaScript操作Cookies及安全注意事项》主要内容涉及到等等知识点，希望能帮到你！当然如果阅读本文时存在不同想法，可以在评论中表达，但是请勿使用过激的措辞~

document.cookie只能读写非HttpOnly Cookie，读取返回分号分隔字符串需手动解析，写入需拼接完整键值及属性（如expires、path、Secure、SameSite），删除须设过去时间且path/domain严格匹配；HttpOnly Cookie完全不可被JS访问，用于防护XSS。

JavaScript 可以读写 document.cookie，但不能直接访问 HttpOnly Cookie；安全上必须防范 XSS、避免明文存敏感信息、始终配合 SameSite 和 Secure 属性。

如何用 document.cookie 读写 Cookie

它不是对象，而是个怪异的字符串接口：读取返回分号分隔的键值对（含过期、路径等），写入需手动拼接完整字符串。没有内置的解析或删除方法。

• 设置 Cookie：document.cookie = "token=abc123; expires=Fri, 31 Dec 2027 23:59:59 GMT; path=/; secure; SameSite=Lax"
• 读取时只能拿到所有非 HttpOnly 的 Cookie 字符串，比如 "user_id=42; theme=dark"，需自己用 split('; ') 和 split('=') 解析
• 删除 Cookie：把 expires 设为过去时间，且 path 和 domain 必须与原设置完全一致，否则删不掉

为什么 document.cookie 读不到某些 Cookie

只要服务端在 Set-Cookie 响应头里加了 HttpOnly 标志，JS 就完全无法读取或修改该 Cookie —— 这是浏览器强制的安全隔离，不是权限问题，也不是代码写错了。

• 常见于 session ID、JWT 等后端验证凭证，目的就是防 XSS 盗取
• document.cookie 只暴露非 HttpOnly 的 Cookie，哪怕你用 DevTools 看 Network → Response Headers 明确看到了 Set-Cookie: auth=xxx; HttpOnly，JS 也拿不到
• 别试图绕过：没有 API、没有钩子、没有例外

SameSite、Secure、Path 这些属性怎么选

它们不是可有可无的修饰，而是决定 Cookie 是否被发送的关键开关，配错就等于功能失效或埋下漏洞。

• Secure：必须搭配 HTTPS，HTTP 站点设了也无效；开发时 localhost 默认被浏览器视为安全上下文，可临时忽略
• SameSite=Lax（推荐默认值）：跨站 GET 请求（如链接跳转）会带 Cookie，POST 表单提交或 fetch 不会；Strict 太严，None 必须配 Secure，否则被拒
• Path=/admin：只在 /admin 及其子路径下发送；漏写或写错路径（比如写成 /admin/ 却访问 /admin）会导致 Cookie 不生效

哪些数据绝对不该存在 Cookie 里

只要 JS 能读到，就等于可能被 XSS 脚本一键窃取。哪怕加了加密，只要密钥也在前端，就形同虚设。

• 密码、身份证号、银行卡号、完整手机号（脱敏后可存，如 138****1234）
• 未过期的长期 token（如 refresh token），应由后端保管并用 HttpOnly + Secure 发送
• 用户权限列表（role: ["admin"]）、未签名的用户 ID——这些应由后端校验，前端只做 UI 降级，不用于鉴权逻辑

Cookie 的边界其实很窄：它只是 HTTP 请求自动携带的一小段状态标识，不是客户端数据库。真正复杂的用户态管理，该走 IndexedDB 或内存缓存，而不是往 document.cookie 里硬塞。

理论要掌握，实操不能落！以上关于《JavaScript操作Cookies方法与安全提示》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！