React中如何防範XSS攻擊？ （程式碼範例）

【相關教學推薦：React影片教學】

#跨網站腳本（XSS）攻擊是一種將惡意程式碼注入網頁然後執行的攻擊。這是前端 Web 開發人員必須應對的最常見的網路攻擊形式之一，因此了解攻擊的工作原理和防範方法非常重要。

在本文中，我們將查看幾個用 React 編寫的程式碼範例，這樣您也可以保護您的網站和使用者。

範例 1：React 中成功的 XSS 攻擊

#對於我們所有的範例，我們將實現相同的基本功能。我們將在頁面上有一個搜尋框，使用者可以在其中輸入文字。點擊“Go”按鈕將模擬運行搜索，然後一些確認文字將顯示在螢幕上，並向使用者重複他們搜索的術語。這是任何允許你搜尋的網站的標準行為。

很簡單，對吧？會出什麼問題呢？

好吧，如果我們在搜尋框中輸入一些 HTML 怎麼辦？讓我們嘗試以下程式碼片段：

<img  src="/static/imghw/default1.png" data-src="1" class="lazy" alt="React中如何防範XSS攻擊？ （程式碼範例）" >

現在會發生什麼？

#哇，onerror 事件處理程序已執行！那不是我們想要的！我們只是不知不覺地從不受信任的使用者輸入中執行了腳本。

然後，破碎的圖​​像將呈現在頁面上，那也不是我們想要的。

那我們是怎麼到這裡的呢？好吧，在本例中渲染搜尋結果的JSX 中，我們使用了以下程式碼：

<p>
  You searched for:
  <b><span></span></b>
</p>

使用者輸入被解析和渲染的原因是我們使用了dangerouslySetInnerHTML 屬性，這是React 中的一個特性，它的運作方式就像原生的innerHTML 瀏覽器API 一樣，由於這個原因，一般認為使用這個屬性是不安全的。

範例 2：React 中的 XSS 攻擊失敗

#現在，讓我們來看一個成功防禦 XSS 攻擊的範例。這裡的修復方法非常簡單：為了安全地渲染使用者輸入，我們不應該使用 dangerouslySetInnerHTML 屬性。相反，讓我們這樣寫輸出程式碼：

<p>
  You searched for: <b>{this.state.submittedSearch}</b>
</p>

我們將輸入相同的輸入，但這一次，這裡是輸出：

##很好！使用者輸入的內容在螢幕上只呈現為文字，威脅已解除。

這是個好消息！ React 預設會對渲染的內容進行轉義處理，將所有的資料視為文字字串處理，這相當於使用原生

textContent 瀏覽器 API。

範例 3：在 React 中清理 HTML 內容

所以，這裡的建議似乎很簡單。只要不要在你的 React 程式碼中使用

dangerouslySetInnerHTML你就可以了。但如果你發現自己需要使用這個功能呢？

例如，也許您正在從諸如 Drupal 之類的內容管理系統（CMS）中提取內容，而其中某些內容包含標記。 （順便說一句，我可能一開始就不建議在文本內容和來自CMS 的翻譯中包含標記，但對於本例，我們假設您的意見被否決了，並且帶有標記的內容將保留下來。）

在這種情況下，您確實想要解析HTML 並將其呈現在頁面上。那麼，您如何安全地做到這一點？

答案是在渲染 HTML 之前對其進行清理。與完全轉義 HTML 不同，在渲染之前，您將透過一個函數運行內容以去除任何潛在的惡意程式碼。

您可以使用許多不錯的 HTML 清理程式庫。就像任何與網路安全有關的東西一樣，最好不要自己寫這些東西。有些人比你聰明得多，不管他們是好人還是壞人，他們比你考慮得更多，一定要使用久經考驗的解決方案。

我最喜歡的清理程式庫之一稱為sanitize-html（https://www.npmjs.com/package/sanitize-html），它的功能恰如其名。您從一些不乾淨的 HTML 開始，透過一個函數來執行它，然後得到一些漂亮、乾淨、安全的 HTML 作為輸出。如果您想要比它們的預設設定提供更多的控制，您甚至可以自訂允許的 HTML 標記和屬性。

結束

就是這樣了。如何執行 XSS 攻擊，如何防止它們，以及如何在必要時安全地解析 HTML 內容。

祝您程式愉快，安全無虞！

完整的程式碼範例可在GitHub 上找到：https://github.com/thawkin3/xss-demo

原文網址：https://blog. zhangbing.site/2019/11/24/protecting-against-xss-attacks-in-react/

##更多程式相關知識，請造訪：

程式學習！ ！

以上是React中如何防範XSS攻擊？ （程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！