什么是 XSS 攻击？

Cross-Site Scripting(跨站脚本攻击)简称 XSS，是一种代码注入攻击！

XSS 指：恶意代码未经处理，与正常代码混淆在一起，浏览器无法辨别哪些脚本是可靠的，导致恶意脚本被执行。由于恶意脚本在客户端执行（实际上就是获取了客户端内的部分控制权），从而可以直接获取用户信息，或者利用这些信息冒充真实用户向服务器发起攻击。

通常注入的手段有如下方式：

1. 用户 UGC 内容，比如在表单内输出一段恶意脚本，服务器未经校验，直接进行存储，当其他客户端请求该资源时，则会在客户端上执行恶意脚本；

2. URL 参数，攻击者诱骗用户点击一个带有恶意代码的按钮 URL, 通过脚本内容在 URL 参数内，用户点击后，可能将该恶意脚本填充到 HTML 内，从而导致恶意脚本被执行；

3. POST 参数，这类难度较大，通过诱导用户填写相应内容来实现；

4. Cookie，可能来自其他子域的注入；

XSS 类型

根据注入手段的不同，通常将 XSS 攻击分为三类：存储型 XSS、反射型 XSS 以及存储型 XSS，这里不再进行赘述，参考相关文章即可。

事实上，大部分的 XSS 都发生在前后不分离的系统设计内，因为其代码和数据不分离的关系，导致存储型和反射型 XSS 都是在服务端取出恶意代码后，插入到 HTML 里的，攻击者刻意编写的“数据”被内嵌到“代码”中，被浏览器所执行。

React 如何做的？

通过对 XSS 深入了解，我们知道，XSS 攻击过程可以抽象为两步：

1. 攻击者提交恶意脚本；

2. 客户端执行恶意脚本；

通常防御的手段是：

1. 对 UGC 内容进行转义，即服务端不信任任何客户端的数据（这是一个好习惯）；

2. 开启白名单，防止恶意跳转；

3. 对 Cookie 设置 HTTP only，将数据放在服务端维护；

但是，React 这了前后分离（数据和代码分离）的架构实际上已经规避了大部分的 XSS 攻击手段。除此之外，React 实现了一套独立于浏览器的浏览器 DOM 系统，它能够防止通过 HTML 注入恶意代码，比如：

React 会将插入变量转换为字符串，除非你在代码中通过 dangerouslySetInnerHTML 来插入 HTML 元素。

同时，React 在处理样式时，`style` 接受一个采用小驼峰命名属性的 JavaScript 对象，而不是 CSS 字符串。这与 DOM 中 `style` 的 JavaScript 属性是一致的，同时会更高效的，且能预防跨站脚本（XSS）的安全漏洞！

Solo with code!