こんにちは！セキュリティの世界へようこそ。
日々、コードと向き合う中で「XSS（クロスサイトスクリプティング）」という言葉、一度は耳にしたことがあるのではないでしょうか？
「ちゃんとサニタイズ（無害化）してるから大丈夫だよ」なんて思っているあなた。実は、ブラウザの「親切心」が仇となって、あなたのセキュリティ対策をすり抜けてしまうmXSS（Mutation XSS：突然変異XSS）という恐ろしい罠があることを知っていますか？
今回は、この少しクセのある「mXSS」の仕組みを、家の防犯に例えて優しく紐解いていきましょう。
—
1. 「ブラウザの親切心」が招く悲劇
まずは、普通の泥棒（通常のXSS）と、忍者みたいな泥棒（mXSS）の違いをイメージしてください。
- 普通のXSS： 鍵のかかっていない窓から、直接泥棒が入ってくるイメージです。「
」のような怪しい文字がそのまま渡されてしまう状態ですね。 - mXSS： これが厄介です。泥棒は「無害な紙切れ」を置いていきます。しかし、家主（ブラウザ）がその紙切れを見て「あ、この書き方はちょっと変だから綺麗に直してあげよう！」と整理整頓した瞬間、無害だったはずの文字が「開かないはずの扉を開ける鍵」に変身してしまうのです。
これが「Mutation（突然変異）」の正体です。ブラウザはHTMLを正しく表示するために、多少崩れたコードを「よしなに」解釈して修正してくれます。この「よしなに」が、攻撃者にとっての絶好の隙間になるわけです。
2. なぜ「突然変異」は起きるのか？
具体的な例を見てみましょう。例えば、こんな文字列を考えます。
見てください！無害だったはずの文字列が、ブラウザの手によって「実行可能なimgタグ」に化けてしまいました。こうして、防犯対策をくぐり抜けた泥棒が、家の中で暴れ始めるのです。
3. 「一歩ずつ」対策を学んでいきましょう！
「そんなの防げないじゃないか！」と絶望しそうになりますよね。でも大丈夫、現代のWeb開発には強力な防波堤が用意されています。
対策①：DOMPurifyを必ず使う
自分で正規表現を使って「怪しい文字を消す」なんて、穴だらけのザルで水を汲むようなものです。信頼できるライブラリ[DOMPurify](https://github.com/cure53/dompurify)を使いましょう。このライブラリは、ブラウザが裏でどう変異させるかまで計算して、徹底的に無害化してくれます。
// DOMPurifyを使った安全なHTML挿入
import DOMPurify from 'dompurify';
const dirtyHTML = getSomeUserInput(); // ユーザーからの入力
const cleanHTML = DOMPurify.sanitize(dirtyHTML); // ブラウザの変異を先回りして無害化！
document.getElementById('content').innerHTML = cleanHTML;
対策②：Content Security Policy (CSP) で「怪しい実行」を禁止する
万が一、mXSSを食らってしまったとしても、被害を最小限に抑えるのが「CSP」というヘッダー設定です。これは「家の中に、勝手に怪しい電化製品（スクリプト）を持ち込ませない」という厳格なルールです。
サーバーから送るヘッダーの例：
Content-Security-Policy: default-src 'self'; script-src 'self'; object-src 'none';
script-src 'self'：自分のサーバーにあるスクリプトしか動かさない！object-src 'none'：怪しいプラグインなどは一切お断り！
こうしておけば、仮に泥棒が侵入しても、彼らが持ってきた「実行用の道具」はブラウザによって即座に没収されるため、被害を未然に防ぐことができます。
---
最後に：完璧な防御は「疑うこと」から
セキュリティ対策に「絶対」はありません。今回解説したmXSSのように、ブラウザの進化に合わせて攻撃手法もどんどん賢くなっています。
- ユーザー入力を決して信用しない
- 信頼性の高いライブラリを使い、自分でロジックを組まない
- CSPのような多層防御で、もしもの時の逃げ道を作る
この3つを意識するだけで、あなたの書くコードは格段に強固になります。セキュリティは「面倒な作業」ではなく、あなたが作った素晴らしい作品を守るための「誇り高い儀式」です。
今日から一歩ずつ、安全な開発を一緒に楽しんでいきましょうね！また分からないことがあれば、いつでも聞きに来てください。
コメント