这是我参与「第四届青训营 」笔记创作活动的第3天

XSS 跨站脚本攻击 Cross-Site Scripting

XSS就是 攻击者往页面中插入攻击脚本，对页面进行攻击

攻击者使用XSS，主要是利用了

1. 开发者盲目信任用户提交的内容（比如带有恶意的字符串）
2. 开发者直接把字符串生成DOM

这些恶意的代码可能是

• document.write
• element.innerHTML = anyString
• SSR(user_data) // 伪码

XSS的一些特点

1. 通常难以从UI上感知（暗地执行脚本）
2. 窃取用户的敏感信息（cookie/token）
3. 绘制UI（比如弹窗），诱骗用户点击/填写表单

举一个例子

服务端的两个接口：

submit会接收请求，将请求中的参数存入数据库中

render会从数据库中读取内容，写在HTML里，然后返回给用户

这里没有对用户提交的内容做任何过滤，如果我们是攻击者，可以这样进行攻击：数据使用一个script标签包裹，然后在里面写一些恶意脚本提交给服务器，之后服务器就会返回到页面，脚本就会被执行

常见XSS攻击方式

下面我们来介绍几种常见的XSS攻击方式

存储型 Stored XSS

• 恶意脚本被存在数据库中
• 访问页面 -> 读数据 === 被攻击
• 危害最大，对全部用户可见

注意反射型与DOM型的区别

Mutation-based XSS

• 利用了浏览器渲染DOM的特性（独特优化）
• 不同浏览器，会有区别（按浏览器进行攻击）

嵌入上面这样一段文本内容，导致浏览器解析出来的HTML是下面这样的

CSRF 跨站请求伪造

我们再来说说另一个攻击方式 Cross-site request forgery(CSRF) 跨站请求伪造

它又哪些特点呢？

• 在用户不知情的前提下

• 利用用户的权限（cookie）

• 构造指定HTTP请求，窃取或修改用户敏感信息

  看一个小demo示例

用户收到一封标题特别吸引人的邮件，他回点击进行查看，邮件是一个恶意的页面B，在访问这个B页面的时候，拿到了一些用户信息，然后他偷偷的将这些信息发送到 A服务上，这里用户是没有自己主动访问A的，此时A就拿到了用户的敏感信息，可以进行他想进行的操作了！

可以发一个GET请求

如何防御 XSS 攻击

永远不要相信用户提交的内容, 永远不要将用户提交的内容转化为DOM 防御XSS的现成工具

• 前端防御函数: google-closure-library , 流行框架直接集成
• 后端防御函数: DOMPurify

其他防御

• String转义
• SVG扫描(SVG是XML格式的, 可以内置<script>)
• 尽量禁止用户设置自定义跳转链接，如果需要也要做好过滤。
• 尽量禁止用户自定义样式（可以在样式文件里写url(...)）