【入門編】DOMPurifyを用いたクライアントサイドでのHTMLサニタイズ実装 – アプリケーションセキュリティ & 安全な開発防御ガイド

そのHTML、そのまま表示していませんか？「DOMPurify」で防ぐクロスサイトスクリプティング（XSS）の基礎

こんにちは。セキュリティの世界へようこそ。
日々、開発の現場でコードを書いていると、「画面にユーザーの入力内容を表示する」という、ごくありふれた機能を作ることがありますよね。掲示板の投稿や、プロフィール欄、あるいはチャットツールなど。

でも、ちょっと待ってください。その「表示したい内容」の中に、「悪意のあるプログラム」が隠れていたらどうしますか？

今回は、Web開発における最大の脅威の一つ「クロスサイトスクリプティング（XSS）」と、それを華麗に封じ込める頼れる相棒「DOMPurify」について、一緒に紐解いていきましょう。

—

1. 泥棒は「窓の隙間」からやってくる

まずは、セキュリティの概念を「家」に例えてみましょう。

あなたのWebサイトは「家」です。ユーザーが入力したデータは、誰かが玄関から差し入れてきた「手紙」のようなもの。普通なら、その手紙を広げて内容を確認しますよね。

しかし、もしその手紙の中に「あなたの家の合鍵を勝手に作る魔法」や「家の家具を勝手に外に放り投げる指令」が書かれていたら？

これが「クロスサイトスクリプティング（XSS）」の正体です。攻撃者は、入力フォームに文字ではなく「悪意のあるプログラム（JavaScriptなど）」を紛れ込ませます。ブラウザがそれを「普通のデータ」だと思って実行してしまった瞬間、あなたのサイトを訪れたユーザーのブラウザ内で、勝手にパスワードを盗んだり、別のサイトへ転送させたりする「泥棒」が動き出すのです。

これを防ぐための「鍵」が、今回紹介するDOMPurifyです。

—

2. DOMPurifyって何者？

DOMPurifyは、ひと言で言えば「危険なものだけを綺麗に取り除いてくれる、超高性能な選別機」です。

例えば、ユーザーに「色付きの文字を使っていいよ」と許可したとします。でも、勝手に


';
// DOMPurifyで安全なHTMLに変換！

const cleanHTML = DOMPurify.sanitize(dirtyHTML);
// 画面に反映する際は、安全になった cleanHTML を使う

document.getElementById('display-area').innerHTML = cleanHTML;
// 実行結果: 
こんにちは！ 
// 悪意のあるスクリプト部分は見事に消え去っています！
---
3. 「完璧」を求めすぎない設定のコツ
DOMPurifyは強力ですが、ただ入れるだけでは不十分なこともあります。例えば、あなたが「リンクボタン」だけは許可したいなら、次のように設定をカスタマイズします。
const cleanHTML = DOMPurify.sanitize(dirtyHTML, {

  ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a'], // 許可するタグ

  ALLOWED_ATTR: ['href'] // 許可する属性（リンク先など）

});
こうすることで、「許可されていないタグはすべて捨て、許可された属性以外も取り除く」という「ホワイトリスト方式」の防御が完成します。
防犯で言えば、「泥棒を追い出す」のではなく、最初から「特定の信頼できる客しか入れない」という、より厳格なゲートを設けるイメージですね。
---
4. 忘れてはいけない「二重の防波堤」
DOMPurifyで画面表示を安全にすることは重要ですが、セキュリティの鉄則は「多層防御」です。
1.  入力時: サーバー側でも、受け取ったデータが正しい形式か必ずチェックする。

2.  出力時: 今回のようにDOMPurifyを使って、ブラウザでの表示を安全にする。

3.  ブラウザの設定: 「Content Security Policy (CSP)」というヘッダーを使って、「このサイトでは外部からの怪しいスクリプトの実行を禁止する」というルールを、ブラウザ自体に伝えておく。
「DOMPurifyさえ使えば絶対安心！」と過信せず、家を守るために「玄関の鍵」だけでなく「防犯カメラ」や「窓の格子」も付けるような感覚で、複数の対策を組み合わせていきましょう。
---
まとめ：セキュリティは「終わりのない旅」
最初は難しく感じるかもしれませんが、こうやって少しずつ「何が危険で、どう防げばいいのか」を知るだけで、あなたの書くコードは格段に安全になります。
まずは、自分の作っているアプリケーションで「ユーザーの入力をそのまま innerHTML で表示している箇所はないか？」を探してみてください。もし見つかったら、それがあなたの成長のチャンスです。
今日からDOMPurifyを導入して、より安全で、より信頼されるWebサイトを作っていきましょう！応援しています。