HTMLエスケープ/アンエスケープ

// HTMLエスケープ/アンエスケープに関するよくある質問

HTMLエスケープとは何ですか？

HTMLエスケープとは、HTMLで特別な意味を持つ文字（`< > & " '`）を文字参照（`&lt; &gt; &amp; &quot; &#39;`）に変換することです。これにより、HTMLタグや属性区切りとして解釈されることを防ぎ、テキストとして安全に表示できます。XSS（クロスサイトスクリプティング）攻撃を防ぐWebセキュリティの基本処理です。

なぜHTMLエスケープが必要ですか？

HTMLエスケープを行わないと、ユーザー入力がHTMLタグとして解釈され、`<script>alert(1)</script>` のようなコードがブラウザで実行されてしまいXSS攻撃の原因になります。Cookieの窃取、なりすまし、フィッシングなど深刻な被害につながるため、ユーザー入力・APIレスポンス・データベースの値を表示する際は必ずエスケープが必要です。

アンエスケープはどのような場面で使いますか？

アンエスケープは、エスケープ済みのHTMLソースコードを元のテキストに戻す際に使います。例えば、APIレスポンスやデータベースから二重エスケープ状態（`&amp;lt;` のように）で取得した場合の修正、メールクライアントが自動エスケープした文字列の復元、HTMLからプレーンテキストへの変換などに利用します。

数値文字参照と文字実体参照の違いは何ですか？

数値文字参照（`&#60;` や `&#x3C;`）は文字のコードポイント（10進または16進）で指定する方法、文字実体参照（`&lt;`）は名前で指定する方法です。どちらも同じ文字を表しますが、文字実体参照の方が読みやすく広く使われています。一方、絵文字や特殊なUnicode文字は名前付きエンティティが定義されていない場合があり、その場合は数値文字参照を使います。

シングルクォート（'）は `&apos;` でエスケープできる？

HTML5では `&apos;` が定義されていますが、HTML4 では未定義のため互換性を考慮して `&#39;` を使うのが安全です。本ツールは互換性を優先して `&#39;` でエスケープします。XMLでは `&apos;` が標準なので、XMLファイル生成時には適切な方を選んでください。

属性値の中とテキストの中でエスケープすべき文字は違いますか？

テキストノード内では `< > &`、属性値内ではこれに加えて区切り記号（`"` または `'`）をエスケープする必要があります。本ツールは保守的にすべての5文字をエスケープするため、属性値・テキストどちらの用途でも安全です。

既にエスケープ済みの文字列を再エスケープしたら？

二重エスケープになり、`&lt;` が `&amp;lt;` に変換され、表示時には文字通り `&lt;` と見えます。意図しない表示崩れの原因になるため、エスケープ前に文字列が既にエスケープ済みでないか確認するロジック、またはアンエスケープ→再エスケープのフローを設計する必要があります。

JavaScript で同じことを行うには？

ライブラリを使わない簡易実装は ``str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;')`` のように5文字を順次置換します（`&` を最初に処理するのが重要）。Node.js では `he` パッケージ、ブラウザでは DOMParser を使った方法も一般的です。本ツールでサンプル変換を確認してから実装するのが便利です。

絵文字や日本語もエスケープすべき？

絵文字・日本語・中国語などのUnicode文字はHTML的に特別な意味を持たないため、通常はエスケープ不要でそのまま表示できます（UTF-8で正しく配信されている前提）。`&#x1F600;` のような数値文字参照に変換することも可能ですが、ファイルサイズが増えるだけで利点はありません。

データはサーバーに送信されますか？

いいえ、すべての処理はブラウザ内のJavaScriptで完結します。入力したテキスト・エスケープ結果は外部に送信されません。社内システムのテンプレート文字列・ユーザー個人情報・コードレビュー対象の機密データも安全にエスケープ/アンエスケープできます。