10 个 React 安全最佳实践

（给前端大全加星标，提升前端技能）

你在找保护 React 应用程序的最佳方法吗？那你找对地方了！

我创建了这个 React 安全最佳实践清单，以帮助你和你的团队发现并解决 React 应用中的安全问题。这篇文章将展示如何自动测试你的 React 代码中的安全问题，并修复它们。

让我们开始吧。

1. 数据绑定（ Data Binding）默认的xss保护
2. 危险的URL
3. 渲染html
4. 直接访问dom
5. 服务端渲染
6. 检测依赖项中的漏洞
7. JSON State
8. 检测React易受攻击版本
9. linter工具
10. 危险的库代码

1、数据绑定（ Data Binding）默认的 xss 保护

使用默认的{}进行数据绑定，React会自动对值进行转义以防止XSS攻击。但注意这种保护只在渲染textContent时候有用，渲染HTML attributes的时候是没用的。

使用数据绑定语法{}将数据在组件中。

这样做:

<div>{data}</div>

避免没有经过自定义验证的动态HTML attributes值。

别这样做:

<form action={data}>...

2、危险的URL

URL是可以通过javascript:协议来引入动态脚本的。所以需要验证你的连接是否是http:或者https:以防止javascript:url的脚本注入。使用原生的URL parsing方法进行URL验证，判断其协议是否在你的白名单中。

这样做:

function validateURL(url) {
  const parsed = new URL(url)
  return ['https:', 'http:'].includes(parsed.protocol)
}

<a href={validateURL(url) ? url : ''}>Click here!</a>

别这样做:

<a href={attackerControlled}>Click here!</a>

3、渲染html

React是可以通过dangerouslySetInnerHTML将html代码直接渲染到dom节点中的。但以这种方式插入的任何内容都必须事先消毒。

在将任何值放入dangerouslySetInnerHTML属性之前，需要用dompurify对其消毒。

在插入html时用dompurify进行处理

import purify from "dompurify";
<div dangerouslySetInnerHTML={{ __html:purify.sanitize(data) }} />

4、直接访问dom

应该避免访问DOM然后直接将内容注入DOM节点。如果你一定要插入HTML，那就先用dompurify消毒，然后再用dangerouslySetInnerHTML属性。

这样做:

import purify from "dompurify";
<div dangerouslySetInnerHTML={{__html:purify.sanitize(data) }} />

不要使用refs 和findDomNode()去访问渲染出来的DOM元素，然后用类似innerHTML的方法或者属性去注入内容。

别这样做:

this.myRef.current.innerHTML = attackerControlledValue;

5、服务端渲染

在使用像ReactDOMServer.renderToString()和ReactDOMServer.renderToStaticMarkup()这类方法的时候，数据绑定会自动提供内容转义的功能。

避免在将字符串发送到客户端浏览器进行注水（hydration）之前，把其他的一些（未经检验的）字符串连接到renderToStaticMarkup()的输出上。

不要把未经消毒的数据连接到renderToStaticMarkup()的输出上，以防止XSS

app.get("/", function (req, res) {
  return res.send(
    ReactDOMServer.renderToStaticMarkup(
      React.createElement("h1", null, "Hello World!")
    ) + otherData
  );
});

6、检测依赖项中的漏洞

一些第三方组件的某些版本可能包含安全问题。检查您的依赖关系，并及时更新到更好的版本。

使用类似snyk CLI^[1]的工具进行漏洞检查。

snyk CLI 还可以与代码管理系统集成，然后自动修复漏洞：

$ npx snyk test

7、JSON state

将JSON数据与SSR后的React页面一起发送是常见做法。一定要用无害的等价字符转移<字符。

使用良性等效字符转义JSON中的HTML有效值：

window.__PRELOADED_STATE__ =   ${JSON.stringify(preloadedState).replace( /</g, '\\u003c')}

8、易受攻击的React版本

React库在过去有一些严重性很高的漏洞，因此最好保持最新版本。

使用npm outdated查看是否处于最新版本，从而避免使用react和react dom的易受攻击版本。

9、linter工具

安装能自动检测代码中的安全问题并提供修正建议的Linter配置和插件。

使用 ESLint React security config^[2] 来检查安全漏洞。

配置能在使用husky这样的库检测到安全相关的问题时，会失败的pre-commit钩子。

使用Snyk自动更新版本^[3] 当其检查到你当前的版本有安全问题。

10、危险的库代码

库代码通常会进行危险的操作，如直接将HTML插入DOM。人工或使用linter工具来检查库代码，以检测是否有对React机制的不安全使用。

避免那些使用dangerouslySetInnerHTML、innerHTML、未验证的URL或其他不安全模式的库。使用linter工具对node_modules目录进行检查。

后话

以上就是我要分享的10个React安全实践。你在 React 安全方面有哪些经验，欢迎在评论中分享出来。

参考资料

[1]

snyk CLI: https://www.npmjs.com/package/snyk

[2]

ESLint React security config: https://github.com/snyk-labs/eslint-config-react-security/

[3]

使用Snyk自动更新版本: https://support.snyk.io/hc/en-us/articles/360011450338-Integrate-with-your-SCM

- EOF -

推荐阅读  点击标题可跳转

觉得本文对你有帮助？请分享给更多人

推荐关注「前端大全」，提升前端技能

点赞和在看就是最大的支持❤️