JavaScript 中 Cookie 怎么防止被前端 JavaScript 恶意篡改

秋辰小哥_2515

秋辰小哥_2515

2026-08-19

310人浏览

原创

javascript无法防止cookie被篡改,关键防线必须由后端实现:httponly+secure+samesite组合、服务端签名验证、敏感数据不存cookie,前端仅负责安全传递。

javascript 中 cookie 怎么防止被前端 javascript 恶意篡改

JavaScript 本身无法防止 Cookie 被用户恶意篡改——因为前端运行环境完全可控,任何加密、混淆或校验逻辑都可被绕过。真正有效的防护不是“阻止篡改”,而是“让篡改失效”。核心思路是:服务端主导验证,前端只做传递,不参与敏感逻辑。

前端无法防篡改,但可以配合防滥用

  • 浏览器不提供 JS 层面的防写入或签名验证能力
  • document.cookie 是开放接口,用户随时可用开发者工具修改值
  • 所有前端校验(如 base64 解码后比对哈希)均可被跳过或重放

所以重点不在“怎么拦住”,而在“怎么让改了也没用”。

关键防线必须由后端实现

  • HttpOnly + Secure + SameSite 是基础组合

    deep-java-review
    deep-java-review

    Java项目代码review工具。分析Git变更+完整调用链路上下文,推断业务需求,进行多维度评分和分类汇总,生成完整PRD文档。包含细粒度Java代码审查清单(Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...

    下载
    • HttpOnly:确保敏感 Cookie(如 session_id)根本不出现在 document.cookie 中,JS 读不到、改不了
    • Secure:强制仅 HTTPS 传输,防中间人窃取或注入
    • SameSite=Lax/Strict:限制跨站请求携带 Cookie,大幅降低 CSRF 风险
  • 签名或加密由后端完成

    • 例如 JWT 或自定义 token,服务端用密钥生成 HMAC-SHA256 签名,拼在 Cookie 值后(如 session=abc123.hmac)
    • 每次请求时,后端重新计算签名比对;不一致则直接拒绝,前端改了也白改
  • 敏感字段绝不存入 Cookie

    • 用户名、手机号、权限列表等明文信息不应出现在 Cookie 中
    • 这些数据应在登录验证通过后,由后端按需返回 API 响应体,并通过 HTTPS 加密传输

前端能做的实际配合

  • 登录成功后,不手动存 token 到 localStorage/sessionStorage,而是信任服务端下发的 HttpOnly Cookie
  • 若需前端读写非敏感 Cookie(如 theme=dark、lang=zh),确保值不含业务关键信息
  • 写入时显式设置 path=/ 和 Secure(HTTPS 环境下),避免因路径不匹配导致后续读取失败
  • 删除 Cookie 时,path 和 domain 必须与写入时完全一致,否则删不掉

不复杂但容易忽略

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

相关专题

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

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

2023.08.11

2163

5

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

2023.10.09

4643

6

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

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

2024.03.19

5790

13

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

2024.03.22

5218

10

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

2024.05.22

743

5

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

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

2023.06.20

4326

5

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

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

2023.07.04

1089

3

js四舍五入
js四舍五入

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

2023.07.04

4224

6

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

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

2023.09.01

860

4

热门下载

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

精品课程

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

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.6万人学习