HTML エンティティ エンコーダー/デコーダーとは？

HTMLエンティティエンコーダー/デコーダーは、<、>、&、クォートなどの特殊文字をHTMLエンティティの同等物（またはその逆）に変換します。これにより、HTMLにユーザーコンテンツを埋め込む際のXSSの脆弱性を防ぎ、特殊文字の表示問題を解決します。

エンコーダは <, >, &, ", ' といった文字や任意のUnicodeコードポイントを、名前付きエンティティ（&amp;, &lt;）、10進数値参照（&#38;）、16進数値参照（&#x26;）に変換します。範囲セレクタで、予約文字5つだけを変換するか、すべての特殊文字を変換するか、非ASCII文字すべてを変換するかを選べます。デコードは3つの形式すべてを元に戻します。HTMLに出力するユーザー入力のサニタイズや、HTMLメールエクスポートからの本文復元に便利です。

使い方

1. ステップ1 — 特殊文字またはHTMLエンティティを含むテキストを貼り付けます。
2. ステップ2 — 文字をエンティティに変換するには「エンコード」を、エンティティを文字に変換するには「デコード」を選択します。
3. ステップ3 — 形式（名前付き・10進・16進）と範囲を選んで、エンコードの強さを調整します。

使用するタイミング

• CMSにコード例を貼り付けるとき、< と > がタグ扱いで消えるのを防ぐ。
• HTMLメールやスクレイピングで &mdash; や &nbsp; がそのまま入った文を整える。
• サーバーテンプレートに差し込む前にユーザー入力を変換し、XSSを止める。

結果

HTMLの段落内にコードスニペット <div class=hero> を表示する必要があります。エンコードして &lt;div class=&quot;hero&quot;&gt; にすることで、デバイスがマークアップとして解釈せずテキストとして表示します。

よくある質問

名前付きエンティティと数値エンティティはどう違いますか?

名前付きは読める省略形(&copy; が ©)、数値はUnicodeコードポイント(&#169; や &#xA9;)を使います。数値は任意のUnicode文字に対応、名前付きはHTML5仕様の約250文字に限られます。

特殊文字はすべて変換すべきですか、それとも一部だけですか?

HTML本文では & < > と属性値で使った引用符だけをエンコードすればよく、JavaScript やURLコンテキストではルールが変わります。範囲セレクタには3つの選択肢があります：予約文字のみはXSSに関わる5文字だけ、特殊文字すべては予約文字に加えてタイポグラフィも、非ASCIIすべてが最も広いカバレッジです。

エンコードするとコピペやスクリーンリーダーに影響しますか?

影響しません。ブラウザは表示前にエンティティを復号するので、ユーザーは元の文字を見てコピーします。スクリーンリーダーも復号後の文字を受け取ります。エンティティはマークアップの伝送形式で、表示そのものではありません。

HTMLエンティティ変換だけでXSSを防げますか?

本文に置く文字列ならそれで足ります。属性に入れる場合は値を引用符で囲み、その引用符自体もエンコードします。JavaScript、CSS、URLにはそれぞれ別のエスケープ規則があり、エンコードは最初の一層に過ぎません。

なぜ &#x で始まるエンティティと &# で始まるものがあるのですか?

&#x の後ろは16進数、&# の後ろは10進数のコードポイントです。どちらも同じ文字を指し、&#xA9; と &#169; はどちらも © になります。16進はUnicode表の U+ 表記と一致し、高位コードでは表記が短くなります。

関連ツール