XSS 防护策略

什么是 XSS

XSS，是一种代码注入攻击。攻击者通过在目标网站上注入恶意脚本，用户访问网站后不知不觉就执行了脚本，攻击者可获取用户的敏感信息，如 Cookie、SessionID 等。

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

XSS 分类

根据攻击的来源，XSS 攻击可分为存储型、反射型和 DOM 型三种。

类型	存储区	插入点
存储型 XSS	后端数据库	HTML
反射型 XSS	URL	HTML
DOM 型 XSS	后端数据库/前端存储/URL	前端 JavaScript

防止 XSS 攻击

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

存储型和反射型 XSS 都是在服务端取出恶意代码后，插入到响应 HTML 里的；因此预防这两种漏洞，有两种常见做法：

• 对文本内容做充分转义。
• 标签和属性基于白名单过滤：对于富文本编辑器来说，其产物本身就是 html 代码，所以没办法简单粗暴使用转义来处理，应该要对内容中的标签和属性，基于白名单进行过滤。（附 XSS 黑名单：DOM 中的内联事件监听器如onclick等、<a>标签的href属性、<script>标签、css 中的url功能）

预防 DOM 型 XSS 攻击

不要直接把后端传来的数据作为 html 来渲染，比如innerHtml()/outerHtml()/document.write()等方法，又比如 Vue 的v-html；尽量使用textContent/setAttribute()。

CSP

严格的 CSP 在 XSS 的防范中可以起到以下的作用：

• 禁止加载外域代码，防止复杂的攻击逻辑。
• 禁止内联脚本执行。
• 禁止外域提交，网站被攻击后，用户的数据不会泄露到外域。
• 合理使用上报可以及时发现 XSS，利于尽快修复问题。

其他安全措施

• HTTP-only Cookie: 禁止 JavaScript 读取某些敏感 Cookie，攻击者完成 XSS 注入后也无法窃取此 Cookie。
• 验证码：防止脚本冒充用户提交危险操作。

---

附三种 XSS 攻击分类的详细解释

存储型 XSS

存储型 XSS 的攻击步骤：

1. 攻击者将恶意代码提交到目标网站的数据库中。
2. 用户打开目标网站时，网站服务端将恶意代码从数据库取出，拼接在 HTML 中返回给浏览器。
3. 用户浏览器接收到响应后解析执行，混在其中的恶意代码也被执行。

这种攻击常见于公开用户提交数据（UGC 内容）的网站功能，如论坛发帖、商品评论、用户私信等。

反射型 XSS

反射型 XSS 的攻击步骤：

1. 攻击者构造出特殊的 URL，其中包含恶意代码。
2. 用户打开带有恶意代码的 URL 时，网站服务端将恶意代码从 URL 中取出，拼接在 HTML 中返回给浏览器。
3. 用户浏览器接收到响应后解析执行，混在其中的恶意代码也被执行。

反射型 XSS 跟存储型 XSS 的区别是：存储型 XSS 的恶意代码存在数据库里，反射型 XSS 的恶意代码存在 URL 里。

反射型 XSS 漏洞常见于通过 URL 传递参数的功能，如网站搜索、跳转等。由于需要用户主动打开恶意的 URL 才能生效，攻击者往往会结合多种手段诱导用户点击。

DOM 型 XSS

DOM 型 XSS 的攻击步骤：

1. 攻击者构造出特殊的 URL，其中包含恶意代码。
2. 用户打开带有恶意代码的 URL。
3. 用户浏览器接收到响应后解析执行，前端 JavaScript 取出 URL 中的恶意代码并执行。

DOM 型 XSS 跟前两种 XSS 的区别：DOM 型 XSS 攻击中，取出和执行恶意代码由浏览器端完成，属于前端 JavaScript 自身的安全漏洞，而其他两种 XSS 都属于服务端的安全漏洞。