こんにちは。セキュリティの世界へようこそ。
現場で泥臭くインシデントと対峙していると、「なぜ、こんな当たり前の実装が放置されていたんだ？」と頭を抱えたくなる夜が幾度もあります。でも、最初から全てを知っている人間なんていませんよね。
今日は、フロントエンド開発の主役である「Angular」が、どうやって悪意ある攻撃からあなたのアプリを守っているのか、その核心である『DomSanitizer』について、家の防犯に例えて紐解いていきましょう。
—
1. 「何でも通す玄関」が招く悲劇：インジェクション攻撃とは？
まず、想像してみてください。あなたのWebアプリは「大切な資産を守る家」です。画面に表示される入力フォームやURLパラメータは、その家の「玄関」にあたります。
もし、玄関の鍵が壊れていて、誰でも好きなものを持ち込める状態だったらどうでしょう？
攻撃者は、ただのテキストを入力するふりをして、「プログラムの命令」を玄関から滑り込ませます。これがインジェクション攻撃の正体です。
- SQLインジェクション： 玄関から「家の金庫（データベース）の鍵を開けろ」というメモを放り込む。
- XSS（クロスサイトスクリプティング）： 玄関に「この家に来た客の持ち物を盗む罠（不正なスクリプト）」を仕掛ける。
特にXSSは、「ブラウザがユーザーの代わりに勝手な操作をしてしまう」という、非常に厄介な泥棒です。Angularは、この泥棒を玄関で食い止めるために「敏腕な門番」を常駐させてくれています。それがDomSanitizerです。
—
2. 門番「DomSanitizer」の役割
AngularのDomSanitizerは、いわば「持ち込み検査官」です。
開発者が「このHTMLを表示したい」「このURLに飛ばしたい」と言ったとき、Angularはそのまま信じることはしません。一度、その内容をスキャンし、「このコードには悪意ある命令が隠れていないか？」とチェックします。これがサニタイズ（無害化）です。
例えば、誰かが javascript:alert('盗み見') という危険なURLを送り込んできても、門番が「これは危険な命令だ！」と見抜き、unsafe:... と書き換えて無効化してくれます。
—
3. 実践：安全な書き方と、やってはいけないこと
では、実際にコードで見ていきましょう。
基本は「Angularに任せる」
Angularのテンプレート（HTML側）で {{ value }} と書く限り、Angularは自動的にサニタイズしてくれます。ここは門番を信じて任せましょう。
どうしてもHTMLを埋め込みたいときは？
外部から取得したHTMLをそのまま表示したい、というケースもありますよね。そんな時、つい魔が差して bypassSecurityTrustHtml を使いたくなるかもしれません。
import { DomSanitizer } from ‘@angular/platform-browser’;
// 危険な例：これを使うと門番が無効化されます！
constructor(private sanitizer: DomSanitizer) {}
getTrustedHtml(unsafeHtml: string) {
// 警告：これは「このHTMLは安全だと私が保証する」という署名です。
// 出所不明なデータをここに流し込むのは、泥棒に合鍵を渡すのと同じです。
return this.sanitizer.bypassSecurityTrustHtml(unsafeHtml);
}
ここが一番の盲点です！
bypassSecurityTrust というメソッドは、門番を「バイパス（回避）」させるものです。「この先は安全だから検査しなくていいよ」と門番に嘘をついているのと同じです。もしそのデータに攻撃コードが含まれていたら、家の中に泥棒を招き入れることになります。
—
4. セキュリティを守るための鉄則
新人の皆さんに、これだけは覚えて帰ってほしい「防犯の心得」を3つにまとめました。
1. 「安全」を証明できないものは流し込まない
bypassSecurityTrust... 系メソッドは、本当に信頼できる固定の文字列（例えば、自社で作成した安全なアイコンのHTMLなど）以外には絶対に使わないでください。外部からの入力値には、門番を働かせてください。
2. テンプレートの力を信じる
Angularがデフォルトで提供する {{ }} や [property] などのバインディングは、強力なセキュリティ防壁です。これらを無視して、無理やりDOMを直接操作（ElementRefなどを使って innerHTML を書き換える行為）をするのは、玄関の鍵を自分で外すようなものです。
3. コンテンツセキュリティポリシー（CSP）を味方にする
いくら門番が優秀でも、家の中に泥棒が入り込む可能性はゼロではありません。ブラウザには「万が一、攻撃コードが実行されそうになっても、外部との通信を遮断する」というCSP（Content Security Policy）という保険があります。サーバーから送るHTTPヘッダーに設定するだけで、二重の守りになります。
—
最後に
セキュリティ対策は、一度やって終わりというものではありません。まるで毎日鍵を閉めて、窓を点検するのと同じです。
AngularのDomSanitizerは、あなたのアプリを守るための非常に強力な武器です。しかし、その武器の引き金を引くのは、他でもない開発者である「あなた」です。
「このデータはどこから来たのか？」「本当に安全と言い切れるのか？」
コードを書くとき、ほんの一瞬だけ立ち止まって自分に問いかけてみてください。その小さな習慣が、あなたとユーザーの未来を守る最強のセキュリティ対策になります。
また次回の講義でお会いしましょう。安全な開発ライフを！
コメント