什么是 XSS

[suukii]

• [x] 前端安全系列（一）：如何防止XSS攻击？- 美团技术团队

  文章看完了，之后有空再把拓展和文献也看了吧

概念

全称是 Cross-Site Scripting(跨站脚本攻击)，是一种代码注入攻击。攻击者通过在目标网站上注入恶意脚本，使之在用户浏览器中运行，从而获取用户的敏感信息如 Cookie 和 SessionID 等，或者利用这些信息冒充用户向网站发起攻击者定义的请求。

XSS 的本质是：恶意代码未经过滤，和网站正常的代码混在一起，浏览器无法分辨哪些是可信脚本，哪些是恶意脚本，导致恶意脚本被执行。

攻击来源

在处理输入时，以下内容都不信：

• 来自用户的 UGC 信息
• 来自第三方的链接
• URL 参数
• POST 参数
• Referer (可能来自不可信的来源)
• Cookie (可能来自其他子域注入)

XSS 分类

• 存储型：会被保存到数据库
• 反射型：通过 url 参数直接注入
• DOM型：取出和执行恶意代码由浏览器端完成，属于前端 JavaScript 自身的安全漏洞

[suukii]

存储型 XSS

常见于带有用户保存数据的网站功能，比如论坛的发帖功能，商品评论等，用户的输入会被提交到服务器并保存到数据库中，攻击的步骤如下：

• 攻击者通过论坛评论之类的功能将恶意代码提交到目标网站的服务器，恶意代码被保存到数据库中。
• 正常用户访问该网站时，服务器从数据库中取出恶意代码，拼接成 HTML 返回给用户浏览器。
• 用户浏览器接收响应，解析 HTML 并执行了混杂其中的恶意代码。
• 攻击者通过恶意代码获取用户的信息，将其发送到自己的服务器，或者伪装成用户向目标网站发起请求。

[suukii]

反射型 XSS

反射型 XSS 和存储型 XSS 的区别是：

• 存储型 XSS 的恶意代码存在目标网站的数据库中，正常用户只要访问目标网站就会受到攻击；
• 反射型 XSS 的恶意代码存在 URL 中，需要用户主动点击恶意链接才会受到攻击，通常攻击者会结合其他攻击手段比如点击劫持，来诱导用户点击恶意链接。

反射型 XSS 攻击一般是利用 URL 传递参数的功能，比如网站的搜索或者跳转，攻击步骤如下：

• 攻击者向目标网站的网址中注入恶意代码，构成一个特殊的 URL，然后将这个 URL 发送给用户(可能通过邮件或者其他方式)，诱导用户访问这个 URL。
• 用户打开 URL，目标网站的服务器从 URL 中取出恶意代码，拼接成 HTML 返回给用户浏览器。
• 用户浏览器解析响应并执行其中的恶意代码。
• 攻击者通过恶意代码获取用户的信息，将其发送到自己的服务器，或者伪装成用户向目标网站发起请求。

[suukii]

DOM型 XSS

DOM型 XSS 的攻击步骤是：

• 攻击者构建一个特殊的 URL，向其中注入恶意代码。
• 用户打开 URL。
• 客户端接收响应并解析，接着前端的 JavaScript 代码取出 URL 中的恶意代码并执行。
• 攻击者通过恶意代码获取用户的信息，将其发送到自己的服务器，或者伪装成用户向目标网站发起请求。

DOM型 XSS 与前两种 XSS 的不同在于，在 DOM型 XSS 中，取出和执行恶意代码这两个步骤都发生在用户浏览器，属于前端 JavaScript 自身的安全漏洞，而前两种 XSS 则属于服务端的安全漏洞。

[suukii]

防御存储型和反射型 XSS 攻击

这两种攻击都是从在服务端取出恶意代码后，插入到响应的 HTML 中，导致浏览器在解析 HTML 的过程中执行了恶意代码，所以要防御这两种攻击，就要隔绝恶意代码被插入 HTML 的可能，一般有两种常用的防御手段：

1. 改为纯前端渲染，将代码和数据分隔开(适合内部、管理系统之类的网站)
2. 对输出的 HTML 进行充分的转义(适合对性能要求高或者有 SEO 需求的网站)

纯前端渲染的过程

• 浏览器先加载一个静态 HTML，这个 HTML 文档中不包含任何与业务相关的数据(不会有动态生成的数据，恶意代码就没有机会注入页面中)
• 然后浏览器解析静态 HTML，执行其中的 JavaScript (网站的正常代码)
• JavaScript 通过 Ajax 加载业务数据，调用 DOM API 将数据渲染到页面中

转义 HTML

要使用专业的转义库，对 HTML 模板中的各处插入点都进行充分的转义

[suukii]

防御 DOM 型 XSS 攻击

DOM 型 XSS 攻击实际上是前端的 JavaScript 代码本身不够严谨，把不可信的数据当作代码执行了。

• 避免把不可信的数据插入到页面中，所以在使用 .innerHTML，.outerHTML 和 document.write() 的时候要注意，最好尽量使用 .textContent 和 setAttribute() 明确告诉浏览器我们要设置的内容是文本和属性，这样浏览器就不会把轻易地被欺骗，执行隐藏其中的恶意代码了。

• 有一些 API 能够把字符串当作代码来执行，比如 JS 的 eval, setTimeout, setInterval 等，DOM 内联事件 onload, onclick 等，还有 <a> 标签的 href 属性，所以要避免把不可信的数据拼到字符串中传给这些 API

[suukii]

其他 XSS 防范措施

• CSP 内容安全策略：可以控制外部资源的加载和执行
• 控制用户输入内容的长度：虽然不能完全防御攻击，但能增加攻击的难度
• 设置 HTTP-Only Cookie：禁止 JS 读取 Cookie，如此攻击者在成功注入代码后也无法获取用户的 Cookie
• 使用验证码：预防使用脚本冒充用户提交的这种危险操作

[suukii]

避免漏洞产生

• 启模板引擎自带的 HTML 转义功能
• 避免内联事件写法，使用 addEventListener()
• 避免拼接 HTML
• 在插入位置为 DOM 属性、链接等位置时，要打起精神，严加防范
• 通过 CSP、输入长度配置、接口安全措施等方法，增加攻击的难度，降低攻击的后果
• 使用 XSS 攻击字符串和自动扫描工具寻找潜在的漏洞