Webサイトのコメント欄や投稿フォームに「<script>」のような文字列を入力したとき、それがそのままページに表示されるか、プログラムとして実行されてしまうかは、HTMLエスケープという処理が正しく行われているかどうかで決まります。この記事では、HTMLエスケープの基本と、それが防いでいるXSS（クロスサイトスクリプティング）という攻撃の仕組みについて解説します。
1. HTMLエスケープとは何か
HTMLエスケープとは、HTMLの中で特別な意味を持つ文字を、見た目はそのままにタグとしては解釈されない別の表記（HTMLエンティティ）に変換することです。代表的な変換対象は次の5文字です。
| 元の文字 | エスケープ後 | 意味 |
|---|---|---|
| & | & | アンパサンド |
| < | < | タグの開始として解釈される文字 |
| > | > | タグの終了として解釈される文字 |
| " | " | 属性値を囲むダブルクォート |
| ' | ' | 属性値を囲むシングルクォート |
これらの文字はHTMLの構文上、タグや属性の区切りとして特別な意味を持つため、ユーザーが入力した文章の中にそのまま含まれていると、ブラウザがそれをタグや属性の一部として解釈してしまう可能性があります。
2. なぜエスケープが必要なのか
ユーザーが入力した文章をそのままHTMLに埋め込んで表示すると、入力内容に含まれる「<」や「>」がタグとして解釈されてしまいます。たとえばユーザーが投稿欄に「<script>」のような文字列を含む内容を入力し、それをエスケープせずにそのままページに出力してしまうと、スクリプトとしてブラウザに実行されてしまう危険があります。
エスケープを行うことで、こうした特殊な文字は「タグの一部」としてではなく「ただの文字列（テキスト）」として画面に表示されるようになり、意図しないプログラムの実行を防げます。
3. XSS（クロスサイトスクリプティング）の基本的な仕組み
XSS（Cross-Site Scripting、クロスサイトスクリプティング）は、攻撃者がWebサイトの入力フォームなどを利用して悪意のあるスクリプトをページに埋め込み、それを別のユーザーが閲覧した際にそのスクリプトが実行されてしまう攻撃です。
典型的な流れとして、攻撃者がコメント欄や検索ボックスのような入力箇所に、スクリプトを含む文字列を投稿します。サイト側がその内容をエスケープせずにそのままHTMLとして出力していると、その投稿を見た別のユーザーのブラウザ上で、攻撃者が埋め込んだスクリプトが実行されてしまいます。実行されたスクリプトによって、ログイン情報の盗取や、別のサイトへの誘導といった被害につながることがあります。
HTMLエスケープは、まさにこの「ユーザー入力がタグとして解釈されてしまう」という入口を塞ぐ対策です。入力された文字列をエスケープしてから出力することで、たとえスクリプトのような文字列が入力されても、それは実行可能なタグではなく単なる文字列として表示されるため、XSS対策の基本として広く使われています。
4. エスケープとアンエスケープの関係
エスケープが「特別な意味を持つ文字をHTMLエンティティに変換する」処理であるのに対し、アンエスケープ（デコード）はその逆で、HTMLエンティティを元の文字に戻す処理です。一度エスケープされたデータを別の用途で再利用したい場合や、エスケープされた状態のテキストを人間が読みやすい元の形に戻して確認したい場合などにアンエスケープが使われます。
また、技術ブログやドキュメントで「HTMLのコードをコードとして紹介したい」場合にもエスケープが使われます。たとえば記事中に<div>のようなタグの記述例をそのまま表示したい場合、エスケープしていなければブラウザは本物のdivタグとして解釈してしまうため、エスケープして「タグの見た目をしたテキスト」として表示する必要があります。
5. 現代のフロントエンドフレームワークと実務上の注意点
React・Vueなど現代の主要なフロントエンドフレームワークは、変数の値を画面に表示する際に基本的に自動でHTMLエスケープを行うように設計されています。そのため、通常の書き方をしていれば、開発者が意識的にエスケープ処理を書かなくても、ユーザー入力がそのままタグとして実行されてしまう事態は避けられるようになっています。
一方で、これらのフレームワークには、自動エスケープを明示的に回避してHTML文字列をそのまま挿入できるAPI（ReactのdangerouslySetInnerHTMLなど）も用意されています。名前が示す通り「危険性を理解した上で使う」ことが前提のAPIであり、外部から受け取った文字列やユーザー入力をそのまま渡してしまうと、XSSのリスクが生まれます。こうしたAPIを使う場合は、渡す内容が信頼できるものか、あらかじめサニタイズ（無害化）されているかを確認することが実務上重要です。
手元の文字列をエスケープ・アンエスケープして確認したい場合はHTMLエスケープ/アンエスケープツールが便利です。
まとめ
HTMLエスケープは、&や<のようなHTML上で特別な意味を持つ文字をエンティティに変換し、タグとして実行されないようにする処理です。これはXSS（クロスサイトスクリプティング）という、悪意のあるスクリプトが別のユーザーのブラウザ上で実行されてしまう攻撃を防ぐ基本的な対策になっています。現代のフレームワークは自動でエスケープしてくれますが、dangerouslySetInnerHTMLのように明示的にそれを回避するAPIを使う際は、渡す内容に注意が必要です。HTMLエスケープ/アンエスケープツールで実際の変換結果を確認してみてください。