FlawOpen

flawopen.com/Angular のセキュリティ/Angular

Angular の XSS 対策:安全な既定動作とバイパス API

リファレンスページ
要点

Angular はテンプレートバインディングの値を既定で未信頼として扱います。補間ではテキストをエスケープし、HTML と URL のバインディングではコンテキストに応じてサニタイズします。危険な境界は明示的な信頼です。bypassSecurityTrust* は、その値に対する通常のサニタイズを Angular にスキップさせます。使用する場合は、実際に使う正確なセキュリティコンテキストに合わせて値を検証・構築してください。

RISKY — the escape hatch
this.safeHtml = this.sanitizer
  .bypassSecurityTrustHtml(comment);
// <div [innerHTML]="safeHtml"></div>
より安全 — 未信頼入力をテキストのまま扱う
<div>{{ comment }}</div>
// 補間はマークアップをテキストとしてエスケープします

Angular がサニタイズするもの — できないもの

Angular は補間テキストをエスケープし、HTML と URL のコンテキストで未信頼値をサニタイズします。たとえば [innerHTML] は危険なマークアップを除去し、安全な HTML は保持します。通常の補間はマークアップを解釈しません。実行可能な内容を読み込む iframe の src などのリソース URL は任意のコードを指す可能性があるため、汎用的にはサニタイズできません。攻撃者が制御する値を bypassSecurityTrustHtml、bypassSecurityTrustUrl、bypassSecurityTrustResourceUrl や関連 API に渡さないでください。これらは特定コンテキストで安全だと宣言し、サニタイズを省略します。正当な埋め込みでは、固定 origin と検証済み ID から URL を構築し、信頼済みにする直前に渡します。

バイパス API と DOM sink を監査する

grep -rn "bypassSecurityTrust" --include="*.ts" .

よくある質問

CSP と Trusted Types による多層防御

Angular の安全なバインディングに加え、Content Security Policy (CSP) を設定し、Trusted Types を強制して多層防御を行います。アプリケーションが DomSanitizer.bypassSecurityTrust* を呼び出す場合、Angular では Trusted Types ポリシー angular#unsafe-bypass が必要です。可能ならこれらの呼び出しを削除し、必要な場合は各呼び出し箇所を記録して、正確なコンテキストに対して検証した値だけを信頼してください。

Angular は DOM に書き込むすべての方法をサニタイズしますか?

いいえ。テンプレートバインディングにはフレームワークの保護がありますが、DOM API の直接利用、ElementRef、サードパーティの DOM ライブラリは保護を迂回する可能性があります。テンプレートバインディングを優先し、これらの sink は別途監査してください。入力を信頼済みにするのは、正確なセキュリティコンテキストに合わせて検証した場合だけです。

参考資料

関連項目 クロスサイトスクリプティング(XSS、CWE-79)の仕組みと各言語での防ぎ方 — flawopen.com MIME sniffing XSS:Content-Type と nosniff CSP と出力エスケープ:両方必要ですか? ReactのdangerouslySetInnerHTMLは安全? DOMPurifyだけでinnerHTMLは安全? Markdown のレンダリングは XSS に安全? SvelteはデフォルトでXSSを防げる?