残缺浏览本文大概须要 5 分钟。

开启本文前，先提出两个我在面试时被问到的题：

1. 为了预防 XSS 攻打，咱们会对用户的输出内容进行过滤，本义的机会应该是 a. 输出时前端解决 b. 落库时后端解决 c. 拼接 HTML 时？
2. XSS 攻打的预防，须要前端还是后端去做？

什么是 XSS 攻打

XSS 攻打是 Cross-Site Scripting 的缩写，直白来说，就是页面被注入了歹意的代码——用户输出的内容跳出文本的限度，成了可执行的代码。

XSS 攻打的分类

依据入侵代码的起源，通常将 XSS 攻打分成三类：

存储型 XSS 攻打

特点：恶意代码曾经落库，被拼接到 HTML 中返回。

1. 攻击者通过论坛评论区提交恶意代码到数据库；
2. 其余用户关上论坛，服务端把恶意代码取出来，拼接在 HTML 中返回；
3. 恶意代码在用户的浏览器端运行；

除了论坛，这类攻打还常见于用户私信发送。

比方用户提交评论 <script>alert('XSS');</script> 到网站的数据库中。

<div>
  评论内容：<%= getContent("comment") %>
</div>

被后端拼接后：

<div>
  评论内容：<script>alert('XSS');</script>
</div>

其余用户拜访到这个页面，会跳出写着”XSS”的对话框

反射型 XSS 攻打

特点：恶意代码被拼接到 URL 上，被拼接到 HTML 中返回。

1. 攻击者拼接出蕴含恶意代码的受益网站 URL，诱导用户点击；
2. 用户点击该 URL，指标网站的服务器取出恶意代码，拼接到 HTML 返回；
3. 恶意代码在其余用户的浏览器端运行；

这类攻打须要用户被动点击受益网站的 URL，攻击者会通过通过 QQ 群或者邮件等形式诱导点击。

比方一个歹意 URL 能够长这样：http://xxx/search?keyword="<script>alert('XSS');</script>

<div>
  你好 <%= getParameter("keyword") %>
</div>

被后端拼接后：

<div>
  你好 <script>alert('XSS');</script>
</div>

点击后，页面会跳出写着”XSS”的对话框。

DOM 型 XSS 攻打

特点：恶意代码被拼接到 URL 上，被前端 JavaScript 代码执行。

1. 攻击者拼接出蕴含恶意代码的受益网站 URL，诱导用户点击；
2. 用户点击该 URL；
3. 前端 JavaScript 取出 URL 中的恶意代码，恶意代码在用户的浏览器端运行；

DOM 型和反射型的区别在于，DOM 型 XSS 攻打中，取出和执行恶意代码由浏览器端实现，属于前端 JavaScript 本身的安全漏洞。而其余两种 XSS 都属于服务端的安全漏洞。

上述三种 XSS 攻打的目标都统一：恶意代码在浏览器端运行后，窃取用户的本地存储数据：通过 document.cookie 获取用户的身份凭证，而后通过网络申请将数据发送给歹意服务器。

接下来就能够进行下一步：假冒用户去对受益网站发动申请实现指定操作，比方转账给攻击者的账户。

怎么预防 XSS 攻打

XSS 攻打的实现须要有两个必要条件：

1. 攻击者输出恶意代码；
2. 浏览器执行恶意代码；

先看第一点，是否能够防止攻击者输出恶意代码，先进行 HTML 本义呢？

如果咱们在前端对输出的内容进行本义过滤，那么攻击者只有模仿发动申请，便绕了过前端，一样能够攻打胜利。

如果落库时在后端进行本义过滤，咱们会发现：

1. 如果内容要提供给多端，只会在前端失常展现，在 iOS/ 安卓上会变成乱码;

2. 返回给前端的形式不一样，也不肯定能失常展现，比方，失常的用户输出了 5 < 7 这个内容，在写入数据库前，被本义，变成了 5 < 7;

   1. 作为 HTML 拼接页面时，能够失常显示;
   2. 通过 Ajax 返回，而后赋值给 JavaScript 的变量时，前端失去的字符串就是本义后的字符。这个内容不能间接用于 Vue 等模板的展现，会和 iOS/ 安卓一样，变成乱码 5 < 7。

所以咱们须要通过“避免浏览器执行恶意代码”来防备 XSS 攻打。

纯前端渲染

纯前端渲染是指，浏览器首先加载一个空白的 HTML，而后执行该 HTML 引入的 JS 文件，JS 通过 AJAX 获取业务数据，调用 DOM API，更新到页面上。

因为是在前端，咱们能够分明地通知浏览器：这是文本 .innerText 而不是 HTML.innerHTML。这样浏览器就不会执行预期意外的代码。

纯前端渲染能够防止存储型和反射型的攻打，但没法防止 DOM 型，攻击者能够通过 onload 事件、href 中嵌入 javascript:... 进行攻打。

本义 HTML

对于须要思考 SEO 的 SSR 我的项目，不得不在服务端拼接 HTML 文件。那么必须应用 HTML 本义库，根本规定是将 & < > " ' / 几个字符本义掉。

关注高危 API

在前端渲染时，要审慎应用 .innerHTML、.outerHTML、document.write() 等直接插入 HTML 的 API，其起源必须是可信的。

此外location、onclick、onerror、onload、onmouseover、还有 <a> 标签的 href 都能够把字符串当作代码执行。

其余通用策略

1. 应用 CSP：CSP 即 Content Security Policy 内容安全策略，限度加载其余域下的资源，这样即便黑客插入了一个 Javascript 文件，它也是无奈被加载的；
2. 开启 HTTP only：禁止 JavaScript 读取某些敏感 Cookie，攻击者实现 XSS 注入后也无奈窃取此 Cookie；
3. 验证码：避免脚本假冒用户提交危险操作；

结语

读完本文，回到结尾两个问题，咱们晓得了：

1. 对用户输出内容本义，其机会必须在拼接 HTML 时，如果在落库前解决，会导致 iOS/ 安卓乱码；
2. XSS 攻打的预防，须要 RD 一起实现，存储型和反射型攻打是后端的责任，DOM 型是前端的责任；