您现在的位置是：亿华云 > 数据库

10个React安全实践

亿华云2025-10-03 06:55:32【数据库】2人已围观

简介你在找保护 React 应用程序的最佳方法吗？那你找对地方了！我创建了这个 React 安全最佳实践清单，以帮助你和你的团队发现并解决 React 应用中的安全问题。这篇文章将展示如何自动测试你的 R

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

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

让我们开始吧。实践

数据绑定（ Data Binding）默认的安全xss保护危险的URL 渲染html 直接访问dom 服务端渲染检测依赖项中的漏洞 JSON State 检测React易受攻击版本 linter工具危险的库代码

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的易受攻击版本。云南idc服务商