初級では「入力を消すのではなく、出力を安全にする」を要点としました。中級では、種類の違いと、なぜ出力側で防ぐのかを整理します。
中級の解説は準備中のため、中級の内容を表示しています。
概要 — まず全体をつかむ
詳細 — 1段階ずつ追う
どう起きる？
XSS は「信頼できない入力が、エスケープされずに HTML・JS・URL へ出力される」ときに成立します。経由する場所で種類が分かれます。
- 反射型 — リクエストに含めた値が、その応答ページにそのまま出る
- 格納型 — 保存された値（コメントなど）が、後で別の利用者の画面に出る
- DOM型 — サーバを介さず、ブラウザ内の JavaScript が値を危険な形で DOM へ書き込む
アニメーション『XSSの流れ（仕込み→表示→実行）』を開く
種類は違っても根本原因は一つ——出力の瞬間に、文脈に合った変換をしていないこと。結果として Cookie（ログイン状態）を盗まれる、勝手に操作される、などの被害が起きます。
どう防ぐ？
守りは出力側に置きます。
- 文脈別の出力エスケープ — HTML本文・HTML属性・JS・URL では必要な変換が違う。出す先に合った規則で「ただの文字」に変換する
- CSP（コンテンツセキュリティポリシー） — スクリプトの出所を制限し、許可していないスクリプトの実行をブラウザ側で止める
- HttpOnly Cookie — JavaScript から Cookie を読めなくし、万一スクリプトが動いても盗ませない
ポイントは「入力の混入ではなく、出力の扱いで防ぐ」こと。データは受け取ってよく、出す瞬間に無害化します。
登場人物メモ:
- ※1 出力文脈 — 値を出す先（HTML・属性・JS・URL）。文脈ごとに変換規則が違う
- ※2 CSP — スクリプトの出所を制限し、想定外の実行を止める仕組み
入力検証との役割分担
入力検証は土台ですが、XSS を単独では防げません。検証を通った値でも、出力の文脈しだいで危険になるからです。
- 入力検証 — 想定外を弾く（入口）
- 出力エスケープ — 出す先で無害化する（出口・XSSの主対策）
- CSP／HttpOnly — 破られたときの被害を抑える（多層防御）
⚠️ 破れ方のパターン
- 入力検証だけに頼る — 保存された値が別の画面で出るときに漏れる（格納型XSS）
- エスケープの文脈ミス — HTML用のエスケープを URL や JS にそのまま使う
- innerHTML の乱用 — 受け取った文字列をそのまま HTML として挿入しない
- CSPを免罪符にする — CSP は補助。エスケープの代わりにはならない
理解度チェック
そのまま解けます（成績は保存されません）。無料アカウントを作ると、学習の記録と進捗の山登りが始まります。
問1. XSS対策として最も本質的なのは？
問2. 反射型・格納型・DOM型のXSSに共通する根本原因は？
問3. 保存された値（コメントなど）が、後で別の利用者の画面に出て発火するXSSはどれ？
問4. サーバを介さず、ブラウザ内のJavaScriptが値を危険な形でDOMへ書き込んで発火するXSSはどれ？
問5. HttpOnly Cookie がXSS対策として果たす役割はどれ？
問6. 役割分担のうち「破られたときの被害を抑える（多層防御）」に当たるのはどれ？
問7. リクエストに含めた値が、その応答ページにそのまま出て発火するXSSの種類を何という（漢字＋型）？
問8. スクリプトの出所を制限し、許可していないスクリプトの実行をブラウザ側で止める仕組みを英字3文字で答えてください。