您是否正在寻找保护React应用程序的最佳方法？那么你来对地方了！我创建了这个React安全最佳实践清单来帮助您和您的团队发现并修复React应用程序中的安全问题。这篇文章将展示如何自动测试React代码的安全问题并修复它们。开始吧。数据绑定(DataBinding)defaultxssprotectionDangerousURLrenderinghtmldirectaccesstodomserver-siderenderingDetectionindependenciesJSONStateDetectionreactlintertoolvulnerabilityversionsdangerouslibrarycode1.数据绑定(DataBinding))默认xss保护使用默认的{}进行数据绑定，React会自动对该值进行转义，防止XSS攻击。但请注意，这种保护仅在呈现textContent时有用，在呈现HTML属性时没有用。使用数据绑定语法{}将数据附加到组件。这样做：
{data}
避免没有自定义验证的动态HTML属性值。不要这样做：
...2.危险的URLURL可以通过javascript:协议引入动态脚本。所以你需要验证你的连接是http:还是https:来防止脚本注入javascript:url。使用原生的URL解析方式进行URL校验，判断其协议是否在您的白名单中。这样做：functionvalidateURL(url){constparsed=newURL(url)return['https:','http:'].includes(parsed.protocol)}点击在这里！不要这样做：点击这里！3.渲染htmlReact可以通过dangerouslySetInnerHTML将html代码直接渲染到dom节点中。但是任何以这种方式插入的东西都必须事先消毒。在将任何值放入dangerouslySetInnerHTML属性之前，需要使用dompurify对其进行清理。插入html时，使用dompurify处理importpurifyfrom"dompurify";4.直接访问dom应该避免访问DOM，然后直接向DOM节点注入内容。如果您必须插入HTML，请先使用dompurify对其进行清理，然后使用dangerouslySetInnerHTML属性。这样做：importpurifyfrom"dompurify";不要使用refs和findDomNode()来访问渲染的DOM元素，然后使用类似于innerHTML的方法或属性来注入内容。不要这样做：this.myRef.current.innerHTML=attackerControlledValue；5.服务端渲染当使用ReactDOMServer.renderToString()和ReactDOMServer.renderToStaticMarkup()等方法时，数据绑定会自动提供内容转义的功能。在将字符串发送到客户端浏览器进行水合作用之前，避免将其他一些（未经验证的）字符串连接到renderToStaticMarkup()的输出。不要将未经处理的数据连接到renderToStaticMarkup()的输出以防止XSSapp.get("/",function(req,res){returnres.send(ReactDOMServer.renderToStaticMarkup(React.createElement("h1",null,"HelloWorld!"))+其他数据);});6.检测依赖项中的漏洞某些第三方组件的某些版本可能包含安全问题。检查您的依赖项并及时更新到更好的版本。使用snykCLI[1]等工具进行漏洞检查。snykCLI也可以与代码管理系统集成，然后自动修复漏洞：$npxsnyktest7,JSON状态SSR后用React页面发送JSON数据是常见的做法。请务必使用无害的等价物来转义<字符。用良性等效字符转义JSON中的HTML有效值：window.__PRELOADED_STATE__=${JSON.stringify(preloadedState).replace(/
