7. 安全规约

JSX 防注入攻击

你可以放心地在 JSX 当中使用用户输入：

const title = response.potentiallyMaliciousInput;
// 直接使用是安全的：
const element = <h1>{title}</h1>;

React DOM 在渲染之前默认会 过滤 所有传入的值。它可以确保你的应用不会被注入攻击。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSS(跨站脚本) 攻击。

这里React已经帮我们做了很多，它会在运行时动态创建DOM节点然后填入文本内容（你也可以强制设置HTML内容，不过这样比较危险）

dangerouslySetInnerHTML

有时候需要将一段 html 的字符串插入页面中以 html 的形式展现，然而直接插入的话页面显示的就是这段字符串，而不会进行转义。可以用以下方法插入，便可以以 html 的形式展现：

<div dangerouslySetInnerHTML={{__html: "<p>Hello, World</p>"}} />