セキュリティ
上級

W3C Trusted Types（ダブリュースリーシートラステッドタイプス）

2024年W3C公開のDOM-based XSS Prevention API。TrustedHTML/TrustedScript/TrustedScriptURL+innerHTML自動検証+Content Security Policy統合+Chrome 83+/Firefox 132+対応搭載。

0 回閲覧
0 いいね
2026/5/5 更新
関連タグ
Trusted Types
DOM XSS
Web Security
W3C
Content Security Policy

概要

W3C Trusted Typesは2024年にFirefox 132+で対応開始しブラウザ間互換性が進んだW3C仕様の新Web Security APIで、DOM-based XSS(JavaScript経由のHTML/Script/URL注入攻撃)を構造的に防止する仕組み。従来DOMPurify等のSanitizerライブラリでHTMLを浄化していた処理を、ブラウザネイティブ機能として標準化したアプローチ。element.innerHTML = userInput のような直接代入を禁止し、TrustedHTML型のオブジェクトのみ受け付けることで、開発者の不注意によるXSS脆弱性を構造的に排除する。Content Security Policy(CSP)のrequire-trusted-types-for 'script' ディレクティブと組合せると、HTMLや属性値の代入時に自動でPolicy通過チェックが走り、Policy外のシリアライズはエラーになる。Chrome 83+(2020年5月)・Edge 83+で先行実装、Firefox 132+(2024年10月)・Safari TPで実装進行中。Google・Microsoft・Shopify等のセキュリティ重視Web Serviceでは本格採用、業界標準のDOM XSS防御戦略として定着。

主な特徴・仕組み

  • TrustedHTML: HTML文字列のラッパー型、innerHTML等で受け付けるのみ
  • TrustedScript: JavaScriptコードのラッパー型、eval()等で受け付ける
  • TrustedScriptURL: スクリプトURL(<script src>)のラッパー型
  • trustedTypes.createPolicy(): 浄化処理をPolicyオブジェクトとして登録
  • Policy内Sanitization: DOMPurifyやサニタイザを Policy 内で実行
  • CSP統合: Content-Security-Policy: require-trusted-types-for 'script'
  • 'allow-duplicates' Policy: 同名Policy重複定義可能、micro-frontend対応
  • 'default' Policy: フォールバック用Default Policy、グローバル適用
  • Report-Only モード: Content-Security-Policy-Report-Only で違反検出のみ
  • TypeScript型: @types/trusted-types で型サポート、コンパイル時検証
  • Browser Support: Chrome 83+ Edge 83+ Firefox 132+(2024-10) Safari TP実装中

スペック比較表

項目W3C Trusted TypesDOMPurifysanitize-htmlBuilt-in escape
実装Browser NativeJavaScriptJavaScriptManual
Bundle Size0KB~20KB~30KB0KB
CSP統合○ require-trusted-types-for△△×
Strong Type○ TrustedHTML/Script×××
自動enforcement○ Browser-level× Manual× Manual×
Browser SupportChrome 83+ Firefox 132+全ブラウザ全ブラウザ全ブラウザ
TypeScript型○ @types/trusted-types○ DOMPurify types○ types△
Policy管理Native APILibrary APILibrary APIManual

具体例・対応製品

// Policy作成
const sanitizer = trustedTypes.createPolicy('default', {
  createHTML: (input) => DOMPurify.sanitize(input),
  createScript: (input) => { throw new Error('Scripts not allowed'); },
  createScriptURL: (input) => {
    if (input.startsWith('https://trusted-cdn.example.com/')) {
      return input;
    }
    throw new Error('Invalid script URL');
  }
});

// 浄化されたHTML設定
const userInput = '<img src=x onerror=alert(1)>';
const safeHTML = sanitizer.createHTML(userInput);
element.innerHTML = safeHTML;  // ✓ 通る

// ポリシーバイパスは不可
element.innerHTML = userInput;  // ✗ TypeError(CSP有効時)

Content-Security-Policy: require-trusted-types-for 'script'; trusted-types default;
  • Chrome 83+/Edge 83+: 2020年5月対応、フル機能利用可能
  • Firefox 132+: 2024年10月リリース、Cross-browser対応進む
  • Google Workspace: Gmail/Docs/Sheets全面採用、業界トップ事例
  • Microsoft 365: SharePoint/OneDriveで本格運用
  • Shopify: Storefront API向けに採用、CSP統合でDOM XSS防御
  • 競合機種: DOMPurify(JavaScript)、sanitize-html、Manual escape、Sanitizer API(W3C別仕様)

自作PCでの選び方・注意点

W3C Trusted TypesはWeb開発者向けのセキュリティ仕様で、jisaku.comのWeb Frontend(Next.js 16+TypeScript)では将来採用すべき重要技術。導入によるメリットは「DOM-based XSS脆弱性の構造的排除」で、開発者がうっかりelement.innerHTML = userInput 直接代入してもブラウザが自動でブロックする。jisaku.com で User-Generated Content(レビュー・コメント・投稿等)を扱う領域では特に有効。導入手順は、1) Policy作成(DOMPurifyラッパー)、2) Report-Only モードで違反監視2-4週間、3) 既存違反コードを修正(Policy経由でHTML設定)、4) require-trusted-types-for 'script' で本適用。React 18+/Next.js 14+はTrusted Typesを認識し、dangerouslySetInnerHTMLの値もPolicy経由で処理可能。Vue 3はカスタムv-html Directive経由で対応。一方、Sass等のCSS-in-JS・Markdown Renderer・3rd-party Widget(Disqus等)はPolicy外動作で違反多数発生する可能性、Allowed Listでスクリプト個別許可が現実的。Firefox 132+対応で実用化のハードルが下がり、2025-2026年がProduction採用拡大の好機。

関連用語との違い

DOMPurifyとの違い: DOMPurifyはJavaScript実装でCSPなしで動作可能、Trusted Typesはブラウザネイティブ+CSP統合で構造的enforcement。DOMPurifyの開発者が手動で全innerHTML を浄化する必要、Trusted Typesは Policy未登録の場合エラーで強制防御。 Sanitizer API(W3C別仕様)との違い: Sanitizer APIはelement.setHTML(sanitizer)等のPolicyless Sanitization、Trusted TypesはCSP統合のType-safe Approach。両者は補完関係で、Sanitizerでデフォルト浄化、Trusted TypesでPolicy enforcement。

よくある質問（FAQ）

Q1: 既存サイトに導入する手順は？ A: 1) trustedTypes.createPolicy('default', ...)でDefault Policy作成、2) Report-Only モード(Content-Security-Policy-Report-Only: require-trusted-types-for 'script')で2-4週間違反監視、3) 違反コードを Policy経由に修正、4) 本適用 Content-Security-Policy: で。React/Vue/Angular全Framework対応。

Q2: 違反コードを全部修正する負担は？ A: 大規模プロジェクト(数十万行コード)で1-3週間。修正対象はinnerHTML/outerHTML/document.write/setAttribute('src','data:...')等の直接代入箇所。TypeScriptプロジェクトは @types/trusted-types で型エラー発見容易、修正効率向上。

Q3: Polyfillで非対応ブラウザ対応できる？ A: 公式Polyfill trusted-types (Google製、~3KB)あり、Firefox 131以前/Safari全バージョンで対応可能。ただしブラウザネイティブ enforcement(自動エラー)は再現できず、Soft Polyfill(Type wrapper のみ)。完全防御はNative対応ブラウザのみ。

まとめ

  • W3C Trusted Types = 2024年Firefox 132+でCross-browser対応開始
  • TrustedHTML/Script/ScriptURL型でDOM XSS構造的防御
  • CSP require-trusted-types-for 'script' で自動 enforcement
  • Chrome 83+/Edge 83+/Firefox 132+/Safari TP対応
  • Google/Microsoft/Shopify業界標準採用、DOMPurify代替+補完

この用語に関連するコンテンツ

「W3C Trusted Types」の詳しい解説記事

関連する技術記事・ガイドを検索

「W3C Trusted Types」のパーツを見る

PC構成ビルダーで最適なパーツを選択

用語集に戻る
この記事について
カテゴリーセキュリティ
難易度上級
作成日2026/5/5