10个React安全实践

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

专注于为中小企业提供成都做网站、成都网站设计、成都外贸网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业五指山免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了1000+企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

我创建了这个 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的时候是没用的。

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

这样做:

 
 
 

  
  
  
{data}
 
 
 

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

别这样做:

 
 
 

  
  
  
...
 
 
 

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) 
  
  
  
} 
  
  
  
Click here!
 
 
 

别这样做:

 
 
 

  
  
  
Click here!
 
 
 

3、渲染html

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

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

在插入html时用dompurify进行处理

 
 
 

  
  
  
import purify from "dompurify"; 
  
  
  

 
 
 

4、直接访问dom

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

这样做:

 
 
 

  
  
  
import purify from "dompurify"; 
  
  
  

 
 
 

不要使用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( /
 
 
 

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 安全方面有哪些经验，欢迎在评论中分享出来。

文章标题：10个React安全实践
文章转载：http://www.shufengxianlan.com/qtweb/news26/401126.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联