HTML文字参照を検索・変換する
文字、Entity名、Reference、Unicodeから検索し、Named・Decimal・Hexの表記と双方向変換を確認します。
HTMLエンティティ一覧・文字参照変換ツールを開く結論：HTML Sourceでは文字参照、Browserでは元の文字として表示する
<は<、>は>、&は&と記述できます。Source上のReferenceはBrowserで元の文字として表示されます。
必要な文字はContextで変わります。文字列全体を無条件にEntity化する運用にはしません。
HTML構文と表示文字が衝突する例
<p>1 < 2 & 3 > 2</p><はMarkup開始、&はCharacter Reference開始として解釈され得るため、表示したい文字とHTML構文を区別します。
代表的な文字参照を確認する
HTML本文でよく使う文字を比較します。
| 確認対象 | 確認内容 | 判断 |
|---|---|---|
| & | & | Ampersand |
| < | < | Less-than |
| > | > | Greater-than |
| " | " | Quotation mark |
| ' | ' | Apostrophe |
HTMLへ安全に表示する手順
- 表示したい原文と挿入先Contextを確認します。
- ToolでHTML本文を選びNamed形式へ変換します。
- 変換結果をHTML Sourceへ配置します。
- Page SourceとRendered Textの両方を確認します。
HTMLエンティティと文字参照の用語を整理する
一般には「HTMLエンティティ」や「HTMLエスケープ」と呼ばれますが、HTML StandardではCharacter Reference、Named Character Reference、Numeric Character Referenceという用語が中心です。
| 種類 | 書式 | 例 | 意味 |
|---|---|---|---|
| Named Character Reference | &name; | < | 定義済みの名前から文字を表す |
| Decimal Numeric Character Reference | &#数字; | < | Unicode Code Pointを10進数で表す |
| Hexadecimal Numeric Character Reference | 進数; | < | Unicode Code Pointを16進数で表す |
| Unicode Code Point | U+XXXX | U+003C | 文字を識別する番号。HTML Sourceの記法そのものではない |
Named Referenceは1つの名前が複数Code Pointの並びを表す場合があります。Toolは単一Code Point前提ではなく配列として扱います。
出力Contextごとに必要な処理を分ける
| Context | 例 | 主な対応 |
|---|---|---|
| HTML Text | <p>USER_INPUT</p> | HTML Text用Output EncodingまたはtextContent |
| HTML Attribute | <input value="USER_INPUT"> | 引用符で囲みAttribute用Encoding。属性名も固定する |
| URL | <a href="..."> | URL検証・Percent Encoding後にAttribute Contextも処理する |
| JavaScript | <script>const x = ...</script> | HTML EntityではなくJavaScript Context専用処理。直接挿入を避ける |
| CSS | <style>...</style> | CSS Context専用処理と値のAllowlistを検討する |
| 許可したHTML | Rich Text Editor | Markupを残す必要があるためSanitizeを使用する |
<を<へ変換するだけで、すべてのXSSを防げるわけではありません。OWASPが示すContext-sensitive Output EncodingとSafe Sinkを確認してください。
文字参照を調査・変換する基本手順
- Source、API値、DOM上の表示結果のどこで問題が起きているかを分けます。
- 文字、Entity名、&name;、U+XXXXのいずれかを一覧Toolへ入力します。
- EncodeかDecodeかを決め、HTML本文または属性値のContextを選びます。
- Named・Decimal・Hexの結果を比較し、CanonicalなSemicolon付き表記をCopyします。
- 実際のTemplate、DOM API、Browser表示を確認し、同じ層で二重にEncodeしていないか検証します。
現在のHTMLエンティティ一覧ツールで確認できること
| 機能 | 対応内容 | 注意点 |
|---|---|---|
| 逆引き | 文字、amp、&、U+0026、数値文字参照から検索 | 大文字小文字を区別するEntity名は候補を確認する |
| 一覧検索 | 文字、Entity名、Reference、Unicode、Decimal、Hex、分類を部分一致検索 | WHATWG一覧を基準に内蔵データを検索する |
| Encode | HTML本文、Double Quote属性、Single Quote属性を選択しNamed・Decimal・Hexへ変換 | Contextに応じた必要文字だけを変換する |
| Decode | Semicolon付きNamed・Decimal・Hex Referenceを1回だけ復元 | 二重Encodeを自動で複数回Decodeしない |
| 詳細 | 文字、Named、Decimal、Hex、Unicode、別名、複数Code Pointを表示 | 不可視文字は「不可視」とLabel表示する |
| Copy | 文字、Named、Decimal、Hex、Unicode、変換結果を個別にCopy | Clipboard失敗時は画面内Messageへ表示する |
変換結果はTextとして表示し、入力した<script>やEvent AttributeをTool内で実行しません。
関連ツールと一次資料
- Unicodeコードポイントを確認する
- ASCIIコードを確認する
- URL Encoder / DecoderでPercent Encodingを確認する
- Base64 Encoder / DecoderでBinary表現との違いを確認する
- JSON FormatterでJSON構文を確認する
- テキスト差分比較でEncode前後を確認する
- XML FormatterでXMLのEntity利用を確認する
- WHATWG HTML: Character references
- WHATWG HTML: Named character references
- MDN: Character reference
- MDN: Node.textContent
- MDN: Element.innerHTML
- OWASP: Cross Site Scripting Prevention Cheat Sheet
- W3C: XML 1.0 Fifth Edition
Named Character Referenceの名前とCode PointはWHATWG HTML Standard、XSS対策はOWASP、XMLで事前定義されるEntityはW3C XML仕様を基準に確認します。
<div>を文字として表示する
Sourceへ<div>と記述すると、Browser上では<div>というTextになります。
Code Exampleではcodeやpre要素を使っても、Source中の<は必要に応じて文字参照へ変換します。
- <div>Hello</div>を入力
- Named形式でEncode
- <div>Hello</div>をCopy
- code要素内で表示確認
変換済み文字列を再度Encodeすると&lt;になるため、Encode済みか確認します。
よくある質問
- すべての文字をHTMLエンティティへ変換する必要がありますか？
- 通常はありません。UTF-8を使用し、HTML構文と衝突する文字や利用Contextで必要な文字をOutput時に変換します。
- &と&と&は同じ文字ですか？
- はい。いずれも&を表します。Named、Decimal、HexというSource上の表現が異なります。
- Decode結果をinnerHTMLへ入れても安全ですか？
- 安全とは限りません。Decode後にMarkupが復元されるため、Text表示ならtextContentを使い、HTMLを許可する場合は要件に合うSanitizeを別途行います。