當使用者控管的來源 (例如使用者名稱或從網址片段取得的重新導向網址) 中的資料到達接收器時,就會發生以 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;
如要表示資料已安全處理,請建立特殊物件 - 信任類型。
anElement.innerHTML = aTrustedHTML;
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, '<')
});
}
這段程式碼會建立名為 myEscapePolicy
的政策,可使用其 createHTML()
函式產生 TrustedHTML
物件。定義的規則會將 HTML 轉義 <
字元,以免建立新的 HTML 元素。
使用政策的方式如下:
const escaped = escapeHTMLPolicy.createHTML('<img src=x onerror=alert(1)>');
console.log(escaped instanceof TrustedHTML); // true
el.innerHTML = escaped; // '<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 安全漏洞的,只有某個政策中的程式碼。您可以限制政策建立,進一步加強防護。