JavaScript 中怎么在 Cookie 中利用 HttpOnly 配合后端实现安全的 Token 存储

落辰同学_7890

落辰同学_7890

2026-08-11

892人浏览

原创

httponly cookie 由后端通过 set-cookie 响应头设置,禁用 javascript 访问以防御 xss;前端仅需配置 credentials: 'include' 自动携带,不读取、不存储、不手动注入 token。

javascript 中怎么在 cookie 中利用 httponly 配合后端实现安全的 token 存储

HttpOnly Cookie 本身不能直接“存储 Token”,而是由后端在设置 Cookie 时启用 HttpOnly 标志,让浏览器禁止 JavaScript 访问该 Cookie —— 这正是它提升安全性的核心机制。前端 JavaScript 不应(也无法)主动创建或读取 HttpOnly Cookie,所有 Token 的写入、验证、刷新都必须通过后端接口完成。

为什么不能用 JS 操作 HttpOnly Cookie

HttpOnly 是浏览器强制执行的安全属性:一旦响应头中设置了 Set-Cookie: token=xxx; HttpOnly; Secure; SameSite=Strict,JavaScript 的 document.cookie 就完全无法读取或修改这个 Cookie。这是防御 XSS 攻击的关键防线 —— 即使页面被注入恶意脚本,也无法窃取 Token。

后端如何正确设置 HttpOnly Token Cookie

后端在用户登录成功后,生成 Token(如 JWT),并通过 HTTP 响应头下发带安全属性的 Cookie:

js2java
js2java

JavaScript 到 Java 全栈翻译助手,专为前端开发者学习 Java 或快速实现后端业务逻辑而设计。当用户提到以下场景时必须使用此技能: - "帮我把这段 JS 代码转成 Java" - "用 Java 怎么写这个逻辑" - "我习惯用 JS 写,想翻译成 Java" - "教我 Java,我要写后端接...

下载
  • 必须包含 HttpOnly:阻止 JS 访问
  • 搭配 Secure:仅在 HTTPS 下传输(生产环境必需)
  • 设置 SameSite=Strict 或 Lax:防范 CSRF(推荐 Lax,兼顾可用性)
  • 合理设置 Expires/Max-Age:避免长期有效 Token 增加风险
  • 避免在 Cookie 中存敏感字段:Token 本身应签名+加密,且 payload 不含密码等明文信息

前端如何配合实现安全交互

前端不碰 Token 字符串,只通过标准 HTTP 请求自动携带 Cookie:

  • 所有需要认证的请求(如 fetch('/api/profile', { credentials: 'include' }))需显式设置 credentials: 'include'
  • 登录表单提交用 POST 到后端登录接口,由后端返回 HttpOnly Cookie,前端无需解析响应体中的 Token
  • 登出时调用后端登出接口(如 POST /auth/logout),由后端清除 Cookie(Set-Cookie: token=; expires=Thu, 01 Jan 1970 00:00:00 GMT)
  • 无需在 localStorage/sessionStorage 中备份 Token,也不做手动 Authorization header 注入

补充建议:增强整体安全性

HttpOnly 是重要一环,但不是银弹:

  • 后端需校验 Cookie 中 Token 的签名、过期时间、签发者等,并绑定用户设备指纹或 Session ID 做二次校验
  • 敏感操作(如改密、支付)建议额外要求二次验证(短信/OTP)
  • 前端仍需防范 XSS:及时升级依赖、避免 innerHTML 插入不可信内容、使用 CSP
  • 考虑短期 Access Token + 长期 Refresh Token 分离机制,Refresh Token 同样走 HttpOnly Cookie

不复杂但容易忽略:安全不是某个技术点的事,而是 Cookie 属性、后端验证逻辑、前端调用方式、部署环境(HTTPS)、监控告警共同构成的闭环。

Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

javascript java cookie

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.11

2523

5

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

2024.03.19

6470

13

后端的主要工作内容介绍
后端的主要工作内容介绍

后端是应用程序的服务端部分,负责核心任务,如数据库交互、业务逻辑处理和响应客户端请求。想了解更多后端的相关内容,可以阅读本专题下面的文章。

2024.03.19

5866

10

js获取数组长度的方法
js获取数组长度的方法

在js中,可以利用array对象的length属性来获取数组长度,该属性可设置或返回数组中元素的数目,只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值,也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容,供大家免费下载使用。

2023.06.20

4966

5

js刷新当前页面
js刷新当前页面

js刷新当前页面的方法:1、reload方法,该方法强迫浏览器刷新当前页面,语法为“location.reload([bForceGet]) ”;2、replace方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,不能通过“前进”和“后退”来访问已经被替换的URL,语法为“location.replace(URL) ”。php中文网为大家带来了js刷新当前页面的相关知识、以及相关文章等内容

2023.07.04

1229

3

js四舍五入
js四舍五入

js四舍五入的方法:1、tofixed方法,可把 Number 四舍五入为指定小数位数的数字;2、round() 方法,可把一个数字舍入为最接近的整数。php中文网为大家带来了js四舍五入的相关知识、以及相关文章等内容

2023.07.04

4884

6

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

2023.09.01

960

4

JavaScript转义字符
JavaScript转义字符

JavaScript中的转义字符是反斜杠和引号,可以在字符串中表示特殊字符或改变字符的含义。本专题为大家提供转义字符相关的文章、下载、课程内容,供大家免费下载体验。

2023.09.04

1876

5

js生成随机数的方法
js生成随机数的方法

js生成随机数的方法有:1、使用random函数生成0-1之间的随机数;2、使用random函数和特定范围来生成随机整数;3、使用random函数和round函数生成0-99之间的随机整数;4、使用random函数和其他函数生成更复杂的随机数;5、使用random函数和其他函数生成范围内的随机小数;6、使用random函数和其他函数生成范围内的随机整数或小数。

2023.09.04

3505

4

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.2万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.7万人学习