玄関の鍵を閉めても「泥棒」はやってくる？DOM型XSSからWebサイトを守る「最強の防犯術」
こんにちは！セキュリティの世界へようこそ。
普段、家の玄関にはしっかり鍵をかけていますよね？でも、もし「家の中に誰かが紛れ込んでいて、家主のフリをして勝手に家具を並べ替えていたら」どうでしょう。
実は、Web開発の世界で「XSS（クロスサイトスクリプティング）」と呼ばれる攻撃は、まさにこれと同じことを引き起こします。今回は、特に厄介な「DOM型XSS」の仕組みと、それを完璧に防ぐための魔法のツール「DOMPurify」について、一緒に紐解いていきましょう。
—
そもそも「XSS」ってどんな泥棒？
WebサイトにおけるXSS攻撃を、身近な例で考えてみましょう。
- 反射型・格納型XSS: 郵便受けに爆弾入りの手紙を投げ込まれるようなものです。サーバー側で処理をミスすると、サイト自体が攻撃の踏み台にされます。
- DOM型XSS: 泥棒が「あなたの家の鍵」をすり替え、家の中の動線（DOM）を勝手に書き換えるような攻撃です。サーバーには全く関与せず、あなたのブラウザの中だけで完結してしまうため、非常に気づきにくいのが特徴です。
最近のWebアプリは、JavaScriptを使って画面を動的に書き換えることが増えています。このとき、「ユーザーが入力した文字を、そのまま画面のHTMLとして反映してしまう」というコードを書くと、そこが泥棒の入り口になってしまうんです。
—
防御の要「DOMPurify」を使おう
「じゃあ、ユーザーからの入力を全部禁止すればいいの？」というと、そうはいきませんよね。プロフィール欄やコメント欄など、リッチな表現が必要な場面は多いはずです。
そこで登場するのがDOMPurifyです。これは、HTMLの中から「危ないスクリプト（泥棒の道具）」だけを綺麗に洗い流し、安全な部分だけをDOMに書き込むための「最強の門番」です。
DOMPurifyの基本的な実装
まずは、npm経由でインストールして、実際に使ってみましょう。
// ライブラリを読み込みます
import DOMPurify from ‘dompurify’;
// ユーザーが入力した怪しいHTML文字列
const dirtyInput = ‘こんにちは！’;
// DOMPurifyが「onerror」のような悪意ある属性だけを削除してくれます
const cleanHTML = DOMPurify.sanitize(dirtyInput);
// 安全になったHTMLだけをDOMに挿入！
document.getElementById(‘content’).innerHTML = cleanHTML;
これだけで、onerrorという「泥棒が忍び込むための仕掛け」が取り除かれ、安全な
—
「ホワイトリスト」で完璧な要塞を作る
DOMPurifyの凄さは、「何を許可するか（ホワイトリスト）」を細かく設定できる点にあります。「画像はいいけど、リンクは許可したい」「スタイル（CSS）は一切禁止したい」といった、きめ細やかなルール設定が可能です。
const cleanHTML = DOMPurify.sanitize(dirtyInput, {
ALLOWED_TAGS: [‘b’, ‘i’, ‘em’, ‘strong’, ‘a’], // 許可するタグはこれだけ！
ALLOWED_ATTR: [‘href’], // 許可する属性はリンク先だけ！
FORBID_TAGS: [‘style’, ‘script’], // これらは問答無用で拒否！
FORBID_ATTR: [‘onerror’, ‘onload’], // 悪意ある属性は徹底ブロック
});
このように、許可するもの以外をすべて遮断する「ポジティブ・セキュリティモデル」を採用することで、未知の攻撃に対しても高い防御力を維持できます。
—
現場のエンジニアが教える「さらなる防衛」
DOMPurifyはあくまでクライアントサイドの防護壁ですが、さらに守りを固めるために「CSP（コンテンツセキュリティポリシー）」という防犯カメラを併用しましょう。
CSPは、Webサーバーからブラウザに向けて「このサイトでは、外部のスクリプトを勝手に実行させないでね！」と命令を出すヘッダー情報のことです。
Content-Security-Policy: default-src ‘self’; script-src ‘self’;
このように設定しておけば、万が一DOMPurifyをすり抜けるような攻撃コードが残っていたとしても、ブラウザ側が「怪しいコードは実行しません！」と門前払いしてくれます。
—
最後に：セキュリティは「継続」が全て
今回お伝えした「DOMPurifyでのサニタイズ」と「CSPの設定」は、現代のWeb開発において必須の教養です。セキュリティ対策は、一度やって終わりではありません。
- ユーザーの入力は「常に怪しいもの」として扱うこと
- 信頼できるライブラリを活用して、車輪の再発明をしないこと
- 常に最新の脅威トレンドに目を向けること
これらを意識するだけで、あなたの書くコードはぐっと堅牢になります。まずは小さな一歩から、安全なWebの世界を一緒に作っていきましょう！
もし実装で悩んだら、いつでもこの「セキュリティバイブル」を読み返してくださいね。皆さんの開発ライフが、安全で楽しいものになることを心から応援しています。
コメント