在 React 中采用的一系列卓越的安全措施

React.js、Vue.js 这些现代的前端框架默认已经对安全做了非常多的考虑，但是这仍然不能阻碍我们写出一些安全漏洞 。因为框架永远不能完全限制我们编程的灵活性，只要有一定的灵活性存在就意味着有安全风险。

下面我就带大家一起来看一下，为了保证我们 React 应用的安全性，有哪些值得遵循的优秀实践。

dangerouslySetInnerHTML

React​ 会对默认的数据绑定({}​)进行自动转义来防止 XSS​ 攻击，所有数据都会认为是 textContent：

但是为了保障开发的灵活性，它也给我们提供了一些直接渲染 HTML​ 的方法，比如 dangerouslySetInnerHTML：

在把数据传入 dangerouslySetInnerHTML​ 之前，一定要确保数据是经过过滤或转义的，比如可以通过 dompurify.sanitize 进行过滤：

import dompurify from "dompurify";

import "./styles.css";

export default function App() {

const code = "<input onfocus=alert(1) autofocus />";

return (

<div className="App">

<div dangerouslySetInnerHTML={{ __html: dompurify.sanitize(code) }} />

</div>

);

}

这两个操作都是相当危险的操作，推荐大家既然用了 React​ 就要尽量用 React​ 的编写方式来写代码，尽量不要直接操作 DOM​，如果你确实要渲染富文本，还是推荐用上面提到的 dangerouslySetInnerHTML，而且数据要经过过滤或转义。

当使用服务端渲染函数时，数据绑定也会提供自动内容转义，比如 ReactDOMServer.renderToString()​ 和 ReactDOMServer.renderToStaticMarkup()。

在将字符串发送给客户端进行注水之前，避免将字符串直接拼接到 renderToStaticMarkup() 的输出上。

为了避免 XSS​，不要将未过滤的数据与 renderToStaticMarkup() 的输出连接在一起：

app.get("/", function (req, res) {

return res.send(

ReactDOMServer.renderToStaticMarkup(

React.createElement("h1", null, "Hello ConardLi!")

) + otherData

);

});

因此所有需要注入到代码里的 URL​ 参数，我们都要做好 URL 的合法性验证，千万不要直接注入进去：

import "./styles.css";

function isSafe(url) {

if (url && !url.startsWith("http")) {

return null;

}

// ... 其他判断

}

export default function App() {

const code = "javascript:alert('xss')";

return (

<div className="App">

测试 URL 注入

<a href={isSafe(code)}>一个平平无奇的链接</a>

</div>

);

}

一般我们的项目都会依赖大量的开源代码，有时漏洞并不是我们写出来的，而是这些依赖带进来的，因此我们无论使用任何框架，定期进行依赖更新都是不错的选择。

（编辑：银川站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!