Cookie是HTTP协议的一部分,由服务器通过Set-Cookie下发、浏览器自动存取,最大约4KB;JavaScript仅能通过document.cookie操作非HttpOnly Cookie,本质为字符串操作,需注意编码、路径、域名、Secure及安全配置。

Cookie 是浏览器保存在用户本地的一小段文本数据,最大约 4KB,用于在客户端维持状态。它不是 JavaScript 发明的,而是 HTTP 协议的一部分——服务器通过 Set-Cookie 响应头下发,浏览器自动存储,并在后续同域请求中回传。JavaScript 通过 document.cookie 可读写(仅限非 HttpOnly 的 Cookie),但本质是操作字符串,不提供原生对象接口。
Cookie 的基本结构和设置方式
每次赋值 document.cookie 都只能写入一个键值对,多个属性用分号分隔:
必需项:key=value,如 theme=dark;中文或特殊字符必须用 encodeURIComponent() 编码 过期时间:不设 expires 或 max-age 就是会话 Cookie,关浏览器即失效;设了才是持久化 Cookie 路径(path):默认为当前页面路径,设 path=/ 才能在整个域名下访问 域名(domain):如设 domain=.example.com,则 a.example.com 和 b.example.com 都能读取 Secure:只在 HTTPS 下发送,HTTP 页面设了也无效,且不会被浏览器保存
如何安全地读取和删除 Cookie
读取时 document.cookie 返回的是一个长字符串,格式类似 "a=1; b=2; c=3",需手动解析:
推荐封装一个 getCookie(name) 函数,用 split('; ') 拆分后逐个匹配 key,并用 decodeURIComponent() 解码 value 删除 Cookie 的本质是“覆盖”:把同名 Cookie 的 expires 设为过去时间,例如 Thu, 01 Jan 1970 00:00:00 GMT 删除时必须确保 path 和 domain 与当初设置时完全一致,否则删不掉
关键安全风险和应对措施
Cookie 不是保险箱,直接存密码、token 或敏感 ID 非常危险:
立即学习“Java免费学习笔记(深入)”;
别存明文凭证:即使加密,前端 JS 加密也无意义——代码可见,密钥可提取;登录态应由后端发 HttpOnly + Secure Cookie 管理 慎用 SameSite=None:若必须跨站携带(如嵌入 iframe 的支付页),必须同时配 Secure,否则现代浏览器拒绝发送 避免 XSS 泄露:敏感 Cookie 一定要后端加 HttpOnly 标志(JS 无法读取);前端操作的仅限 UI 偏好类低风险数据 优先用 max-age 而非 expires:前者是相对秒数,不受客户端时间篡改影响,更可靠
更推荐的做法:用 js-cookie 库代替原生操作
原生 API 繁琐易错,js-cookie@3.0.5+ 提供简洁安全的封装:
设置:Cookies.set('cart', items, { expires: 7, path: '/', secure: location.protocol === 'https:' }) 读取:Cookies.get('cart'),自动解码,无需手动 parse 删除:Cookies.remove('cart'),自动匹配 path/domain 它默认规避常见陷阱(如空格、分号转义),且 v3+ 版本修复了旧版 XSS 漏洞
基本上就这些。Cookie 本身不复杂,但细节容易忽略——尤其安全配置和路径匹配。日常开发中,能用后端 session 就别硬扛前端 Cookie,真要用,就设好 Secure、HttpOnly、SameSite 三件套,再配合合理过期策略。
以上就是javascript中的Cookie是什么_如何安全地使用它的详细内容,更多请关注创想鸟其它相关文章!
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1544239.html
微信扫一扫
支付宝扫一扫