CSP: require-trusted-types-for

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

HTTP の Content-Security-Policy (CSP) における require-trusted-types-for Experimental ディレクティブは、 Element.innerHTML セッターのような DOM XSS シンク関数に渡されるデータを制御するように、ユーザーエージェントに指示します。

使用された場合、これらの関数は Trusted Type ポリシーによって作成された、なりすましできない、型付きの値のみを受け入れ、文字列は拒否します。これは Trusted Type ポリシーの作成を保護する trusted-types ディレクティブと一緒に、DOM への値の書き込みを保護するルールを定義し、ウェブアプリケーションコードベースの小さく孤立した部分に DOM XSS 攻撃表面を削減し、監視とコードレビューを容易にすることができるようにしました。

構文

http
Content-Security-Policy: require-trusted-types-for 'script';
'script'

DOM XSS インジェクションのシンク関数で文字列を使用することを禁止し、Trusted Type ポリシーで作成された種類に一致することを要求します。

js
// Content-Security-Policy: require-trusted-types-for 'script'; trusted-types foo;

const attackerInput = '<svg onload="alert(/cross-site-scripting/)" />';
const el = document.createElement("div");

if (typeof trustedTypes !== "undefined") {
  // Create a policy that can create TrustedHTML values
  // after sanitizing the input strings with DOMPurify library.
  const sanitizer = trustedTypes.createPolicy("foo", {
    createHTML: (input) => DOMPurify.sanitize(input),
  });

  el.innerHTML = sanitizer.createHTML(attackerInput); // Puts the sanitized value into the DOM.
  el.innerHTML = attackerInput; // Rejects a string value; throws a TypeError.
}

仕様書

Specification
Trusted Types
# require-trusted-types-for-csp-directive

ブラウザーの互換性

BCD tables only load in the browser

関連情報