【入門編】Sanitizationライブラリを用いたHTML入力の無害化 – アプリケーションセキュリティ & 安全な開発防御ガイド

ユーザー入力は「毒入り」だと思え！DOMPurifyで安全なHTMLを手に入れる方法

こんにちは。現場でセキュリティの最前線に立っているエンジニアです。

皆さんは「ユーザーが自由に書き込める掲示板」や「プロフィール編集画面」を作るとき、どんな気持ちでコードを書いていますか？「まあ、適当にタグを入れられても表示されるだけだし大丈夫でしょ」なんて思っていたら、それは「家のドアを全開にして、誰でも自由に入ってきていいよ」と言っているのと同じなんです。

今回は、Web開発で避けては通れない「HTMLインジェクション（クロスサイトスクリプティング：XSS）」という泥棒から身を守るための、最も現実的で強力な武器「DOMPurify」について、一緒に紐解いていきましょう。

—

なぜ「HTML」をそのまま表示してはいけないのか？

まず、攻撃者が何を狙っているのかを想像してみましょう。

皆さんのWebサイトに、もしこんな文字列が投稿されたらどうなるでしょうか。

ブラウザは律儀にこれを読み込みます。「画像がないぞ？じゃあエラーが発生したから、alertという命令を実行しよう！」と動いてしまうのです。これが、悪意あるスクリプトが実行される仕組みです。

これを防ぐための「家の防犯」には、大きく分けて2つのアプローチがあります。

1. ブラックリスト方式（NG集を作る）： 「


';
// DOMPurifyに「無害化」をお願いする

// これだけで危険なタグや属性はすべて削除されます

const cleanHTML = DOMPurify.sanitize(dirtyInput);
// 結果を表示する（安全！）

// 出力結果: 
こんにちは！ 
document.getElementById('content').innerHTML = cleanHTML;
見ての通り、onerrorや