本頁面由 Cloud Translation API 翻譯而成。

運用 Trusted Types 防範 DOM 型跨網站指令碼攻擊安全漏洞

Krzysztof Kotowicz

瀏覽器支援

當使用者控管的來源 (例如使用者名稱或從網址片段取得的重新導向網址) 中的資料到達接收器時，就會發生以 DOM 為基礎的跨網站指令碼攻擊 (DOM XSS)。接收器是 eval() 這類函式，或 .innerHTML 這類屬性設定器，可執行任意 JavaScript 程式碼。

DOM XSS 是最常見的網頁安全漏洞之一，開發團隊經常會在應用程式中不小心引入這類漏洞。信任類型可提供工具，讓您以預設方式讓危險的網路 API 函式保持安全，進而編寫、安全性審查應用程式，並確保應用程式不受 DOM XSS 漏洞影響。信任類型可做為polyfill，用於尚未支援信任類型的瀏覽器。

背景

多年以來，DOM XSS 一直是網路安全最常見且最危險的漏洞之一。

跨網站指令碼攻擊分為兩種，某些 XSS 安全漏洞是由伺服器端程式碼造成，這些程式碼會不安全地建立組成網站的 HTML 程式碼。其他問題的根本原因在於用戶端，JavaScript 程式碼會呼叫使用者控制內容的危險函式。

如要防止伺服器端 XSS，請勿透過連結字串產生 HTML。請改用安全的內容自動轉義範本庫，並搭配以 Nonce 為基礎的內容安全性政策，進一步減少錯誤。

如今，瀏覽器也可以使用信任類型，協助防範以用戶端 DOM 為基礎的 XSS。

API 簡介

信任類型會鎖定下列有風險的接收函式，您可能已經認識其中一些功能，因為瀏覽器供應商和網頁架構已基於安全考量，建議您不要使用這些功能。

指令碼操作：
<script src> 以及設定 <script> 元素的文字內容。
從字串產生 HTML：
執行外掛程式內容：
執行階段 JavaScript 程式碼編譯：
- eval
- setTimeout
- setInterval
- new Function()

信任類型要求您先處理資料，再將資料傳遞至這些接收函式。由於瀏覽器不知道資料是否可信，因此僅使用字串會失敗：

錯誤做法

anElement.innerHTML  = location.href;

啟用 Trusted Types 後，瀏覽器會擲回 TypeError，並防止使用字串的 DOM XSS 接收器。

如要表示資料已安全處理，請建立特殊物件 - 信任類型。

正確做法

anElement.innerHTML = aTrustedHTML;

啟用信任類型後，瀏覽器會接受 TrustedHTML 物件，以便處理預期 HTML 程式碼片段的接收端。其他敏感的接收端也有 TrustedScript 和 TrustedScriptURL 物件。

Trusted Types 可大幅降低應用程式的 DOM XSS 攻擊面。這項功能可簡化安全性審查程序，並讓您在瀏覽器中執行程式碼編譯、檢查或在執行階段將程式碼打包時，強制執行類型安全性檢查。

如何使用信任類型

準備處理內容安全政策違規報告

您可以部署報表收集器，例如開源的 reporting-api-processor 或 go-csp-collector，或是使用其中一個商業等價產品。您也可以使用 ReportingObserver，在瀏覽器中新增自訂記錄和偵錯違規：

const observer = new ReportingObserver((reports, observer) => {
    for (const report of reports) {
        if (report.type !== 'csp-violation' ||
            report.body.effectiveDirective !== 'require-trusted-types-for') {
            continue;
        }

        const violation = report.body;
        console.log('Trusted Types Violation:', violation);

        // ... (rest of your logging and reporting logic)
    }
}, { buffered: true });

observer.observe();

或新增事件監聽器：

document.addEventListener('securitypolicyviolation',
    console.error.bind(console));

新增僅供回報的 CSP 標頭

將下列 HTTP 回應標頭新增至要遷移至信任類型的文件：

Content-Security-Policy-Report-Only: require-trusted-types-for 'script'; report-uri //my-csp-endpoint.example

所有違規事項都會回報給 //my-csp-endpoint.example，但網站仍可正常運作。下一節將說明 //my-csp-endpoint.example 的運作方式。

找出 Trusted Types 違規問題

從現在起，每當 Trusted Types 偵測到違規情形，瀏覽器就會將報告傳送至已設定的 report-uri。舉例來說，當應用程式將字串傳遞至 innerHTML 時，瀏覽器會傳送下列報表：

{
"csp-report": {
    "document-uri": "https://my.url.example",
    "violated-directive": "require-trusted-types-for",
    "disposition": "report",
    "blocked-uri": "trusted-types-sink",
    "line-number": 39,
    "column-number": 12,
    "source-file": "https://my.url.example/script.js",
    "status-code": 0,
    "script-sample": "Element innerHTML <img src=x"
}
}

這表示在第 39 行的 https://my.url.example/script.js 中，innerHTML 是使用開頭為 <img src=x 的字串呼叫。這項資訊可協助您縮小範圍，找出哪些程式碼可能會引入 DOM XSS，並需要進行變更。

修正違規事項

您可以透過幾種方式修正 Trusted Type 違規問題。您可以移除有問題的程式碼、使用程式庫、建立信任類型政策，或是最後一招建立預設政策。

重寫有問題的程式碼

您可能不再需要不符規格的程式碼，或是可以不使用導致違規的函式重新編寫程式碼：

正確做法

el.textContent = '';
const img = document.createElement('img');
img.src = 'xyz.jpg';
el.appendChild(img);

錯誤做法

el.innerHTML = '<img src=xyz.jpg>';

使用程式庫

部分程式庫已產生可傳遞至接收器函式的信任類型。舉例來說，您可以使用 DOMPurify 消毒 HTML 程式碼片段，移除 XSS 酬載。

import DOMPurify from 'dompurify';
el.innerHTML = DOMPurify.sanitize(html, {RETURN_TRUSTED_TYPE: true});

DOMPurify 支援信任類型，並傳回經過消毒的 HTML，並在 TrustedHTML 物件中包裝，以免瀏覽器產生違規情形。

建立「信任類型」政策

有時您無法移除造成違規的程式碼，而且沒有任何程式庫可用來清理值，並為您建立信任類型。在這種情況下，您可以自行建立信任類型物件。

首先建立政策。政策是 Trusted Types 的製造商，可針對輸入內容強制執行特定安全性規則：

if (window.trustedTypes && trustedTypes.createPolicy) { // Feature testing
  const escapeHTMLPolicy = trustedTypes.createPolicy('myEscapePolicy', {
    createHTML: string => string.replace(/\</g, '&lt;')
  });
}

這段程式碼會建立名為 myEscapePolicy 的政策，可使用其 createHTML() 函式產生 TrustedHTML 物件。定義的規則會將 HTML 轉義 < 字元，以免建立新的 HTML 元素。

使用政策的方式如下：

const escaped = escapeHTMLPolicy.createHTML('<img src=x onerror=alert(1)>');
console.log(escaped instanceof TrustedHTML);  // true
el.innerHTML = escaped;  // '&lt;img src=x onerror=alert(1)>'

使用預設政策

有時您無法變更有問題的程式碼，例如從 CDN 載入第三方程式庫。在這種情況下，請使用預設政策：

if (window.trustedTypes && trustedTypes.createPolicy) { // Feature testing
  trustedTypes.createPolicy('default', {
    createHTML: (string, sink) => DOMPurify.sanitize(string, {RETURN_TRUSTED_TYPE: true})
  });
}

在只接受信任類型的接收器中使用字串時，系統會使用名為 default 的政策。

切換為強制執行內容安全政策

當應用程式不再產生違規情形時，您就可以開始強制執行信任類型：

Content-Security-Policy: require-trusted-types-for 'script'; report-uri //my-csp-endpoint.example

無論您的網頁應用程式有多複雜，唯一可能引入 DOM XSS 安全漏洞的，只有某個政策中的程式碼。您可以限制政策建立，進一步加強防護。