知食记
  • 知食记
  • 思维导图
  • 归档
  • 博客
    • 理解 CAP 理论,以开一家餐厅为例
    • TypeScript tsconfig.json 整理
    • this 陷阱与原理
    • 时间戳与时区
    • vue-cli 项目添加 tailwind.css
    • 实现 JavaScript 数组的逆序索引
    • 工程师段位记
    • Jest 内部原理剖析
    • 如何成为技术高手
    • Vue lifecycle hook little trick
    • 利用 Cloudflare Worker 定制 Gitbook
    • 如何解除端口占用?
  • 🎃CSS
    • CSS基础
      • 盒模型
      • 清除浮动
      • html5的语义化标签
      • 水平居中
      • 垂直局中
      • 水平垂直居中
      • Sticky Footer
      • 三栏布局
      • 文本截断省略号
      • 伪类与伪元素
      • 定位
      • BEM
      • 主题切换
      • 权重
      • px, em, rem
      • flex 布局
    • CSS3
      • calc
    • SCSS
      • lighten
  • 🎉JavaScript
    • JS 概念
      • 类型
      • 类型转换
      • 内存
      • 原型链
      • 继承
        • 类式继承+原型继承
        • 构造函数继承
        • 组合式继承
        • 寄生继承
        • 寄生组合
      • 词法作用域
      • 事件委托
      • Falsy
      • This
      • 闭包
      • Event-loop
      • 跨域
      • function.length
      • arguments
      • !!
      • void 0
      • 柯里化1
      • 柯里化2
      • 异常
      • 协程
    • JS陷阱
      • 相等
      • 连等赋值
      • 改变数组的length
      • 引用传参
      • new Number vs Number
      • new Object vs Object vs Object.create(null)
    • JS开发知识点
      • html classlist
      • 图片懒加载
      • 提取对象中所有属性除了某一项
      • 空值判断
    • 实现JS常见函数
      • Debounce
      • Throttle
      • Call, Apply, Bind
      • type
      • 深拷贝
      • isEuqal
      • 数组乱序
      • 数组去重
      • 实现 merge
      • 数组flat
      • 实现 map
      • 数组filter
      • 模拟new
      • 模拟实现async
      • 模拟instance of
      • Object.create(null)与{}
      • 实现promisify
      • 实现Promise.all
      • 实现Promise.race
      • 实现Promise.resolve/reject
      • 实现Promise.finnaly
      • 实现Promise
      • 实现parseInt
      • 实现foreach
      • 实现Object keys
    • 实现JS 常见操作函数
      • JS Empty
      • JS Safe Get
    • JS Worker
      • Cloudflare Worker
    • ES6
      • ES6/ES7/ES8/ES9索引
      • +,-,** 运算符
      • Let 知识点
      • 块级作用域
      • Const知识点
      • Class
      • Proxy
      • Reflect
      • Symbol
      • Promise
      • Iterator
      • For-of
      • for..in 与 for..of的区别
      • Iterator
      • Generator函数
      • async
      • 装饰器
      • 模块
      • WeakMap
      • 模块
      • 尾调用优化
    • ES6 函数
      • concat
      • reduce
      • slice
      • splice
      • Array.some
      • Array every
      • Array.prototype.includes
      • Object.entries/Object.values/Object.keys
    • Typescript
      • 使用
        • 基础类型
        • ?: 可选属性
        • Keyof
        • is
        • in
        • Partial
        • DeepPartial
        • Required
        • Exclude
        • Pick
        • Omit
        • infer
        • ReturnType
        • Record
        • 重载
        • 泛型变量
        • 泛型接口
        • 字面量类型守卫
        • type和interface的区别
        • 赋值断言
        • 类型断言
      • 编译原理
        • 编译器
      • 设计工具类型(重要)
    • V8
      • JS 数组
      • 垃圾回收
  • 🕹️框架
    • Vue
      • 基础知识
      • 长列表性能优化
      • mixin
      • 渲染函数
      • 组件间通信
      • vue中的柯里化闭包
      • vue 渲染过程
      • Vue采用虚拟DOM的目的是什么
      • keep-alive
      • nextTick
      • vue 数组变异
      • vue-computed原理
      • vue-router原理
      • vue-router权限控制
      • 路由懒加载
      • Vue diff原理
      • computed如何与视图绑定
      • scope css
      • Runtime Only vs Runtime + Compiler
      • 集中变量管理
        • 程序化的事件侦听器
        • Flux
        • Redux
        • Vuex
    • Vue3
      • Object.defineProperty与Proxy区别
    • React
      • 无法preventDefault
      • Parent控制Child(Lifting state up)
      • Dynamic Ref
      • useRef warning
      • 定义固定长度的数组
    • React-Redux
      • 基础概念
      • mapStateToProps
      • mapDispatchToProps
      • Provider
    • React Hooks
      • useState
      • useEffect
      • useContext
      • useReducer
      • useMemo
    • Nuxt
      • SSR 与 预渲染
    • Koa2
      • compose
  • 🎯算法
    • 算法与数据结构
      • 基础知识
        • 大O表示法
      • 排序
        • 基础知识
        • 冒泡排序 bubble sort
        • 选择排序
        • 插入排序
        • 前三种总结
        • 归并排序
        • 快速排序
        • 以上总结
      • 递归
        • 实现斐波那契数列
        • 深拷贝
        • Array.flat 实现
        • 爬楼梯
        • 递归问题
      • 队列
        • 队列模仿栈
      • 二叉树专题
        • 基本结构
        • 前序遍历
        • 中序遍历
        • 后序遍历
        • 重建二叉树
        • 求二叉树的遍历
        • 相同的树
      • 回溯法
      • JS 大数相加
      • 动态规划
        • 爬楼梯
      • 二分搜索
      • LRU
      • 数据结构
        • 数组
        • 栈
        • 队列
        • 链表
          • 单链表
          • 双向链表
          • 循环列表
        • 集合
        • 字典
      • Leetcode
        • 1. 两数之和
        • 2. 两数相加
        • 3. 无重复字符最长字串
        • 5. 最长回文子串
        • 6. Z字形变换
        • 7. 整数反转
        • 8. 字符串转换整数
        • 15. 三数之和
        • 134. 加油站
  • 🎁HTML
    • DOM
      • MutationObserver
      • node.contains
      • readystate
    • SVG
      • 坐标系
      • g元素
      • 实现缩放
      • react typescript svg相关
  • 🏈计算机网络
    • 浏览器
      • 浏览器与JS 线程
      • 缓存
      • 浏览器的本地存储
      • 输入URL到页面加载发生了什么
      • Preload, Prefetech,DNS Prefetching
      • defer, async 脚本
      • 前端监控异常捕捉
      • 内存泄露
      • 指纹
      • XSS
      • CSRF
      • 性能优化
      • *网页优化
      • requestAnimationFrame
      • 问题清单
        • 为什么 Javascript 是单线程的?
    • 计算机网络
      • 基础知识
      • 代理
      • HTTP1/2/3
      • HTTPS
      • HTTP请求中的keep-alive
      • http的方法
      • HTTP状态码
      • 运输层
        • TCP
          • 可靠传输
        • UDP
      • CA
      • CORS
      • Referer
      • referer, host, origin对比
      • websocket
      • CDN
  • 🥊前端生态
    • Webpack
      • 基础概念
      • 配置记录
      • sourcemap
      • 常用Webpack插件记录
      • webpack相关竞品
      • HMR
      • Tree-shaking的原理
      • Long Term Cache
      • Code Splitting
    • Babel
    • Fetch
      • Fetch取消请求
    • Axios
      • axios避免重复请求
      • 运行机制
      • 取消源码
      • axios做到多种调用方式
    • Npm
      • 设置镜像源
      • 全局安装目录
      • npx
      • 镜像源
    • Yarn
      • yarn link
    • 业务开发
      • 记住登陆
      • 统一登录/单点登录/SSO
      • 大文件上传与断点续传
      • 防止表单重复提交
      • 扫码登录如何实现的
      • 高性能网站标准
      • 性能监控
        • performance 分析
        • 上报
        • 首屏时间
    • 微前端
      • 微前端实施方式
      • single-spa重要概念
    • Hexo
      • 常用Hexo插件记录
  • 🏀后端
    • Node
      • nodejs的应用
      • API 网关
    • Java
      • 简介
    • Python
      • Pyenv
  • 🕹️面试
    • 面试真经
      • Set、Map、WeakSet 和 WeakMap 的区别?
      • Map+ParseInt
      • 红绿灯Promise问题
      • 0.1 + 0.2
      • vue面试清单
      • 状态码问题 301 302
      • 算法和数据结构清单
      • 腾讯面经
        • 电话面试
          • window的onload事件和domcontentloaded顺序
        • 远程面
          • new和instanceof的内部机制
          • typeof 和 instanceof 区别
          • flex-grow和flex-shrink属性有什么用?
      • 头条面经
        • 笔试
          • 153812.7 转化153,812.7
          • 日期转化为2小时前,1分钟前等
          • 实现sum(1)(2)(3) = 6
          • 最多频次
          • 类继承面试
          • 前端请求并发控制
          • CSS画三角形
          • CSS 画正方形
          • 下载页面的所有图片
          • 实现链式调用
          • 100 * 100 的 Canvas 占内存多大
      • javascript-questions
        • 原型链与new优先级
        • 函数+模板字符串
        • 对象引用
        • use strict
        • 声明提升相关
        • 对象键值存储
        • target与事件冒泡
        • call与bind
        • falsy
        • map, reduce和正则
        • event-loop与promise
        • 变量提升和声明作用域
    • To-do
      • axios 重放多种策略
  • 🤖开源
    • 开源项目
      • Hooks
      • 论坛
      • 开发流程
      • 前端监控
      • 模板
      • svg
  • 🧸其他
    • Linux
      • 免密登陆
      • Mac终端代理
    • Git
      • 创建 ssh rsa
      • 删除分支
      • 覆盖已有提交
      • 合并多个commit
      • 撤销merge
    • 正则
      • 题目
        • 转换为驼峰命名法
        • JS实现千位分隔符
        • 获取 url 参数
        • 用正则实现trim() 清除字符串两端空格
    • 设计模式
      • 简单工厂模式
      • 抽象工厂模式
      • 单例模式
      • 装饰器模式
      • 适配器模式
      • 代理模式
      • 观察者模式
      • 发布-订阅模式
      • 观察者模式与发布-订阅模式的区别是什么?
      • 单例模式
      • 工厂模式
      • 享元模式
    • 计算机理论
      • solid原则
        • SRP | The Single Responsibility Principle
        • OCP | The Open Closed Principle
        • LSP | The Liskov Substitution Principle
        • ISP | The interface Segregation Principle
        • DIP | The Dependency Inversion Principle
由 GitBook 提供支持
在本页
  • 定义
  • 类型
  • 防护策略
  • CSRF 优化
  • CSRF Token 总结
  • 总结

这有帮助吗?

  1. 🏈计算机网络
  2. 浏览器

CSRF

上一页XSS下一页性能优化

最后更新于5年前

这有帮助吗?

定义

CSRF(Cross-site request forgery)跨站请求伪造:攻击者诱导受害者进入第三方网站,在第三方网站中,向被攻击网站发送跨站请求。利用受害者在被攻击网站已经获取的注册凭证,绕过后台的用户验证,达到冒充用户对被攻击的网站执行某项操作的目的。

一个典型的CSRF攻击有着如下的流程:

  • ,这样就拥有了登录凭证(Cookie)。

  • 。

  • 向 发送了一个请求:a.com/act=xx。浏览器会默认携带a.com的cookie

  • a.com接收到请求后,对请求进行验证,并确认是受害者的凭证,误以为是受害者自己发送的请求。

  • a.com以受害者的名义执行了act=xx。

  • 攻击完成,攻击者在受害者不知情的情况下,冒充受害者,让a.com执行了自己定义的操作。

实例:

坏蛋 想到使用 CSRF 的攻击方式,他先自己做一个网站,在网站中放入如下代码: src=” ”,并且通过广告等诱使 受害者 来访问他的网站。当 受害者 访问该网站时,上述 url 就会从 受害者 的浏览器发向银行,而这个请求会附带 受害者 浏览器中的 cookie 一起发向银行服务器。大多数情况下,该请求会失败,因为他要求 受害者 的认证信息。但是,如果 受害者 当时恰巧刚访问他的银行后不久,他的浏览器与银行网站之间的 session 尚未过期,浏览器的 cookie 之中含有 受害者 的认证信息。这时,悲剧发生了,这个 url 请求就会得到响应,钱将从 受害者 的账号转移到 坏蛋 的账号,而 受害者 当时毫不知情。

类型

常见的攻击类型

  • GET类型的CSRF

GET类型的CSRF利用非常简单,只需要一个HTTP请求,一般会这样利用:

 <img src="http://bank.example/withdraw?amount=10000&for=hacker" > 

在受害者访问含有这个img的页面后,浏览器会自动向http://bank.example/withdraw?account=xiaoming&amount=10000&for=hacker发出一次HTTP请求。bank.example就会收到包含受害者登录信息的一次跨域请求。

  • POST类型的CSRF

这种类型的CSRF利用起来通常使用的是一个自动提交的表单,如:

 <form action="http://bank.example/withdraw" method=POST>
    <input type="hidden" name="account" value="xiaoming" />
    <input type="hidden" name="amount" value="10000" />
    <input type="hidden" name="for" value="hacker" />
</form>
<script> document.forms[0].submit(); </script> 

访问该页面后,表单会自动提交,相当于模拟用户完成了一次POST操作。

POST类型的攻击通常比GET要求更加严格一点,但仍并不复杂。任何个人网站、博客,被黑客上传页面的网站都有可能是发起攻击的来源,后端接口不能将安全寄托在仅允许POST上面。

  • 链接类型的CSRF

链接类型的CSRF并不常见,比起其他两种用户打开页面就中招的情况,这种需要用户点击链接才会触发。这种类型通常是在论坛中发布的图片中嵌入恶意链接,或者以广告的形式诱导用户中招,攻击者通常会以比较夸张的词语诱骗用户点击,例如:

  <a href="http://test.com/csrf/withdraw.php?amount=1000&for=hacker" taget="_blank">
  重磅消息!!
  <a/>

由于之前用户登录了信任的网站A,并且保存登录状态,只要用户主动访问上面的这个PHP页面,则表示攻击成功。

防护策略

CSRF通常从第三方网站发起,被攻击的网站无法防止攻击发生,只能通过增强自己网站针对CSRF的防护能力来提升安全性。

上文中讲了CSRF的两个特点:

  • CSRF(通常)发生在第三方域名。

  • CSRF攻击者不能获取到Cookie等信息,只是使用。

CSRF 攻击是黑客借助受害者的 cookie 骗取服务器的信任,但是黑客并不能拿到 cookie,也看不到 cookie 的内容。另外,对于服务器返回的结果,由于浏览器同源策略的限制,黑客也无法进行解析。

验证 HTTP Referer 字段 / 也就是同源检测

方法的显而易见的好处就是简单易行,网站的普通开发人员不需要操心 CSRF 的漏洞,只需要在最后给所有安全敏感的请求统一增加一个拦截器来检查 Referer 的值就可以。特别是对于当前现有的系统,不需要改变当前系统的任何已有代码和逻辑,没有风险,非常便捷。

但是Referer 的值是由浏览器提供的,虽然 HTTP 协议上有明确的要求,但是每个浏览器对于 Referer 的具体实现可能有差别,并不能保证浏览器自身没有安全漏洞。

CSRF Token 存于 session 和 html 中 进行对比验证

前面讲到CSRF的另一个特征是,攻击者无法直接窃取到用户的信息(Cookie,Header,网站内容等),仅仅是冒用Cookie中的信息。

而CSRF攻击之所以能够成功,是因为服务器误把攻击者发送的请求当成了用户自己的请求。那么我们可以要求所有的用户请求都携带一个CSRF攻击者无法获取到的Token。服务器通过校验请求是否携带正确的Token,来把正常的请求和攻击的请求区分开,也可以防范CSRF的攻击。

1.将CSRF Token输出到页面中

首先,用户打开页面的时候,服务器需要给这个用户生成一个Token,该Token通过加密算法对数据进行加密,一般Token都包括随机字符串和时间戳的组合,显然在提交时Token不能再放在Cookie中了,否则又会被攻击者冒用。因此,为了安全起见Token最好还是存在服务器的Session中,之后在每次页面加载时,使用JS遍历整个DOM树,对于DOM中所有的a和form标签后加入Token。这样可以解决大部分的请求,但是对于在页面加载之后动态生成的HTML代码,这种方法就没有作用,还需要程序员在编码时手动添加Token。

2.页面提交的请求携带这个Token

 <input type=”hidden” name=”csrftoken” value=”tokenvalue”/>

这样,就把Token以参数的形式加入请求了。

3.服务器验证Token是否正确

当用户从客户端得到了Token,再次提交给服务器的时候,服务器需要判断Token的有效性,验证过程是先解密Token,对比加密字符串以及时间戳,如果加密字符串一致且时间未过期,那么这个Token就是有效的。

CSRF 优化

由于使用Session存储,读取和验证CSRF Token会引起比较大的复杂度和性能问题,目前很多网站采用Encrypted Token Pattern方式。这种方法的Token是一个计算出来的结果,而非随机生成的字符串。这样在校验时无需再去读取存储的Token,只用再次计算一次即可。

这种Token的值通常是使用UserID、时间戳和随机数,通过加密的方法生成。这样既可以保证分布式服务的Token一致,又能保证Token不容易被破解。

在token解密成功之后,服务器可以访问解析值,Token中包含的UserID和时间戳将会被拿来被验证有效性,将UserID与当前登录的UserID进行比较,并将时间戳与当前时间进行比较。

CSRF Token 总结

Token是一个比较有效的CSRF防护方法,只要页面没有XSS漏洞泄露Token,那么接口的CSRF攻击就无法成功。

但是此方法的实现比较复杂,需要给每一个页面都写入Token(前端无法使用纯静态页面),每一个Form及Ajax请求都携带这个Token,后端对每一个接口都进行校验,并保证页面Token及请求Token一致。这就使得这个防护策略不能在通用的拦截上统一拦截处理,而需要每一个页面和接口都添加对应的输出和校验。这种方法工作量巨大,且有可能遗漏。

验证码和密码其实也可以起到CSRF Token的作用哦,而且更安全。

为什么很多银行等网站会要求已经登录的用户在转账时再次输入密码,现在是不是有一定道理了?

我知道但是没怎么用的

  • 双重cookie

  • samesite cookie

总结

  • CSRF自动防御策略:同源检测(Origin 和 Referer 验证)。

  • CSRF主动防御措施:Token验证 或者 双重Cookie验证 以及配合Samesite Cookie。

  • 保证页面的幂等性,后端接口不要在GET页面中做用户操作。

对于GET请求,Token将附在请求地址之后,这样URL 就变成 而对于 POST 请求来说,要在 form 的最后加上:

受害者登录a.com
攻击者引诱受害者访问了b.com
b.com
a.com
http://bank.example/withdraw?account=bob&amount=1000000&for=Mallory
http://url?csrftoken=tokenvalue。
前端安全系列之二:如何防止CSRF攻击? - 掘金
Logo