HTML特殊文字のエスケープとエンティティエンコーディング

HTML特殊文字のエスケープ

HTMLは特定の文字を構文の一部として使用します — タグの山括弧、エンティティのアンパサンド、属性のクォートです。これらの文字がコンテンツに出現する場合、ブラウザの誤解釈を防ぐためにエスケープする必要があります。

5つの必須エスケープ

&  → &    （アンパサンド — エンティティ参照の開始）
<  → &lt;     （小なり — タグの開始）
>  → &gt;     （大なり — タグの終了）
"  → &quot;   （ダブルクォート — 属性値の終了）
'  → &#39;    （シングルクォート/アポストロフィ — 属性値の終了）

名前付きエンティティ vs 数値エンティティ

HTMLは3つのエンコーディング形式をサポートしています：名前付きエンティティ（&）、10進数値参照（&）、16進数値参照（&）。名前付きエンティティは可読性が高く、数値参照はあらゆるUnicodeコードポイントをカバーできます。

コンテキスト固有のエスケープ

必要なエスケープはコンテンツの出現場所によって異なります：

• テキストコンテンツ内： 最低限 & と < をエスケープ。
• ダブルクォート属性内： さらに " もエスケープ。
• シングルクォート属性内： さらに ' もエスケープ。
• <script> と <style> 内： HTMLエンティティはデコードされません。JavaScriptまたはCSSのエスケープを使用。

XSS対策

適切なHTMLエスケープはクロスサイトスクリプティング（XSS）に対する主要な防御策です。HTMLにエスケープなしで挿入されたユーザー入力は、任意のJavaScriptを実行できます。

ノーブレークスペースと特殊文字

 （ノーブレークスペース）はその位置での折り返しを防ぎます。その他の一般的なエンティティには —（emダッシュ）、©（著作権）、€（ユーロ記号）、…（省略記号）があります。

プログラム的なエスケープ

ほとんどのフレームワークには組み込みのHTMLエスケープがあります：ReactはJSXをデフォルトでエスケープし、Djangoは |escape を使用し、PHPには htmlspecialchars() があり、Goは html.EscapeString() を提供しています。