10个React安全实践

悠悠 2022-10-30 15:27 216阅读 0赞

你在找保护 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的时候是没用的。

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

这样做:

避免没有经过自定义验证的动态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的易受攻击版本。