React 安全簡(jiǎn)介

“一項(xiàng)技術(shù)的使用越廣泛，安全漏洞的可能性就越大?！?nbsp;– 尤金卡巴斯基

React 是一個(gè)著名的庫，用于為 Web 和移動(dòng)應(yīng)用程序構(gòu)建誘人的用戶界面。根據(jù)BuiltWith trends，ReactJS 占據(jù)了 24% 的 JavaScript 庫使用分布列表。它還位居榜首，成為最受歡迎的在線 JavaScript 庫。此外，React.JS 的用例很多，包括 Binance、Bloomberg、Chase、Netflix、Airbnb 和 Uber。

這使得 React 極易出現(xiàn)安全漏洞。其中一些包括跨站點(diǎn)、SQL 注入、損壞的訪問控制、不安全的依賴關(guān)系等。但如您所知，“有志者事竟成”。

作為 Web 或移動(dòng)應(yīng)用程序的所有者，您必須了解所有React 安全漏洞。不僅如此，您還必須了解修復(fù)或避免它們的最佳實(shí)踐是什么。不用擔(dān)心; 只了解技術(shù)細(xì)節(jié)；我們的開發(fā)人員將助您一臂之力，讓您的 React 應(yīng)用程序無風(fēng)險(xiǎn)。

排名前五的 React 安全漏洞

互聯(lián)網(wǎng)上充斥著重大的 ReactJS 安全問題，對(duì)此有預(yù)防措施。但在著手解決方案之前，您必須了解安全挑戰(zhàn)，然后找到解決方案。在下面的討論中，您將了解不同的 React 安全挑戰(zhàn)及其解決方案。

1. XML 外部實(shí)體攻擊

XML 是一種廣泛用于移動(dòng)和網(wǎng)絡(luò)應(yīng)用程序的數(shù)據(jù)格式，用于有組織地交換或存儲(chǔ)數(shù)據(jù)。要使 XML 文檔中的信息可讀和可訪問，您需要 XML 解析器。這些解析器需要定期升級(jí)，不更新使它們?nèi)菀资艿?XML 外部實(shí)體攻擊。

XML 外部實(shí)體攻擊是一種網(wǎng)絡(luò)安全威脅，其中入侵者訪問過時(shí)的 XML 解析器。網(wǎng)絡(luò)攻擊者執(zhí)行易受攻擊的活動(dòng)，例如端口掃描、拒絕服務(wù)請(qǐng)求偽造等。

如何修復(fù) XML 外部實(shí)體攻擊？

如您所知，XML 解析器在破壞數(shù)據(jù)方面起著至關(guān)重要的作用。它需要通過以下方式防止 XXE 攻擊：

• 禁用外部實(shí)體：為了防止 XML 解析器被利用，您必須禁用所有允許向文檔添加外部數(shù)據(jù)的實(shí)體。

• 利用白名單：通過實(shí)施白名單，只有好的實(shí)體才能訪問您的 React 應(yīng)用程序。這種方法比將邪惡實(shí)體列入黑名單要好得多。

• 驗(yàn)證輸入：驗(yàn)證從所有不受信任或未經(jīng)授權(quán)的來源收到的所有反饋。這將消除惡意代碼的可能性。

• 可訪問性限制：允許 XML 解析器訪問與操作相關(guān)的資源。跟蹤訪問情況，不要對(duì)不需要的系統(tǒng)進(jìn)行授權(quán)訪問。

• 僅允許安全的 XML 解析器：使用安全的 XML 解析器來防止 XXE 攻擊并保護(hù)您的 React 應(yīng)用程序。

2.分布式拒絕服務(wù)

分布式拒絕服務(wù)的唯一目的是用大量流量淹沒您的應(yīng)用程序、服務(wù)器或網(wǎng)絡(luò)。發(fā)送許多此類請(qǐng)求的目的是使您的應(yīng)用程序無法用于目標(biāo)/真實(shí)流量。

DDoS 攻擊有不同的類型，例如超文本傳輸協(xié)議 (HTTP)、用戶數(shù)據(jù)報(bào)協(xié)議 (UDP)、同步 (SYN) 和互聯(lián)網(wǎng)控制消息協(xié)議 (ICMP)。所有這些都是為了耗盡您的 CPU 或服務(wù)器，以便提醒無法使用。

如何防止分布式拒絕服務(wù)？

此類 React 安全攻擊使您的系統(tǒng)、網(wǎng)絡(luò)或網(wǎng)站面臨過度、不當(dāng)流量的風(fēng)險(xiǎn)，需要采取嚴(yán)格的預(yù)防措施，具體如下：

• 網(wǎng)絡(luò)分段：將關(guān)鍵資產(chǎn)和服務(wù)與其他網(wǎng)絡(luò)隔離，以限制非正式渠道并防止 DDoS。

• 網(wǎng)絡(luò)流量跟蹤：監(jiān)控流量以檢查來自未知來源的任何異?；虍惓７逯?。及早發(fā)現(xiàn)此類安全漏洞有助于防止 DDoS。

• 帶寬容量加倍：擴(kuò)展帶寬容量以吸收傳入流量。網(wǎng)站和應(yīng)用程序都不會(huì)崩潰，入侵者也沒有機(jī)會(huì)獲得訪問權(quán)限。

• 利用DDoS保護(hù)服務(wù)：通過使用DDoS保護(hù)服務(wù)，您的系統(tǒng)將能夠吸收和整理惡意流量并限制入侵。

• 嚴(yán)格的網(wǎng)絡(luò)基礎(chǔ)設(shè)施：實(shí)施防火墻、入侵檢測(cè)和訪問控制列表是其他檢查措施。

不要讓安全漏洞成為您業(yè)務(wù)的失敗
聯(lián)系最好的React JS 開發(fā)公司，如 Bacancy，以確保您的 React 應(yīng)用程序安全可靠

3.跨站請(qǐng)求偽造

列表中的另一個(gè) React 安全漏洞是跨站點(diǎn)請(qǐng)求偽造；當(dāng)網(wǎng)絡(luò)攻擊者操縱用戶打開網(wǎng)站或網(wǎng)頁并誘使他們?cè)诓恢榔浜戏ㄐ缘那闆r下執(zhí)行任何操作時(shí)，就會(huì)發(fā)生這種操縱性安全漏洞。

當(dāng)用戶的瀏覽器發(fā)送被篡改的 HTTP 請(qǐng)求以執(zhí)行惡意操作時(shí)，就會(huì)發(fā)生這種情況。狀態(tài)更改請(qǐng)求（例如 POST、PUT 和 DELETE 請(qǐng)求）具有高風(fēng)險(xiǎn)，因?yàn)樗鼈儽?GET 請(qǐng)求更容易受到攻擊。

如何防止跨站請(qǐng)求偽造（CSRF）？

由于 CSRF 誘騙用戶在其他網(wǎng)站或網(wǎng)頁上執(zhí)行任何操作，并且他們獲得秘密訪問權(quán)限，因此需要采取一些逐步的措施來防止。針對(duì)該漏洞的 React 安全解決方案如下：

• 使用反 CSRF 令牌：使用服務(wù)器生成的反 CSRF 令牌，這些令牌也被添加到 HTML 鏈接或表單中。每當(dāng)提交表單或打開鏈接時(shí)，服務(wù)器都會(huì)識(shí)別令牌并將其與值匹配，這有助于防止惡意操作。

• 使用 SameSite cookie：使用 SameSite cookie 可防止入侵者獲得訪問權(quán)限，因?yàn)?cookie 是易受攻擊的因素之一。

• 養(yǎng)成檢查 Referrer 標(biāo)頭的習(xí)慣：這是一種通過識(shí)別之前登錄或訪問過的頁面來防止 React 安全漏洞的創(chuàng)新方法，使用它可以很容易地識(shí)別發(fā)起攻擊的位置。

• 限制敏感動(dòng)作：通過GET請(qǐng)求限制動(dòng)作，防止惡意代碼或活動(dòng)的入侵。確保通過 POST 和 DELETE 請(qǐng)求執(zhí)行所有外交步驟；因?yàn)檫@些請(qǐng)求不容易被操縱。

4. 破損的認(rèn)證

當(dāng) React.JS 應(yīng)用程序的身份驗(yàn)證系統(tǒng)設(shè)計(jì)不當(dāng)或系統(tǒng)性不佳且不符合所有安全合規(guī)性時(shí)，攻擊者將很容易登錄到用戶帳戶。

攻擊者通常會(huì)繞過或操縱身份驗(yàn)證系統(tǒng)，像受害者一樣訪問受害者的賬戶。當(dāng)應(yīng)用程序允許使用較弱的密碼或不通知可靠密碼時(shí)，也會(huì)發(fā)生身份驗(yàn)證失敗的情況。它使攻擊者可以輕松訪問應(yīng)用程序或網(wǎng)站，從而竊取所有憑據(jù)信息。

如何修復(fù)損壞的身份驗(yàn)證？

由于認(rèn)證失敗是利用認(rèn)證機(jī)制的漏洞，因此需要通過以下方式修復(fù)：

• 使用基于字母數(shù)字符號(hào)的密碼：確保您構(gòu)建的 React 應(yīng)用程序需要一個(gè)由字母、數(shù)字、符號(hào)以及大小寫組合而成的強(qiáng)密碼進(jìn)行身份驗(yàn)證。

提示：為額外的安全層實(shí)施多因素身份驗(yàn)證

• 實(shí)施會(huì)話管理：確保您的 React 網(wǎng)站或應(yīng)用程序上的所有會(huì)話都得到安全管理、建立和維護(hù)。此外，使用會(huì)話超時(shí)、控制同時(shí)登錄和安全會(huì)話 ID。

• 使用安全認(rèn)證協(xié)議：使用OAuth或OpenID作為安全認(rèn)證協(xié)議，杜絕數(shù)據(jù)被盜的可能性。

提示：不要使用過時(shí)的 Basic 或 Digest 身份驗(yàn)證機(jī)制

• 加密機(jī)密信息：使用傳輸層安全性 (TLS) 對(duì)使用 BitLocker 等加密工具在傳輸過程中加密的數(shù)據(jù)進(jìn)行加密。

• 測(cè)試和監(jiān)控：檢查身份驗(yàn)證機(jī)制的定期測(cè)試和監(jiān)控，以識(shí)別和糾正漏洞。

5. 拉鏈單

另一個(gè) React 安全漏洞是在支持庫的幫助下以不受控制的方式執(zhí)行解壓縮文件時(shí)，存在 Zip Slip 攻擊的風(fēng)險(xiǎn)。這是一個(gè)秘密通道，入侵者可以通過它在解壓縮的文件夾中執(zhí)行他們的惡意代碼。不僅是文件夾，入侵者甚至?xí)ㄟ^接管 React 應(yīng)用程序的控制權(quán)來替換 React 應(yīng)用程序其他目的地的文件夾。

通過 React 中的這個(gè)安全漏洞，入侵者可以訪問您的用戶群和您的業(yè)務(wù)的機(jī)密信息。Zip Slip 是一個(gè)極其危險(xiǎn)的 ReactJS 安全漏洞，因?yàn)樗鼤?huì)使您的 React 應(yīng)用程序暴露于數(shù)據(jù)泄漏和路徑遍歷攻擊。

如何防止拉鏈滑倒？

• 驗(yàn)證文件路徑：使用白名單僅允許受信任的目錄文件路徑，而不是所有用于文件提取的路徑。

• 僅使用更新的庫：在文件提取過程中使用更新和安全的庫，以消除 React 安全威脅的風(fēng)險(xiǎn)。

• 實(shí)施沙箱：使用沙箱將文件提取到單獨(dú)的容器或環(huán)境中，以避免技術(shù)差異。

7 大 React 安全最佳實(shí)踐

無論何時(shí)構(gòu)建 React 應(yīng)用程序，React 的這些最佳安全實(shí)踐都是必須實(shí)施的。如果您計(jì)劃開發(fā)應(yīng)用程序，請(qǐng)檢查這些最佳實(shí)踐。如果您正在尋找 React 開發(fā)人員，可以聯(lián)系我們。

讓我們討論 7 個(gè) ReactJS 安全最佳實(shí)踐。

1. 密切關(guān)注惡意 URL 和基于 URL 的腳本注入
2. 始終清理和呈現(xiàn) HTML
3. 不要直接訪問 DOM
4. 確保服務(wù)器端呈現(xiàn)是安全的
5. 確保使用不易受攻擊的 React 版本
6.使用 linter 配置
7. 不要使用有威脅的庫代碼

1. 密切關(guān)注惡意 URL 和基于 URL 的腳本注入

可能有一些 URL 可能包含通過“JavaScript:”協(xié)議 URL 的動(dòng)態(tài)腳本內(nèi)容。確保使用“http:”或“https:”來對(duì)抗“JavaScript:”基于 URL 的腳本注入。此外，您還必須利用本機(jī) URL 解析功能來驗(yàn)證 URL。發(fā)布后，確保將解析的協(xié)議屬性與允許列表相匹配。

以下是如何做到這一點(diǎn)：

函數(shù) validateURL(url) {
  const parsed = new URL(url)
  返回 ['https:', 'http:'].includes(parsed.protocol)}<a href={validateURL(url) ? url : ''}>點(diǎn)擊這里！</a>

但是，不要這樣做：

<a href={attackerControlled}>點(diǎn)擊這里！</a>

2. 始終清理和渲染 HTML

使用dangerouslySetInnerHTML將 HTML 直接插入呈現(xiàn)的 DOM 節(jié)點(diǎn)。此外，在使用dangerouslySetInnerHTML屬性之前，使用像domypurify這樣的清理庫。

要執(zhí)行此操作，請(qǐng)執(zhí)行以下操作：

從“dompurify”導(dǎo)入凈化；<divangerouslySetInnerHTML={{ __html:purify.sanitize(data) }} />

3.不要直接訪問DOM

切勿嘗試將內(nèi)容直接注入 DOM 節(jié)點(diǎn)，如果除了插入別無選擇，請(qǐng)使用dangerouslySetInnerHTML通過使用domypurify對(duì)其進(jìn)行清理來注入。

現(xiàn)在你一定在想什么是“ dangerouslySetInnerHTML ”。
好吧，它是一個(gè)幫助 React 程序員在 React 應(yīng)用程序可用的 HTML 元素中直接插入 HTML 內(nèi)容的屬性。

您必須執(zhí)行以下操作：

從“dompurify”導(dǎo)入凈化；<divangerouslySetInnerHTML={{__html:purify.sanitize(data) }} />

提示：切勿使用 refs 和 findDomNode() 來訪問呈現(xiàn)的 DOM 元素，以通過 innerHTML 和類似屬性注入內(nèi)容。

確保您或您的開發(fā)人員永遠(yuǎn)不會(huì)這樣做：

this.myRef.current.innerHTML = attackerControlledValue;

4.確保服務(wù)器端渲染是安全的

使用服務(wù)器端函數(shù)，如ReactDOMServer.renderToString()和ReactDOMServer.renderToStaticMarkup()進(jìn)行數(shù)據(jù)綁定；因?yàn)樗峁┳詣?dòng)內(nèi)容轉(zhuǎn)義。

在 React 中使用renderToStaticMarkup()方法時(shí)，必須避免在將字符串發(fā)送到客戶端進(jìn)行水合作用之前將字符串連接到輸出上。

此外，為防止 XSS，請(qǐng)確保您或您的開發(fā)人員不會(huì)將經(jīng)過處理的數(shù)據(jù)與renderToStaticMarkup()的輸出連接起來。

做這個(gè)：

app.get("/", 函數(shù) (req, res) {
  返回res.send(
    ReactDOMServer.renderToStaticMarkup(
      React.createElement("h1", null, "Hello World!")
    ) + 其他數(shù)據(jù)
  );});

5. 確保使用不易受攻擊的 React 版本

如標(biāo)題所述，不要使用易受攻擊的 React 版本。通過利用 npm 檢查最新版本，避免 React 和 react-dom 的易受攻擊版本。

6. 使用 Linter 配置

另一個(gè) ReactJS 安全最佳實(shí)踐是安裝 linter 配置；因?yàn)樗鼤?huì)自動(dòng)檢測(cè)代碼中潛在的 React 安全漏洞并提出整改建議。

確保使用ESLint React Security 配置來識(shí)別 React 代碼中的 React 漏洞。

7. 不要使用有威脅的圖書館代碼

確保您手動(dòng)或使用 linter 配置檢查庫代碼，以防止惡意使用安全機(jī)制。

務(wù)必避免利用 React 庫，避免使用危險(xiǎn)的SetInnerHTML 、innerHTML、未經(jīng)驗(yàn)證的 URL或其他不安全的模式。此外，您可以對(duì)node_modules文件夾使用安全 linters 來主動(dòng)檢測(cè) React 代碼中的惡意模式。

Bacancy 將如何成為您的幫手？

Bacancy 的 React 程序員隨時(shí)了解最新的趨勢(shì)、挑戰(zhàn)和解決方案。我們的開發(fā)人員會(huì)竭盡全力修復(fù)漏洞并檢查所有可能允許入侵者利用它們的漏洞。當(dāng)您想要一個(gè)滿足客戶需求的網(wǎng)站或應(yīng)用程序而不是讓他們面臨故障并最終導(dǎo)致糟糕的體驗(yàn)時(shí)，這種以解決方案為導(dǎo)向的思維方式將大有幫助。

我們的開發(fā)人員針對(duì) React 安全漏洞的最佳實(shí)踐

• 加密數(shù)據(jù)：我們的 React 開發(fā)人員對(duì)所有數(shù)據(jù)和信息進(jìn)行端到端加密，以防止網(wǎng)絡(luò)攻擊、數(shù)據(jù)泄露或數(shù)據(jù)盜竊。

• 多級(jí)身份驗(yàn)證：我們的 React 程序員確保對(duì)所有 React Web 應(yīng)用程序的訪問控制進(jìn)行多級(jí)身份驗(yàn)證，以啟用經(jīng)過驗(yàn)證的訪問。

• 降低攻擊風(fēng)險(xiǎn)：在構(gòu)建 React Web 應(yīng)用程序或網(wǎng)站時(shí)，如果他們發(fā)現(xiàn)任何類型的安全攻擊，他們將立即使用 IP 掩碼、數(shù)據(jù)包清理、流量過濾和應(yīng)用程序延遲來對(duì)抗任何安全問題。

• 遵守 HIPAA 準(zhǔn)則：我們的 React 程序員為您的 React 應(yīng)用程序添加的另一層安全性是遵守 HIPAA 準(zhǔn)則，并使您的 React 網(wǎng)絡(luò)應(yīng)用程序通過 SANS 25 測(cè)試和 OWASP 前 10 名。

• 報(bào)告：應(yīng)用程序在下載或訪問時(shí)具有很高的安全挑戰(zhàn)風(fēng)險(xiǎn)。因此，我們的開發(fā)人員開始跟蹤用戶行為和模式并對(duì)其進(jìn)行評(píng)估以找出任何不匹配的地方。

• 合規(guī)性驗(yàn)證：由于所有數(shù)據(jù)都應(yīng)符合 React 安全規(guī)范，因此檢查數(shù)據(jù)類型、格式和值非常重要。

• 安全檢查：我們的開發(fā)人員密切關(guān)注應(yīng)用程序或網(wǎng)站開發(fā)級(jí)別的安全措施。

結(jié)論

（言鼎科技）