📕
余烬的小册
数据结构与算法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 提供支持
在本页
  • XSS跨站脚本攻击
  • DOM型。
  • 反射型
  • 存储型
  • 总结
在GitHub上编辑
  1. 前端安全与性能优化
  2. 前端安全

跨站脚本攻击(XSS)

XSS跨站脚本攻击

跨站脚本攻击通常是通过非法注入HTML代码或JavaScript代码来操控用户浏览器的。

跨站脚本攻击主要分三种

  • DOM型:DOM可以通过操作JavaScript脚本动态的改变文档结构、样式和行为,它不需要服务器的参与,是属于前端的安全漏洞。

  • 反射性(又称非持久性):攻击者将恶意代码注入到URL中,然后提交到服务器,服务器解析后将这段恶意代码返回给浏览器,然后浏览器解析。

  • 存储性(持久性):攻击者将恶意代码发送给服务器,服务器保存到数据库中,当浏览器请求此数据时就会被攻击。

我们讨论一下上面三种类型的XSS攻击场景。

DOM型。

DOM型是纯粹的前端漏洞,一定不能将用户输入的内容直接通过v-html、outnerHTML或innerHTML渲染,否则很容易受到DOM型XSS攻击。

请看下面这种代码:

<body>
    <h1 id="h1"></h1><input id="input" type="text" />
</body>
<script>
    const input = document.querySelector("#input");
    const h1 = document.querySelector("#h1");

    input.addEventListener("keydown", (e) => {
        if (e.code === "Enter") {
            console.log(e.target);
            h1.innerHTML = e.target.value;
        }
    });
</script>

入侵者可以很容易通过输入框入侵,通过<script>注入恶意代码。

处理这类攻击一般可以从这几个方面入手:

  1. 尽量避免直接使用v-html、innerHTML和outerHTML,特别是要避免将用户的输入直接渲染,最好是使用vue的模板语法或v-text,如果要使用v-html,必须要确保内容的来源是可信。

  2. 对特殊字符进行转义,例如<、>等。

我们采用转义的方法看一下效果

// lt和gt为了避免被转义加上了\,实际代码不用加\
h1.innerHTML = e.target.value.replace(/\</g, "\&\l\t").replace(/\>/g, "\&\g\t");

能够成功防御DOM型XSS攻击。

反射型

攻击者将恶意代码注入到web服务器中,服务器将这段恶意代码返回给浏览器,由于浏览器相信服务器是“可信任的”,因此会执行脚本。

我们常常利用URL实现页面传参或者是get方法的HTTP请求,而攻击者很容易利用浏览器的地址栏来实现入侵。

const h1 = document.querySelector("#h1");
const param = decodeURIComponent(window.location.search.substring(1).split("=")[1]);
const scr = document.createElement("script");
scr.src = `http://example.com?param=${param}&callback=fn`;
document.body.appendChild(scr);

function fn(data) {
    h1.innerHTML = data;
}

以上代码通过URL来进行页面传参,先获取URL中的参数,并将其传给后端,利用JSONP来实现跨域,即通过script标签来加载后端数据,后端将参数处理后传回。

// 后端传回fn("<p style='color: red'>" + param + "</p>")

打开浏览器在后面加上参数

?param=你好

但是如果攻击者传入HTML代码,前端和后端都不做检查处理的话就会直接被入侵。

// 地址栏加上参数?tag=</p> <i>入侵</i>
<p>// 甚至可以加入script标签注入恶意代码</p>
<script src="恶意代码网址"></script>
<p>// 这时HTML变为了
<h1 id="h1">
    <p style="color: red"></p>
    <script src="恶意代码网址"></script>
    <p></p>
</h1>

通过<p>和<\p>来闭合原本的标签,然后注入恶意代码。

防御反射型XSS攻击的方式和防止DOM型类似,可以通过验证参数格式,避免使用innerHTML和v-html和对关键字符转义等方式防御此类攻击。

存储型

存储型是危害最大的一种XSS攻击方式,攻击者将恶意代码发送给服务器,并长久地保存在服务器中,当浏览器请求此数据时就会被攻击。一旦攻击者成功将恶意代码注入到服务器中,那么任何加载这段恶意代码的用户都会受到攻击。

试想一下,在一个说说社区,一个用户将恶意代码作为说说发布,如果前端和后端都没做任何防御措施,后端会将其当做普通说说存储到数据库中,而所有用户一旦打开说说社区加载到了这条说说,那么就有可能被入侵。

存储型和反射型类似,但是不同的是存储型XSS攻击会将恶意代码存入到数据库中,实现长久攻击,因此存储型XSS攻击也被称为长期型XSS攻击。

防御的手段有

  1. 进行数据验证,避免输入非法字符,严格规定输入数据的格式,从根本上阻止恶意代码被注入到数据库中,后端也应该做此限制,因为攻击者可能会绕开前端直接发送http请求。

  2. 转义特殊字符,原理同上。

总结

XSS攻击本质上是通过注入非法的HTML代码来实现入侵,因此只要针对它的攻击特点做出针对性的防御措施,就能抵御攻击。

总结针对XSS攻击最有效的防御手段有

  • 尽量避免直接使用v-html、innerHTML和outerHTML,特别是要避免将用户的输入直接渲染,最好是使用vue的模板语法或v-text,如果要使用v-html,必须要确保内容的来源是可信的,并使用dompurify这类工具进行处理。

  • 对用户输入的表单格式进行验证,严格限制用户输入的格式,比如注册时手机号必需要是11位的纯数字。不仅前端需要验证,后端也需要验证。

  • 对特殊字符转义

常用的转义字符

  • &lt

  • &gt

  • &quot

  • &#39

  • &amp;

  • &#x2F

除此之外还有

  1. 使用在响应头Set-Cookie加上httpOnly,这样可以避免js访问此cookie,这并不能阻止XSS,但是可以减少损失。

上一页前端安全下一页跨站点请求伪造(CSRF)

最后更新于1年前

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