📕
余烬的小册
数据结构与算法GitHub
  • 总述
  • 经验记录
    • 经验总结
      • web component
      • 前端性能优化总结与分析
      • 我的长列表优化方案
      • 双向通讯解决方案
      • 🔧基于istanbul实现代码测试覆盖率工具
      • 表单系统(低代码表单)
      • 跨端小程序
      • 设计一个即时聊天功能
      • 跨页面通讯 3658699fe4cb4d0bbe22b0881390bacd
    • 踩坑记录
      • HTML踩坑记录
      • Flutter踩坑记录
      • CSS踩坑记录
  • 源码解析
    • Vue源码解析
      • Vue2源码解析系列-响应式原理
      • Vue2源码解析系列-模板编译
      • Vue2源码解析系列-渲染系统(待更新)
        • Patch
      • Vue2源码解析系列-调度系统(todo)
      • Vue2组件更新流程(todo)
      • 如何学习Vue源码
      • Vue3源码解析系列-响应系统
      • Vue3源码解析系列-渲染系统
      • Vue3源码解析系列-组件化和渲染优化(todo)
      • Vue router源码解析(todo)
    • React源码解析(todo)
    • 微前端
      • qiankun源码解析(todo)
    • Vite源码解析
      • Vite Client源码
      • Vite Server源码(todo)
  • 前端技术
    • javaScript
      • ES6
        • 变量声明
        • 模块化
        • 箭头函数
        • 你不知道的for...of
        • 新的数据结构Set和Map
        • JavaScript异步编程终极解决方案
        • ES6 Class 3a0c0a225a534984aabe9a943c5df975
      • JavaScript Error
      • JavaScript浅拷贝和深拷贝
      • JavaScript闭包
      • JavaScript最佳实践
      • JavaScript设计模式
      • async函数的polyfill
    • 深入理解JavaScript系列
      • JavaScript中的继承
      • JavaScript原始类型和引用类型
      • JavaScript浅拷贝和深拷贝
      • JavaScript手写系列
      • JavaScript之this
      • 词法环境和环境记录
      • JavaScript内存泄漏
      • 执行上下文
      • 从ECMAScript规范中学习this
    • TypeScript
      • TypeScript基础教程
      • Typescript高级操作
      • TypeScript工具类型
      • Typescript手写实现工具类型
      • Typescript总结(思维导图)
    • 浏览器原理
      • 页面渲染原理
      • 浏览器存储
      • JavaScript事件循环
      • 事件循环
      • 跨域
      • DOM事件流
      • 从输入url到页面渲染
      • 判断节点之间的关系及根据节点关系查找节点
      • history API
    • 跨端技术
      • Flutter
        • Flutter布局组件
    • 前端工程化
      • Babel插件开发指南
      • 循环依赖
      • pm2
    • React
      • React 状态管理
      • React组件通讯
      • Redux入门
      • Flux
      • React Hook(todo)
      • Effect
  • 服务器端
    • 计算机网络
      • 应用层
      • 运输层
      • 物理层
      • 数据链路层
      • HTTP缓存
      • HTTPS
      • 网络层
    • NodeJs
      • Node.js
      • nodejs最佳实践
      • 《深入浅出Nodejs》小结
      • mongoose填充(populate)
      • node事件循环
      • Node子进程
      • nestjs从零开始
      • nodejs流
      • Nodejs调试
      • Koa源码解析
    • 服务器
      • 操作系统
      • Linux
      • nginx常用指令
      • nginx常用配置
    • 数据库
      • Mysql常见语法
      • MongoDB Indexes索引
  • 前端安全与性能优化
    • 前端安全
      • 跨站脚本攻击(XSS)
      • 跨站点请求伪造(CSRF)
      • 点击劫持
      • 中间人攻击
      • 越权攻击与JWT
    • 前端性能优化
      • 前端监控系统
      • 前端性能优化总结与分析 7348bba0918645b1899006dc842a64c1
      • 衡量性能的核心指标 0dc15ef127cf4f4a9f1137c377420292
      • 图片懒加载
  • 杂项
    • 其他
      • Git
      • web component框架
      • 实现滚动框的懒加载
      • Stencil指南
    • CSS
      • 定位和层叠上下文
      • BFC
      • 盒模型
      • css选择器
      • css变量
由 GitBook 提供支持
在本页
在GitHub上编辑
  1. 前端安全与性能优化
  2. 前端安全

跨站点请求伪造(CSRF)

上一页跨站脚本攻击(XSS)下一页点击劫持

最后更新于1年前

CSRF跨站点请求伪造攻击

跨站点请求伪造攻击就是当受害者登录网站后,攻击者引导受害者进入第三方网站,在第三方网站发送跨站请求,利用受害者在被攻击网站中已经获取的注册凭证等信息,绕过后端验证。

在跨站点伪造请求攻击中,攻击者无法直接获取cookie等信息,只能使用。

用户首先登陆一个网站,登录成功后会保存该域名下的cookie,这里面就有登录凭证等信息,此后攻击者引用用户进入恶意网站,恶意网站会自动发送伪造请求,而cookie会被自动携带上,由于用户之前已经登录了该网站,并且有该网站包含登录凭证的cookie,因此网站很可能会认为这是用户自己发送的一个请求,从而被攻击。

为了方便理解做个例子,首先我们登录baidu.com网站,此时我们就收到了服务器传来的cookie,假设里面有登录凭证。

https://raw.githubusercontent.com/const-love-365-10000/cloudImg/master/img/20211224132937.png

然后我们写个恶意网站,这个网站只有一个img标签,打开这个网站

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>

<body> <img src="https://www.baidu.com" /> </body>

</html>

image-20211224133102478

cookie被自动携带了,即使恶意网站不是baidu.com域名,但是发送请求的Host是baidu.com,那么baidu.com域名下的cookie也会被自动携带上,因为浏览器是允许发送第三方cookie的。

假如这是段恶意代码,比如是删除用户账号的请求,并且网站没有做防护措施,那么用户就很可能被攻击成功。

防御:

  • 使用token,即将token一同发送给后端,后端验证token,由于攻击者无法获取到token,也无法伪造、借用token,因此无法伪造用户请求,所以达到了防御的目的。而token可以存入sessionStorage、localStorage或内存中,这样不容易泄露。

  • SameSite。SameSite 是HTTP响应头 Set-Cookie 的属性之一。它允许声明该Cookie是否仅限于第一方或者同一站点上下文。以前 None 是默认值,但最近的浏览器版本将 Lax 作为默认值,以便对某些类型的跨站请求伪造 (CSRF) 攻击具有相当强的防御能力。

  • 同源策略,验证请求发起的源,这个在 Origin 和 Referer头可以看到

SameSite 接受下面三个值:

  • Lax Cookies允许与顶级导航一起发送,并将与第三方网站发起的GET请求一起发送。这是浏览器中的默认值。

  • Strict Cookies只会在第一方上下文中发送,即禁止跨域发送。

  • None Cookie将在所有上下文中发送,即允许跨域发送。

在HTTP协议中,每一个异步请求都会携带两个Header,用于标记来源域名:

  • Origin Header

  • Referer Header

这两个Header在浏览器发起请求时,大多数情况会自动带上,并且不能由前端自定义内容。 服务器可以通过解析这两个Header中的域名,确定请求的来源域。但是注意这种方式并不完全可靠,因为攻击者可以绕开前端直接攻击,因此只能作为辅助手段。

https://raw.githubusercontent.com/const-love-365-10000/cloudImg/master/img/image-20211224133102478.png