HTMLエスケープとサニタイズの違い（XSS対策とエスケープ対応表）
セキュリティ Web開発 XSS JavaScript
HTMLエスケープ（エンティティ変換）の役割、対象となる特殊文字、サニタイズ（Sanitization）との決定的な違いについての解説です。
1. オンライン HTML エスケープ / アンエスケープ ツール
テキストのHTMLエスケープおよび元の文字への復元（アンエスケープ）がブラウザ内で安全に行えます。
🛡️ この場でHTMLエスケープする
2. HTMLエスケープの5大特殊文字対応表
ユーザー入力値をHTMLに出力する際、以下の5つの文字を実体参照（HTML Entity）に置換しない場合、ブラウザがHTMLタグや属性として解釈し XSS（クロスサイトスクリプティング）脆弱性 が発生します。
| 文字 | 変換後の実体参照 (Entity) | エスケープが必要な理由 |
|---|---|---|
< | < | <script> 等のタグ開始を防ぐため |
> | > | タグの終了を防ぐため |
& | & | 実体参照の誤爆・悪用を防ぐため |
" | " | HTML属性（例: value="..."）の脱出を防ぐため |
' | ' (または ') | シングルクォート属性の脱出を防ぐため |
3. 「エスケープ」と「サニタイズ」の違い
| 項目 | HTMLエスケープ (Escape) | HTMLサニタイズ (Sanitize) |
|---|---|---|
| 処理内容 | 文字列中のすべての特殊文字を実体参照（文字）に変える | HTML構造（<b>, <p>等）を維持しつつ、<script> や onload="" を除去する |
| 適用場面 | プレーンテキストを表示するほぼすべての箇所 | ユーザーにリッチテキスト（HTML装飾）の投稿を許可する場合 |
| 使用ツール | textContent / フレームワークの自動エスケープ | DOMPurify / sanitize-html などの専門ライブラリ |
4. JavaScript での実装例
① 自動エスケープ（安全）
React / Vue / Astro / Svelte などのモダンフロントエンドフレームワークは、テンプレート変数出力時に自動でエスケープを行います。
// DOM APIで安全に出力する例
const userInputs = "<script>alert('xss')</script>";
const div = document.createElement("div");
div.textContent = userInputs; // 自動的にエスケープされる
document.body.appendChild(div);② 生出力（危険）
innerHTML や dangerouslySetInnerHTML を使用する場合は、事前に DOMPurify などのサニタイズライブラリを通す必要があります。
// ❌ 危険：XSSが発生する
element.innerHTML = userInputs;
// ✅ 安全：DOMPurify でサニタイズ後に代入
import DOMPurify from 'dompurify';
element.innerHTML = DOMPurify.sanitize(userInputs);