跨站點(diǎn)腳本(XSS)攻擊是一種將惡意代碼注入網(wǎng)頁(yè)然后執(zhí)行的攻擊。這是前端Web開(kāi)發(fā)人員必須應(yīng)對(duì)的最常見(jiàn)的網(wǎng)絡(luò)攻擊形式之一，因此了解攻擊的工作原理和防范方法非常重要。

在本文中，我們將查看幾個(gè)用React編寫(xiě)的代碼示例，這樣您也可以保護(hù)您的站點(diǎn)和用戶。

[[354855]]

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

對(duì)于我們所有的示例，我們將實(shí)現(xiàn)相同的基本功能。我們將在頁(yè)面上有一個(gè)搜索框，用戶可以在其中輸入文本。點(diǎn)擊“Go”按鈕將模擬運(yùn)行搜索，然后一些確認(rèn)文本將顯示在屏幕上，并向用戶重復(fù)他們搜索的術(shù)語(yǔ)。這是任何允許你搜索的網(wǎng)站的標(biāo)準(zhǔn)行為。

很簡(jiǎn)單，對(duì)吧?會(huì)出什么問(wèn)題呢?

好吧，如果我們?cè)谒阉骺蛑休斎胍恍〩TML怎么辦?讓我們嘗試以下代碼段：

<img src="1" onerror="alert('Gotcha!')" /> 

現(xiàn)在會(huì)發(fā)生什么?

哇，onerror 事件處理程序已執(zhí)行!那不是我們想要的!我們只是不知不覺(jué)地從不受信任的用戶輸入中執(zhí)行了腳本。

然后，破碎的圖像將呈現(xiàn)在頁(yè)面上，那也不是我們想要的。

那么我們是怎么到這里的呢?好吧，在本例中渲染搜索結(jié)果的JSX中，我們使用了以下代碼：

<p style={searchResultsStyle}>You searched for: <b><span dangerouslySetInnerHTML={{ __html: this.state.submittedSearch }} /></b></p> 

用戶輸入被解析和渲染的原因是我們使用了 dangerouslySetInnerHTML 屬性，這是React中的一個(gè)特性，它的工作原理就像原生的 innerHTML 瀏覽器API一樣，由于這個(gè)原因，一般認(rèn)為使用這個(gè)屬性是不安全的。

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

現(xiàn)在，讓我們看一個(gè)成功防御XSS攻擊的示例。這里的修復(fù)方法非常簡(jiǎn)單：為了安全地渲染用戶輸入，我們不應(yīng)該使用 dangerouslySetInnerHTML 屬性。相反，讓我們這樣編寫(xiě)輸出代碼：

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

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

很好!用戶輸入的內(nèi)容在屏幕上只呈現(xiàn)為文字，威脅已被解除。

這是個(gè)好消息!React默認(rèn)情況下會(huì)對(duì)渲染的內(nèi)容進(jìn)行轉(zhuǎn)義處理，將所有的數(shù)據(jù)都視為文本字符串處理，這相當(dāng)于使用原生 textContent 瀏覽器API。

示例3：在React中清理HTML內(nèi)容

所以，這里的建議似乎很簡(jiǎn)單。只要不要在你的React代碼中使用dangerouslySetInnerHTML 你就可以了。但如果你發(fā)現(xiàn)自己需要使用這個(gè)功能呢?

例如，也許您正在從諸如Drupal之類(lèi)的內(nèi)容管理系統(tǒng)(CMS)中提取內(nèi)容，而其中某些內(nèi)容包含標(biāo)記。(順便說(shuō)一句，我可能一開(kāi)始就不建議在文本內(nèi)容和來(lái)自CMS的翻譯中包含標(biāo)記，但對(duì)于本例，我們假設(shè)您的意見(jiàn)被否決了，并且?guī)в袠?biāo)記的內(nèi)容將保留下來(lái)。)

在這種情況下，您確實(shí)想解析HTML并將其呈現(xiàn)在頁(yè)面上。那么，您如何安全地做到這一點(diǎn)?

答案是在渲染HTML之前對(duì)其進(jìn)行清理。與完全轉(zhuǎn)義HTML不同，在渲染之前，您將通過(guò)一個(gè)函數(shù)運(yùn)行內(nèi)容以去除任何潛在的惡意代碼。

您可以使用許多不錯(cuò)的HTML清理庫(kù)。和任何與網(wǎng)絡(luò)安全有關(guān)的東西一樣，最好不要自己寫(xiě)這些東西。有些人比你聰明得多，不管他們是好人還是壞人，他們比你考慮得更多，一定要使用久經(jīng)考驗(yàn)的解決方案。

我最喜歡的清理程序庫(kù)之一稱為sanitize-html，它的功能恰如其名。您從一些不干凈的HTML開(kāi)始，通過(guò)一個(gè)函數(shù)運(yùn)行它，然后得到一些漂亮、干凈、安全的HTML作為輸出。如果您想要比它們的默認(rèn)設(shè)置提供更多的控制，您甚至可以自定義允許的HTML標(biāo)記和屬性。

結(jié)束

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

祝您編程愉快，安全無(wú)虞!

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