XSS（クロスサイトスクリプティング）とは？仕組みとフロントエンドの対策

XSS（クロスサイトスクリプティング）とは？

XSS（Cross-Site Scripting）は、Twitterのような掲示板やブログのコメント欄など「ユーザーが入力した内容を画面に表示するWebサイト」において、悪意のあるJavaScriptコードが他のユーザーのブラウザ上で実行されてしまう脆弱性および攻撃手法です。

略称をCSSとするとスタイリングシート（Cascading Style Sheets）と被るため、XSSという略称が使われています。

攻撃による主な被害

攻撃者のスクリプトがブラウザで実行されることによって、以下のような被害が発生します。

• セッションハイジャック: ブラウザに保存されているCookie情報（ログインの認証情報など）が攻撃者に送信され、アカウントを乗っ取られる。
• 不正な操作の実行: 被害者の権限で、意図しない投稿（スパムツイートなど）や送金処理を勝手に行わせられる。
• フィッシング詐欺への誘導: 偽のログイン画面などを画面上にポップアップ表示させ、パスワードを入力させる。

どのような場面で（どうやって）発生するか

例えば、掲示板の入力フォームに攻撃者が以下のテキストを投稿したとします。

<script>alert('ハッキングしました');</script>

開発者がこのテキストを無害化せずに「そのままHTMLとして出力」する作りにしてしまっていると、その掲示板を見たすべての人（被害者）のブラウザがこれを「文字」ではなく「プログラム（スクリプト）」だと勘違いして実行してしまいます。

XSSの主な種類

1. 反射型XSS（Reflected XSS）: 検索ボックスなどに入力した検索ワードがそのまま画面（検索結果）に表示される箇所を狙い、細工したURLをメール等で被害者に踏ませる攻撃。
2. 蓄積型XSS（Stored XSS）: 掲示板やプロフィール欄など、一度データベースに保存されたスクリプトが、そのページを見た全員に永続的・受動的に実行され続ける、最も被害が大きくなりやすい攻撃。
3. DOM Based XSS: フロントエンドのJavaScript（DOM操作）の不備を突く攻撃。

実務上の注意点（対策・防御方法）

XSSを防ぐための大原則は「エスケープ処理（サニタイジング）」です。

HTMLにおいて特別な意味を持つ記号（<, >, &, " など）を、ただの文字として表示される安全な文字列（<, > など）に変換してから画面に出力します。

モダンなフロントエンドフレームワークでの対策

ReactやVue.jsといった現代のUIフレームワークの多くは、変数を画面に出力する際に自動でエスケープ処理を行う機能が標準で備わっています（ReactのJSXなど）。

そのため、昔に比べてXSSを作り込むリスクは減りましたが、以下のような強力なAPIを使う際はフレームワークの保護が無効になるため、注意書き（警告）が用意されています。

• React: dangerouslySetInnerHTML（名前の通り、危険であることを明示）
• Vue.js: v-html ディレクティブ

やむを得ずこれらを使用する場合は、DOMPurifyなどの専用ライブラリを用いて、出力前に必ずHTMLを浄化（サニタイズ）しなければなりません。

まとめ

XSSは、発生頻度が非常に高く身近な脆弱性です。「ユーザーからの入力値はすべて危険である」という前提に立ち、ブラウザに出力する直前に必ずエスケープ処理を施すことが、フロントエンドエンジニアの基本ルールです。