在 SXSS 漏洞被利用之前識別并緩解它們

盧克·哈里森

本文最初發(fā)布在 IBM Developer 上。

當(dāng)前許多應(yīng)用程序需要在其網(wǎng)站上呈現(xiàn) HTML 格式的富文本。為了根據(jù)用戶輸入生成這種格式化文本，開發(fā)人員使用富文本編輯器組件。問題？此功能可以間接使您的應(yīng)用程序和數(shù)據(jù)面臨稱為存儲跨站點(diǎn)腳本 (SXSS) 的漏洞。

在本文中，您將了解什么是 SXSS 漏洞，并回顧一些可用于檢查您的應(yīng)用程序是否受到影響的“代碼味道”。您還將看到易受攻擊的應(yīng)用程序的示例，并了解此漏洞的修復(fù)策略。

什么是存儲型跨站腳本？

存儲的跨站點(diǎn)腳本是一種漏洞，攻擊者可以利用它向數(shù)據(jù)庫注入惡意代碼。該代碼在由前端框架獲取并呈現(xiàn)后，在受害者的瀏覽器上運(yùn)行。

此漏洞極其危險，因為它可以使攻擊者竊取 cookie、觸發(fā)重定向或在受害者的瀏覽器中運(yùn)行各種危險腳本。攻擊者只需很少的工作就可以傳播漏洞：受害者不需要點(diǎn)擊惡意鏈接或陷入網(wǎng)絡(luò)釣魚計劃，他們只需使用受 SXSS 影響的可信站點(diǎn)即可。查看頁面底部的鏈接，了解有關(guān)跨站腳本漏洞的更多詳細(xì)信息。

代碼味道：innerHTML和dangerouslySetInnerHTML

代碼異味只是代碼中指示更深層次問題的特征。瀏覽器通常不會自動運(yùn)行注入的腳本，但如果開發(fā)人員使用一些潛在危險的瀏覽器 API 或元素屬性，則可能會導(dǎo)致腳本 do 運(yùn)行的情況。

看看下面的代碼片段：

const someHTML = “<h1>Hello world</h1>“

const output = document.getElementById("rich-text-output");

output.innerHTML = someHTML

在此示例中，我們將一些 HTML 存儲在變量中，從 DOM 中獲取元素，并將該元素的 innerHTML 屬性設(shè)置為存儲在變量中的內(nèi)容。 innerHTML 屬性可用于從另一個 HTML 元素內(nèi)的字符串呈現(xiàn) HTML。

此屬性的危險在于它會渲染您傳遞給它的任何 HTML 或 JavaScript。這意味著如果有人能夠控制傳遞到屬性中的數(shù)據(jù)，從技術(shù)上講他們就可以在用戶的??瀏覽器中運(yùn)行任何 JavaScript。

在瀏覽器中渲染動態(tài) HTML 的另一種流行但危險的方法是使用危險的SetInnerHTML React 組件屬性。此屬性的行為方式與普通 JavaScript 和 HTML 中的innerHTML 屬性完全相同。

以下示例出現(xiàn)在 React 文檔中：

const someHTML = “<h1>Hello world</h1>“

const output = document.getElementById("rich-text-output");

output.innerHTML = someHTML

如果您當(dāng)前在前端 Web 應(yīng)用程序中使用這些屬性中的任何一個，那么您很可能存在某種類型的跨站點(diǎn)腳本漏洞。我們將在本文后面介紹如何利用這些屬性以及您可以采取的一些步驟來修復(fù)這些問題。

代碼味道：富文本編輯器

您的應(yīng)用程序可能容易受到 SXSS 攻擊的另一個跡象是您是否使用富文本編輯器，例如 TinyMCE 或 CKEditor。

大多數(shù)富文本編輯器的工作原理是將用戶生成的格式化文本轉(zhuǎn)換為 HTML。作為一項附加的安全措施，許多編輯器采用某種形式的清理來從其輸入中刪除潛在的惡意 JavaScript。但是，如果您沒有在接收和存儲富文本內(nèi)容的服務(wù)上應(yīng)用這些相同的清理技術(shù)，那么您的應(yīng)用程序很可能容易受到 SXSS 的攻擊。

即使您沒有在自己的網(wǎng)站上渲染內(nèi)容，這些數(shù)據(jù)也很有可能被執(zhí)行渲染的應(yīng)用程序消耗。要設(shè)計安全的應(yīng)用程序，考慮數(shù)據(jù)當(dāng)前和未來的消費(fèi)者非常重要。如果您的數(shù)據(jù)受到 SXSS 的影響，那么所有消耗您數(shù)據(jù)的應(yīng)用程序也會受到影響。

具有 SXSS 漏洞的示例應(yīng)用程序

讓我們看一個帶有 SXSS 漏洞的 Web 應(yīng)用程序的小示例，然后嘗試?yán)盟?

要運(yùn)行此應(yīng)用程序，請首先克隆此演示應(yīng)用程序存儲庫并按照 readme.md 文件中的“運(yùn)行應(yīng)用程序”說明進(jìn)行操作。

運(yùn)行應(yīng)用程序并訪問 http://localhost:3000/unsanitized.html 后，您應(yīng)該看到如下所示的頁面：

此應(yīng)用程序只是從用戶處獲取一些富文本輸入，將其存儲在 Web 服務(wù)器上，然后將其呈現(xiàn)在標(biāo)記為 Output 的部分中。

在我們利用 SXSS 漏洞之前，請花點(diǎn)時間看一下該應(yīng)用程序。參考上面提到的代碼味道，掃描一下代碼，看看是否能發(fā)現(xiàn)有問題的部分。嘗試在瀏覽器中打開網(wǎng)絡(luò)選項卡，并查看當(dāng)您輸入并提交一些富文本時它發(fā)送的請求。

在 unsanitzed.html 文件中，您將看到以下函數(shù)，名為 renderPostByID：

const someHTML = “<h1>Hello world</h1>“

const output = document.getElementById("rich-text-output");

output.innerHTML = someHTML

仔細(xì)看這個函數(shù)。您會注意到，我們正在使用前面提到的innerHTML 屬性來呈現(xiàn)我們從API 中以HTML 形式獲取的一些富文本。

現(xiàn)在我們看到了代碼中易受攻擊的部分，讓我們利用它。我們將繞過富文本編輯器輸入并點(diǎn)擊將帖子直接保存到 Web 服務(wù)器的 API 端點(diǎn)。為此，您可以使用以下 cURL 命令：

function createMarkup() {

  return {__html: 'First · Second'};

}

function MyComponent() {

  return <div dangerouslySetInnerHTML={createMarkup()} />;

}

注意我們在請求中發(fā)送的數(shù)據(jù)負(fù)載。這是一些惡意制作的 HTML，其中包含一個圖像標(biāo)記，該圖像標(biāo)記的 onerror 屬性設(shè)置為某些顯示警報對話框的 JavaScript。攻擊者將使用這樣的技巧來避免實施不當(dāng)?shù)那謇矸椒ǎ@些方法旨在在將 HTML 元素存儲到數(shù)據(jù)庫之前從 HTML 元素中剝離 JavaScript。

運(yùn)行上面的腳本后，您應(yīng)該會收到如下所示的帖子 ID：

const renderPostByID = async (id) => {
    // setting url seach params
    let newURL = window.location.protocol + "//" + window.location.host + window.location.pathname + `?post=${id}`;
    window.history.pushState({ path: newURL }, "", newURL);

    // getting rich text by post id
    let response = await fetch(`/unsanitized/${id}`, { method: "GET" });
    let responseJSON = await response.json();
    console.log(responseJSON);

    // rendering rich text
    output.innerHTML = responseJSON.richText;
};

將此帖子 ID 粘貼到帖子 URL 查詢參數(shù)中，然后按 Enter.

執(zhí)行此操作時，您應(yīng)該會在屏幕上看到一個警報對話框，確認(rèn)該網(wǎng)站確實容易受到 SXSS 的攻擊。

如何預(yù)防SXSS

現(xiàn)在我們已經(jīng)了解了如何

利用 SXSS 漏洞，讓我們看看如何修復(fù)一個漏洞。為此，您需要在三個不同的位置清理基于 HTML 的富文本：

服務(wù)器端，在內(nèi)容存儲到數(shù)據(jù)庫之前。
服務(wù)器端，從數(shù)據(jù)庫檢索內(nèi)容時。
客戶端，當(dāng)內(nèi)容由瀏覽器呈現(xiàn)時。

可能很清楚為什么要在將內(nèi)容存儲到數(shù)據(jù)庫之前以及在客戶端呈現(xiàn)內(nèi)容時對其進(jìn)行清理，但為什么在檢索內(nèi)容時進(jìn)行清理呢？好吧，讓我們假設(shè)有人獲得了將內(nèi)容直接插入數(shù)據(jù)庫所需的權(quán)限。他們現(xiàn)在可以直接插入一些惡意制作的 HTML，完全繞過最初的清理程序。如果您的某個 API 的使用者沒有在客戶端實施這種清理，他們可能會成為跨站點(diǎn)腳本攻擊的受害者。

但請記住，向所有三個位置添加消毒可能會導(dǎo)致性能下降，因此您需要自行決定是否需要這種級別的安全性。至少，您應(yīng)該在渲染動態(tài) HTML 內(nèi)容之前清理客戶端上的所有數(shù)據(jù)。

讓我們看看如何在易受攻擊的應(yīng)用程序的安全版本中實施清理。由于該應(yīng)用程序主要使用 JavaScript 編寫，因此我們在客戶端使用 dompurify 庫，在服務(wù)器端使用 isomorphic-dompurify 庫進(jìn)行清理。在充當(dāng)我們的 Web 服務(wù)器的 app.js 程序中，您將找到一個帶有 GET 和 POST 實現(xiàn)的快速端點(diǎn) /sanitized：

const someHTML = “<h1>Hello world</h1>“

const output = document.getElementById("rich-text-output");

output.innerHTML = someHTML

在 POST 實現(xiàn)中，我們首先從請求正文中檢索富文本，然后調(diào)用 isomorphic-dompurify 庫的 sanitize 方法，然后將其存儲在數(shù)據(jù)對象中。類似地，在 GET 實現(xiàn)中，我們在從數(shù)據(jù)對象檢索富文本之后并將其發(fā)送給消費(fèi)者之前對富文本調(diào)用相同的方法。

在客戶端，我們在 sanitized.html 中設(shè)置輸出 div 的innerHTML 屬性之前再次使用相同的方法。

function createMarkup() {

  return {__html: 'First · Second'};

}

function MyComponent() {

  return <div dangerouslySetInnerHTML={createMarkup()} />;

}

現(xiàn)在您已經(jīng)了解了我們?nèi)绾握_清理 HTML 以防止跨站點(diǎn)腳本編寫，請返回到此應(yīng)用程序的原始漏洞并再次運(yùn)行它，這次使用清理后的端點(diǎn)。您不應(yīng)再看到彈出的警報對話框，因為我們現(xiàn)在正在使用適當(dāng)?shù)募夹g(shù)來防止 SXSS 漏洞。

有關(guān)完整的 SXSS 指南，包括防止 XSS 的最佳實踐和其他技術(shù)，請查看 OWASP 跨站腳本備忘單。

摘要和后續(xù)步驟

在本文中，我們了解了如何通過防止存儲的跨站點(diǎn)腳本（一種常見的 Web 應(yīng)用程序漏洞）來提高應(yīng)用程序的安全性。您現(xiàn)在應(yīng)該能夠識別自己的應(yīng)用程序是否容易受到攻擊、您需要檢查哪些功能以及如何在惡意行為者利用這些漏洞之前進(jìn)行緩解。

安全對于企業(yè)開發(fā)者來說至關(guān)重要。使用以下資源繼續(xù)增強(qiáng)您對可能存在的漏洞以及改善安全狀況的方法的認(rèn)識。

• IBM Developer：安全中心
• OWASP 跨站腳本概述
• 視頻：跨站腳本 — 25 年來仍然存在的威脅

以上是您的富文本可能是跨站點(diǎn)腳本漏洞的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！