React 防止 XSS漏洞 详解

XSS 跨站脚本攻击(Cross Site Scripting) 是Web程序中常见的漏洞，XSS属于被动式且用于客户端的攻击方式，所以容易被忽略其危害性

注 : 为了不和层叠样式表(Cascading Style Sheets, CSS)的缩写混淆，故将跨站脚本攻击缩写为 XSS

XSS 原理是攻击者向有 XSS漏洞的网站中输入(传入)恶意的HTML代码，当其它用户浏览该网站时，这段HTML代码会自动执行，从而达到攻击的目的。如，盗取用户Cookie、破坏页面结构、重定向到其它网站等

XSS漏洞分为两种，一种是DOM Based XSS漏洞，另一种是Stored XSS漏洞。理论上，所有可输入的地方没有对输入数据进行处理的话，都会存在XSS漏洞，漏洞的危害取决于攻击代码的威力，攻击代码也不局限于 script

XSS防御措施就是对任何用户输入的信息进行处理，只允许合法值，其它值一概过滤掉

1> 所有的用户输入都需要经过 HTML实体编码，React 已经做了，它会在运行时动态创建DOM节点然后填入文本内容 (也可以强制设置HTML内容，不过这样比较危险)

2> 序列化某些状态并且传给客户端的时候，也进行 HTML实体编码，可以使用 Yahoo 的 Serialize JavaScript  中的 serialize 方法替换 JSON.stringify方法，Serialize JavaScript 中的方法会自动将 HTML 和 JavaScript 代码进行转码，GitHub 访问地址 :  https://github.com/yahoo/serialize-javascript

默认情况下，React DOM 在重新渲染页面时将所有进行转码，官方宣称在 React 应用中

确保不会注入任何没显式编写的数据，所有的数据在页面渲染之前都会被转换成字符串，这防止 XSS 进攻