HTMLツール

無料 Trusted Typesポリシージェネレーター

危険なDOMシンクに対して型付き値でDOMベースXSSを防ぐTrusted TypesポリシーとCSPヘッダーを生成します。

ツールを読み込み中...

Trusted Typesポリシージェネレーターとは

Trusted Typesは、innerHTML、eval()、script.srcなどの危険なDOMシンクに対して、文字列の代わりに型付き値を要求することで、DOMベースのXSSを防止するブラウザセキュリティAPIです。開発者はtrustedTypes.createPolicy()を使用して、信頼されていない文字列がインジェクションシンクに到達する前に変換または拒否するサニタイゼーションルールを定義します。Content-Security-Policyディレクティブと組み合わせることで、Trusted Typesは明示的に許可された操作のみが高リスクのDOMプロパティに値を割り当てられるように強制することで、XSS脆弱性の主要なクラスを排除します。

クイックアンサー

Trusted Typesは、文字列がinnerHTMLやeval()などの危険なDOMシンクに到達するのをブロックすることで、DOMベースのXSSを防止します。trustedTypes.createPolicy()とcreateHTML/createScript/createScriptURL操作を使用し、Content-Security-Policy: require-trusted-types-for 'script'で強制します。既存の機能を破壊しないよう、常に最初にContent-Security-Policy-Report-Onlyを使用してレポート専用モードでテストしてください。

Last updated: 2026-05-31

制限事項

Trusted TypesにはChrome 83+、Edge 83+、Safari 17+のブラウザサポートが必要です。Firefoxは2026年現在Trusted Typesをサポートしていません。アプリケーションは、サポートされていないブラウザ向けにフォールバック動作を提供して、Firefoxでも問題なく動作するように処理する必要があります。
Trusted TypesはすべてのXSSベクターをカバーするわけではありません。DOMインジェクションシンク（innerHTML、outerHTML、insertAdjacentHTML、eval、document.write）は保護しますが、URL属性（href、src）、イベントハンドラ属性、またはCSSベースのインジェクションベクターを介したXSSは防止しません。
大規模アプリケーションのTrusted Typesへの移行には、かなりのリファクタリングが必要です。すべてのinnerHTML、insertAdjacentHTML、outerHTML、document.writeの使用法をポリシーでラップする必要があり、広範な動的DOM操作を行うレガシーコードベースでは数百のソース変更が必要になる可能性があります。

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

使い方

許可する操作（createHTML、createScript、createScriptURL）を設定し、各操作が入力をどのように処理するかを決定します。厳格な拒否（すべての信頼できない入力をブロック）、サニタイゼーション（サニタイザー関数を通す）、または信頼できるソースのパススルー。
CSPモードを選択します。enforce（Content-Security-Policyでrequire-trusted-types-for 'script'）は違反をブロックし、report-only（同じディレクティブをContent-Security-Policy-Report-Onlyに）は違反をブロックせずにログ記録します。移行中は必ずreport-onlyモードから始めてください。
サーバープラットフォーム（NginxまたはApache）を選択し、既存のサーバーブロックまたはバーチャルホストと統合する対応するCSPヘッダー設定を生成します。
ポリシーのJavaScriptファイルとサーバー設定をデプロイし、report-onlyモードでアプリケーションをテストします。コンソールの違反レポートを確認してポリシーを調整し、違反がなくなるまで続けてからenforceモードに切り替えます。

主な用途

すべてのHTMLインジェクションポイントが設定されたサニタイザー関数を持つTrusted Typesポリシーを通過するように要求することで、コンテンツの多いウェブアプリケーションをストアドXSSおよびリフレクテッドXSSから保護します。
最初にreport-onlyモードでデプロイし、コードベース全体で違反レポートを段階的に修正してから、完全なenforceモードに切り替えることで、レガシーアプリケーションをTrusted Typesに移行します。
外部ウィジェットや埋め込みがinnerHTMLを介して動的コンテンツをロードするサードパーティスクリプトが多い環境で厳格なTrusted Typesポリシーを適用し、すべての注入されたHTMLがポリシーを通過することを保証します。

用途

使用例

例

レガシーアプリのreport-only移行

大規模な管理ダッシュボードがさまざまな動的ウィジェットにinnerHTMLを使用しています。Content-Security-Policy-Report-Onlyヘッダーでrequire-trusted-types-for 'script'を設定して、Trusted Typesをreport-onlyモードで最初にデプロイします。違反レポートを収集し、各ウィジェットをTrusted Typesポリシーを使用するようにリファクタリングし、すべての違反が解決されたらContent-Security-Policyのenforceモードに切り替えます。

例

CMSエディタの厳格なポリシー

リッチテキストエディタを備えたCMSは、ユーザー生成のHTMLコンテンツを安全にレンダリングする必要があります。TrustedHTMLオブジェクトを返す前に、DOMPurifyスタイルのサニタイザーにHTMLを通すcreateHTML関数を持つTrusted Typesポリシーを作成します。すべてのinnerHTML割り当てはこのポリシーを通過するため、悪意のあるコンテンツがサーバーサイドフィルタリングをバイパスしてもXSSを防ぎます。

よくあるミス

最初にreport-onlyモードでテストせずにTrusted Typesをenforceモードでデプロイする。厳格なポリシーは、innerHTML、outerHTML、insertAdjacentHTMLを使用するすべての機能を壊す可能性があります。強制する前に必ずreport-onlyで検証してください。
defaultPolicyを包括的な許可として使用する。trustedTypes.createPolicy('default', { createHTML: (s) => s })は、すべての文字列を変更せずに通過させるため、すべてのXSS防御をバイパスします。デフォルトポリシーはパススルーではなく、サニタイズする必要があります。
eval()がTrusted Typesのシンクであることを忘れる。アプリケーションがeval互換の文字列でJSON.parse()を使用したり、動的コード実行に依存している場合、それらの呼び出しはcreateScriptポリシーを通過するか、別のCSP script-srcディレクティブで制御される必要があります。

検証

Trusted Typesポリシーをenforceモードでデプロイした後、ブラウザDevToolsコンソールを開きます。違反は操作をブロックし、ブロックされた割り当てと影響を受けるDOMシンクに関する詳細を示すTypeErrorをログに記録します。通常のアプリケーション使用で違反がゼロであることを確認します。
一時的にreport-onlyモードに切り替え、Chrome DevToolsのIssuesタブを使用してTrusted Types違反レポートを検査します。「trusted-types」でフィルタリングして、シンクタイプとソース位置でグループ化されたすべての潜在的な違反を確認します。

FAQ

Trusted TypesポリシージェネレーターのFAQ

Trusted Typesは既存のXSS脆弱性を保護しますか？

はい。脆弱性がinnerHTML、outerHTML、insertAdjacentHTMLなどのDOMシンクに文字列を渡す必要がある場合、Trusted Typesはこれらのシンクへのすべての割り当てをポリシーに強制的に通過させます。ポリシーが存在しないか、ポリシーが入力を拒否した場合、割り当てはブロックされます。ただし、Trusted TypesはURL属性（href、src）、イベントハンドラ（onclick、onerror）、またはサーバーサイドインジェクションを介したXSSは保護しません。DOMインジェクションシンクを特に対象としています。

Trusted TypesはReact、Vue、Angularで使用できますか？

はい。ただし、フレームワークごとに統合方法は異なります。Reactは期待される型付きオブジェクト契約を介してTrusted Typesをサポートしています。dangerouslySetInnerHTMLはTrustedHTMLオブジェクトを受け入れます。Vueはv-htmlバインディング用のカスタムポリシーラッパーが必要です。AngularはTrusted Typesと連携するように設定できるDomSanitizer統合を提供しています。各フレームワークのドキュメントで特定のTrusted Typesサポートの詳細を確認してください。

Trusted Typesの下でサードパーティスクリプトはどうなりますか？

DOMシンク（innerHTML、document.write、outerHTML）に値を割り当てるサードパーティスクリプトは、Trusted Typesポリシーを通過しない限りブロックされます。特定の信頼できるスクリプトを許可するポリシーを作成するか、CSPヘッダーに'trusted-types'ディレクティブを追加して許可されるポリシー名をリストする必要がある場合があります。サードパーティのスクリプトウィジェットはTrusted Typesの下で一般的に壊れるため、明示的なポリシー設定が必要です。

report-onlyモードでTrusted Typesを処理するにはどうすればよいですか？

強制のContent-Security-Policyヘッダーの代わりに、Content-Security-Policy-Report-Only: require-trusted-types-for 'script'を設定します。ブラウザは操作をブロックせずに、違反をコンソールにログ記録し、設定されたreport-uriエンドポイントにレポートを送信します。すべての違反レポートを確認し、各シンク使用法に適切なポリシーを作成してから、ディレクティブをContent-Security-Policyヘッダーに移動してenforceモードに切り替えます。