你在找保護(hù) React 應(yīng)用程序的最佳方法嗎？那你找對(duì)地方了！
專(zhuān)注于為中小企業(yè)提供成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、成都外貿(mào)網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)五指山免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了1000+企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。
我創(chuàng)建了這個(gè) React 安全最佳實(shí)踐清單，以幫助你和你的團(tuán)隊(duì)發(fā)現(xiàn)并解決 React 應(yīng)用中的安全問(wèn)題。這篇文章將展示如何自動(dòng)測(cè)試你的 React 代碼中的安全問(wèn)題，并修復(fù)它們。
讓我們開(kāi)始吧。
- 數(shù)據(jù)綁定（ Data Binding）默認(rèn)的xss保護(hù)
- 危險(xiǎn)的URL
- 渲染html
- 直接訪(fǎng)問(wèn)dom
- 服務(wù)端渲染
- 檢測(cè)依賴(lài)項(xiàng)中的漏洞
- JSON State
- 檢測(cè)React易受攻擊版本
- linter工具
- 危險(xiǎn)的庫(kù)代碼
1、數(shù)據(jù)綁定（ Data Binding）默認(rèn)的 xss 保護(hù)
使用默認(rèn)的{}進(jìn)行數(shù)據(jù)綁定，React會(huì)自動(dòng)對(duì)值進(jìn)行轉(zhuǎn)義以防止XSS攻擊。但注意這種保護(hù)只在渲染textContent時(shí)候有用，渲染HTML attributes的時(shí)候是沒(méi)用的。
使用數(shù)據(jù)綁定語(yǔ)法{}將數(shù)據(jù)在組件中。
這樣做:
{data}
避免沒(méi)有經(jīng)過(guò)自定義驗(yàn)證的動(dòng)態(tài)HTML attributes值。
別這樣做:
- ...
2、危險(xiǎn)的URL
URL是可以通過(guò)javascript:協(xié)議來(lái)引入動(dòng)態(tài)腳本的。所以需要驗(yàn)證你的連接是否是http:或者h(yuǎn)ttps:以防止javascript:url的腳本注入。使用原生的URL parsing方法進(jìn)行URL驗(yàn)證，判斷其協(xié)議是否在你的白名單中。
這樣做:
- function validateURL(url) {
- const parsed = new URL(url)
- return ['https:', 'http:'].includes(parsed.protocol)
- }
- Click here!
別這樣做:
- Click here!
3、渲染html
React是可以通過(guò)dangerouslySetInnerHTML將html代碼直接渲染到dom節(jié)點(diǎn)中的。但以這種方式插入的任何內(nèi)容都必須事先消毒。
在將任何值放入dangerouslySetInnerHTML屬性之前，需要用dompurify對(duì)其消毒。
在插入html時(shí)用dompurify進(jìn)行處理
- import purify from "dompurify";
4、直接訪(fǎng)問(wèn)dom
應(yīng)該避免訪(fǎng)問(wèn)DOM然后直接將內(nèi)容注入DOM節(jié)點(diǎn)。如果你一定要插入HTML，那就先用dompurify消毒，然后再用dangerouslySetInnerHTML屬性。
這樣做:
- import purify from "dompurify";
不要使用refs 和findDomNode()去訪(fǎng)問(wèn)渲染出來(lái)的DOM元素，然后用類(lèi)似innerHTML的方法或者屬性去注入內(nèi)容。
別這樣做:
- this.myRef.current.innerHTML = attackerControlledValue;
5、服務(wù)端渲染
在使用像ReactDOMServer.renderToString()和ReactDOMServer.renderToStaticMarkup()這類(lèi)方法的時(shí)候，數(shù)據(jù)綁定會(huì)自動(dòng)提供內(nèi)容轉(zhuǎn)義的功能。
避免在將字符串發(fā)送到客戶(hù)端瀏覽器進(jìn)行注水（hydration）之前，把其他的一些（未經(jīng)檢驗(yàn)的）字符串連接到renderToStaticMarkup()的輸出上。
不要把未經(jīng)消毒的數(shù)據(jù)連接到renderToStaticMarkup()的輸出上，以防止XSS
- app.get("/", function (req, res) {
- return res.send(
- ReactDOMServer.renderToStaticMarkup(
- React.createElement("h1", null, "Hello World!")
- ) + otherData
- );
- });
6、檢測(cè)依賴(lài)項(xiàng)中的漏洞
一些第三方組件的某些版本可能包含安全問(wèn)題。檢查您的依賴(lài)關(guān)系，并及時(shí)更新到更好的版本。
使用類(lèi)似snyk CLI[1]的工具進(jìn)行漏洞檢查。
snyk CLI 還可以與代碼管理系統(tǒng)集成，然后自動(dòng)修復(fù)漏洞：
$ npx snyk test
7、JSON state
將JSON數(shù)據(jù)與SSR后的React頁(yè)面一起發(fā)送是常見(jiàn)做法。一定要用無(wú)害的等價(jià)字符轉(zhuǎn)移<字符。
使用良性等效字符轉(zhuǎn)義JSON中的HTML有效值：
- window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState).replace( /
8、易受攻擊的React版本
React庫(kù)在過(guò)去有一些嚴(yán)重性很高的漏洞，因此最好保持最新版本。
使用npm outdated查看是否處于最新版本，從而避免使用react和react dom的易受攻擊版本。
9、linter工具
安裝能自動(dòng)檢測(cè)代碼中的安全問(wèn)題并提供修正建議的Linter配置和插件。
使用 ESLint React security config[2] 來(lái)檢查安全漏洞。
配置能在使用husky這樣的庫(kù)檢測(cè)到安全相關(guān)的問(wèn)題時(shí)，會(huì)失敗的pre-commit鉤子。
使用Snyk自動(dòng)更新版本[3] 當(dāng)其檢查到你當(dāng)前的版本有安全問(wèn)題。
10、危險(xiǎn)的庫(kù)代碼
庫(kù)代碼通常會(huì)進(jìn)行危險(xiǎn)的操作，如直接將HTML插入DOM。人工或使用linter工具來(lái)檢查庫(kù)代碼，以檢測(cè)是否有對(duì)React機(jī)制的不安全使用。
避免那些使用dangerouslySetInnerHTML、innerHTML、未驗(yàn)證的URL或其他不安全模式的庫(kù)。使用linter工具對(duì)node_modules目錄進(jìn)行檢查。
后話(huà)
以上就是我要分享的10個(gè)React安全實(shí)踐。你在 React 安全方面有哪些經(jīng)驗(yàn)，歡迎在評(píng)論中分享出來(lái)。
新聞名稱(chēng)：10個(gè)React安全實(shí)踐
標(biāo)題URL：
http://uogjgqi.cn/article/ccdpooh.html
