您的富文本可能是跨站點腳本漏洞

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

路克哈里森

本文最初發佈在 IBM Developer 上。

目前許多應用程式需要在其網站上呈現 HTML 格式的富文本。為了根據使用者輸入產生這種格式化文本，開發人員使用富文本編輯器元件。問題？此功能可以間接使您的應用程式和資料面臨稱為儲存跨站點腳本 (SXSS) 的漏洞。

在本文中，您將了解什麼是 SXSS 漏洞，並回顧一些可用於檢查您的應用程式是否受到影響的「程式碼味道」。您還將看到易受攻擊的應用程式的範例，並了解此漏洞的修復策略。

什麼是儲存型跨站腳本？

儲存的跨網站腳本是一種漏洞，攻擊者可以利用它向資料庫注入惡意程式碼。該程式碼在由前端框架取得並呈現後，在受害者的瀏覽器上運行。

此漏洞極為危險，因為它可以使攻擊者竊取 cookie、觸發重定向或在受害者的瀏覽器中執行各種危險腳本。攻擊者只需很少的工作就可以傳播漏洞：受害者不需要點擊惡意連結或陷入網路釣魚計劃，他們只需使用受 SXSS 影響的可信任網站即可。查看頁面底部的鏈接，以了解有關跨站腳本漏洞的更多詳細資訊。

程式碼味道：innerHTML和dangerouslySetInnerHTML

程式碼異味只是程式碼中指示更深層問題的特徵。瀏覽器通常不會自動執行注入的腳本，但如果開發人員使用一些潛在危險的瀏覽器 API 或元素屬性，則可能會導致腳本 do 運行的情況。

看看下面的程式碼片段：

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

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

output.innerHTML = someHTML

在此範例中，我們將一些 HTML 儲存在變數中，從 DOM 中取得元素，並將該元素的 innerHTML 屬性設定為儲存在變數中的內容。 innerHTML 屬性可用於從另一個 HTML 元素內的字串呈現 HTML。

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

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

以下範例出現在 React 文件中：

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

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

output.innerHTML = someHTML

如果您目前在前端 Web 應用程式中使用這些屬性中的任何一個，那麼您很可能存在某種類型的跨站點腳本漏洞。我們將在本文後面介紹如何利用這些屬性以及您可以採取的一些步驟來修復這些問題。

程式碼味道：富文本編輯器

您的應用程式可能容易受到 SXSS 攻擊的另一個跡像是您是否使用富文本編輯器，例如 TinyMCE 或 CKEditor。

大多數富文本編輯器的工作原理是將使用者產生的格式化文字轉換為 HTML。作為一項附加的安全措施，許多編輯器採用某種形式的清理來從其輸入中刪除潛在的惡意 JavaScript。但是，如果您沒有在接收和儲存富文本內容的服務上應用這些相同的清理技術，那麼您的應用程式很可能容易受到 SXSS 的攻擊。

即使您沒有在自己的網站上渲染內容，這些資料也很有可能被執行渲染的應用程式消耗。要設計安全的應用程序，考慮資料當前和未來的消費者非常重要。如果您的資料受到 SXSS 的影響，那麼所有消耗您資料的應用程式也會受到影響。

具有 SXSS 漏洞的範例應用程式

讓我們來看一個帶有 SXSS 漏洞的 Web 應用程式的小範例，然後嘗試利用它。

要執行此應用程序，請先複製此示範應用程式儲存庫並按照 readme.md 檔案中的「執行應用程式」說明進行操作。

運行應用程式並訪問 http://localhost:3000/unsanitized.html 後，您應該會看到如下所示的頁面：

此應用程式只是從使用者取得一些富文本輸入，將其儲存在 Web 伺服器上，然後將其呈現在標記為 Output 的部分中。

在我們利用 SXSS 漏洞之前，請花點時間看一下該應用程式。參考上面提到的程式碼味道，掃描一下程式碼，看看是否能發現有問題的部分。嘗試在瀏覽器中開啟網路選項卡，並查看當您輸入並提交一些富文本時它發送的請求。

在 unsanitzed.html 檔案中，您將看到以下函數，名為 renderPostByID：

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

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

output.innerHTML = someHTML

仔細看這個函數。您會注意到，我們正在使用前面提到的innerHTML 屬性來呈現我們從API 以HTML 形式取得的一些富文本。

現在我們看到了程式碼中易受攻擊的部分，讓我們利用它。我們將繞過富文本編輯器輸入並點擊將貼文直接儲存到 Web 伺服器的 API 端點。為此，您可以使用以下 cURL 命令：

function createMarkup() {

  return {__html: 'First · Second'};

}

function MyComponent() {

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

}

注意我們在請求中發送的資料負載。這是一些惡意製作的 HTML，其中包含一個圖像標記，該圖像標記的 onerror 屬性設定為某些顯示警報對話框的 JavaScript。攻擊者將使用這樣的技巧來避免實施不當的清理方法，這些方法旨在將 HTML 元素儲存到資料庫之前從 HTML 元素中剝離 JavaScript。

運行上面的腳本後，您應該會收到如下所示的帖子 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 查詢參數中，然後按下 Enter.

執行此操作時，您應該會在螢幕上看到一個警報對話框，確認網站確實容易受到 SXSS 的攻擊。

如何預防SXSS

現在我們已經了解如何利用 SXSS 漏洞，讓我們看看如何修復一個漏洞。為此，您需要在三個不同的位置清理基於 HTML 的富文本：

1. 伺服器端，在內容儲存到資料庫之前。
2. 伺服器端，從資料庫檢索內容時。
3. 客戶端，當內容由瀏覽器呈現時。

可能很清楚為什麼要在將內容儲存到資料庫之前以及在客戶端呈現內容時對其進行清理，但為什麼在檢索內容時進行清理呢？好吧，讓我們假設有人獲得了將內容直接插入資料庫所需的權限。他們現在可以直接插入一些惡意製作的 HTML，完全繞過最初的清理程式。如果您的某個 API 的使用者沒有在客戶端實作這種清理，他們可能會成為跨網站腳本攻擊的受害者。

但請記住，在所有三個位置上添加消毒可能會導致效能下降，因此您需要自行決定是否需要這種程度的安全性。至少，您應該在渲染動態 HTML 內容之前清理客戶端上的所有資料。

讓我們看看如何在易受攻擊的應用程式的安全版本中實施清理。由於該應用程式主要使用 JavaScript 編寫，因此我們在客戶端使用 dompurify 函式庫，在伺服器端使用 isomorphic-dompurify 函式庫進行清理。在充當我們的 Web 伺服器的 app.js 程式中，您將找到一個帶有 GET 和 POST 實作的快速端點 /sanitized：

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

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

output.innerHTML = someHTML

在 POST 實作中，我們首先從請求正文中檢索富文本，然後呼叫 isomorphic-dompurify 函式庫的 sanitize 方法，然後將其儲存在資料物件中。類似地，在 GET 實作中，我們在從資料物件檢索富文本後並將其傳送給消費者之前對富文本呼叫相同的方法。

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

function createMarkup() {

  return {__html: 'First · Second'};

}

function MyComponent() {

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

}

現在您已經了解了我們如何正確清理 HTML 以防止跨站點腳本編寫，請返回到此應用程式的原始漏洞並再次運行它，這次使用清理後的端點。您不應再看到彈出的警報對話框，因為我們現在正在使用適當的技術來防止 SXSS 漏洞。

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

摘要與後續步驟

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

安全對企業開發者來說至關重要。使用以下資源繼續增強您對可能的漏洞以及改善安全狀況的方法的認識。

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

以上是您的富文本可能是跨站點腳本漏洞的詳細內容。更多資訊請關注PHP中文網其他相關文章！