前端如何预防CSRF

① 阻⽌不明外域的访问:

****同源检测 、****Samesite Cookie

② 提交时要求附加本域才能获取的信息:

****CSRF Token 、****双重Cookie验证

1、同源检测

既然CSRF⼤多来⾃第三⽅⽹站,那么我们就直接禁⽌外域(或者不受信任的域名)对我们发起请求:

使⽤Origin Header确定来源域名: 在部分与CSRF有关的请求中,请求的Header中会携带Origin字段,如果Origin存 在,那么直接使⽤Origin中的字段确认来源域名就可以 使⽤Referer Header确定来源域名: 根据HTTP协议,在HTTP头中有⼀个字段叫Referer,记录了该HTTP请求的来 源地址

2、CSRF Token

CSRF的另⼀个特征是,攻击者⽆法直接窃取到⽤户的信息(Cookie,Header,⽹站内容等),仅仅是冒⽤Cookie中的 信息。 ⽽CSRF攻击之所以能够成功,是因为服务器误把攻击者发送的请求当成了⽤户⾃⼰的请求。那么我们可以要求所有的 ⽤户请求都携带⼀个CSRF攻击者⽆法获取到的Token。服务器通过校验请求是否携带正确的Token,来把正常的请求

和攻击的请求区分开,也可以防范CSRF的攻击:

CSRF Token的防护策略分为三个步骤:

将CSRF Token输出到⻚⾯中 ⻚⾯提交的请求携带这个Token 服务器验证Token是否正确

3、双重Cookie验证

在会话中存储CSRF Token⽐较繁琐,⽽且不能在通⽤的拦截上统⼀处理所有的接⼝

那么另⼀种防御措施是使⽤双重提交Cookie。利⽤CSRF攻击不能获取到⽤户Cookie的特点,我们可以要求Ajax和表单 请求携带⼀个Cookie中的值 双重Cookie采⽤以下流程:

在⽤户访问⽹站⻚⾯时,向请求域名注⼊⼀个Cookie,内容为随机字符串(例如 csrfcookie=v8g9e4ksfhw )。 在前端向后端发起请求时,取出Cookie,并添加到URL的参数中(接上例 POST https://www.a.com/comment? csrfcookie=v8g9e4ksfhw )。

后端接⼝验证Cookie中的字段与URL参数中的字段是否⼀致,不⼀致则拒绝。

4、Samesite Cookie属性

Google起草了⼀份草案来改进HTTP协议,那就是为Set-Cookie响应头新增Samesite属性,它⽤来标明这个 Cookie是 个"同站 Cookie",同站Cookie只能作为第⼀⽅Cookie,不能作为第三⽅Cookie,Samesite 有两个属性值: Samesite=Strict: 这种称为严格模式,表明这个 Cookie 在任何情况下都不可能作为第三⽅ Cookie Samesite=Lax: 这种称为宽松模式,⽐ Strict 放宽了点限制,假如这个请求是这种请求且同时是个GET请求,则这个********Cookie可以作为第三⽅Cookie

相关推荐
子兮曰4 天前
jev-ultrafast 深度解析:7 秒订机票的浏览器 Agent 是如何炼成的
前端·后端·agent
子兮曰4 天前
Jev 爆发一周:7 秒 Agent 背后的 System One 生态与三场争议
前端·后端·ai编程
前端小万4 天前
写公众号赚了 3000 块后,我做了一款叫 "一键成稿" 的软件
前端·微信小程序
爱勇宝4 天前
ZCode 开源 24 小时:一份没有历史的账本,回答不了"有没有偷代码"
前端·后端·chatglm (智谱)
三十而立洋4 天前
Cookie 详解:从产生到安全,一次讲透
前端·javascript
卡布鲁4 天前
把一个 Vite + Vue3 应用塞进 qiankun (React + Umi3) 主站:十个坑的复盘
前端·javascript·react.js
汉堡大王95274 天前
Jev:不是聊天机器人, 而是一个智能 if 语句
前端·人工智能·后端
梦想很大很大4 天前
从运行事实到回归证据:Workrun 的 Telemetry 与 Evaluation 实践
前端·人工智能·后端
计算机魔术师4 天前
Meta Muse agent 接入 Shopify 的 Shop Pay 实现代理式购物
前端
沙蒿同学4 天前
我用 Go 搭了一条 AI Agent 流水线:从 1 张商品图到一整套淘宝详情页
前端·javascript·后端