你在找保护 React 应用程序的最佳方法吗?那你找对地方了!
我创建了这个 React 安全最佳实践清单,以帮助你和你的团队发现并解决 React 应用中的安全问题。这篇文章将展示如何自动测试你的 React 代码中的安全问题,并修复它们。
让我们开始吧。
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 安全方面有哪些经验,欢迎在评论中分享出来。
全球新一轮科技革命和产业变革深入推进,知识产权作为创新的基本手段与原动力、...
毫无疑问,Python 是一门强类型语言。强类型语言。强类型语言! 这就意味着,不...
DataTypes.FIELD("f0", DataTypes.BIGINT()), DataTypes.FIELD("f1", DataTypes....
实验室师兄 陈布曾介绍过有关于wujian100 SoC的相关工作 基于Wujian100的KWS SoC...
商标转让后商标证是否也更改?商标转让后,其实在网上 查询商标 信息,该商标归...
描述 有一排 26 个彩灯,编号从 0 到 25,现在给出了一系列控制指令来控制这些彩...
云耀云服务器 HECS 云耀云服务器(Hyper Elastic Cloud Server,HECS)是可以快...
境外服务器就是把服务器租用或者托管在国外的区域,境外服务器我们熟知的有美国...
本文转载自微信公众号「菜鸟阿都」,作者菜鸟阿都。转载本文请联系菜鸟阿都公众...
用什么 邮箱 群发邮件好?日常工作中,我们难免会遇到需要群发邮件的情况。 TOP...