React的一些优秀的安全实践_0
时间：2023-03-19 10:29:03
科技观察
React.js、Vue.js等现代前端框架默认都做了很多安全方面的考虑，但这依然不妨碍我们编写一些安全漏洞。..因为框架永远不可能完全限制我们编程的灵活性，只要有一定程度的灵活性，就意味着存在安全风险。接下来，我将带大家一起看看有哪些值得遵循的良好实践，以确保我们的React应用程序的安全性。dangerouslySetInnerHTMLReact会自动转义默认的数据绑定（{}）来防止XSS攻击，所有数据都会被认为是textContent:但是为了保证开发的灵活性，它也为我们提供了一些直接渲染HTML的方法，比如dangerouslySetInnerHTML：在将数据传入dangerouslySetInnerHTML之前，确保数据被过滤或转义，例如可以通过dompurify.sanitize过滤：importdompurifyfrom"dompurify";import"./styles.css";export默认函数App(){constcode="";return(
);}避免直接操作DOM和注入HTML除了dangerouslySetInnerHTML，我们还可以当然直接通过原生DOMAPI插入HTML：另外，我们也可以通过ref访问DOM来插入HTML：这两个操作都是相当危险的操作。既然用的是React，那你就应该尽量用React的方式写代码，尽量不要直接操作DOM。如果真的要渲染富文本，建议使用上面提到的dangerouslySetInnerHTML，数据被过滤或者转义。服务器端渲染数据绑定还在使用服务器端渲染函数（例如ReactDOMServer.renderToString()和ReactDOMServer.renderToStaticMarkup()）时提供自动内容转义。避免在将字符串发送到客户端进行注水之前将字符串直接连接到renderToStaticMarkup()的输出。为了避免XSS，不要将未过滤的数据与renderToStaticMarkup()的输出连接起来：null,"HelloConardLi!"))+otherData);});JSON注入将JSON数据与服务器端渲染的React页面一起发送是很常见的。始终对<字符进行转义，避免注入攻击：window.JSON_DATA=${JSON.stringify(jsonData).replace(/TestURLinjects
aplainlink );}避免易受攻击的React版本React已通过相对较高的测试之前有安全漏洞的风险，建议保持频繁更新以避免这些易受攻击的React版本：避免其他易受攻击的依赖项。大多数项目都依赖于很多开源代码，有时候漏洞并不是我们自己写的，而是这些依赖带来的，所以无论我们使用什么框架，定期更新依赖都是一个不错的选择。EslintReact安全配置推荐使用Eslint的React安全配置（https://github.com/snyk-labs/eslint-config-react-security/）来约束代码，它会自动帮我们找到一些代码安全风险。
