HTML エンティティエンコードツール
HTMLエンティティ文字をオンライン変換、エンコード・デコード対応、XSS攻撃を効果的に防止
変換方法を選択
HTMLエンティティエンコードとは?
HTMLエンティティエンコードは、特殊文字をHTMLエンティティ参照に変換するメカニズムです。HTMLでは、特定の文字が特別な意味を持つ(<、>、&など)。これらの文字をページに表示するには、エンティティエンコードを使用する必要があります。エンティティエンコードには2つの形式があります:名前付きエンティティ(<など)と数値エンティティ(<など)。名前付きエンティティは読みやすく、数値エンティティは任意のUnicode文字を表現できます。
使い方
使い方
- 変換するテキストを左側の入力ボックスに入力または貼り付け
- 対応する変換ボタンをクリックしてエンコードまたはデコード方法を選択
- 結果が右側に自動的に表示されます
- 「コピー」ボタンをクリックして結果をクリップボードにコピー
変換方法
キーボードショートカット
- Ctrl + EHTML Entity Encode
- Ctrl + DHTML Entity Decode
エンコーディングのヒント
- HTMLソースにテキストを挿入する前に、ユーザーに表示されるテキストをエンコードしてください。特に山括弧、引用符、アンパサンドが含まれる可能性がある場合に重要です。
- HTMLエンティティエンコーディングはマークアップの解釈を防ぎますが、XSS防御の一部に過ぎず、コンテキストに応じた出力エスケープの代替にはなりません。
利用シーン
仕組み
HTMLはWHATWG HTML Living Standardで定義された2種類の文字参照を使用します。名前付き文字参照は&で始まり;で終わり、WHATWGが管理するentities.jsonテーブル(現在の仕様で約2,231件、末尾の;なしのレガシーエイリアスである&等を含む)から取得されます。数値文字参照はUnicodeコードポイントを10進数(<)または16進数(<)で表記し、サロゲート範囲U+D800〜U+DFFFを除くU+0000〜U+10FFFFの任意の文字をエンコードできます。HTML構文の安全性を保つために必ずエスケープすべき5文字は、&(&)、<(<)、>(>)、"(")、'(')です。'はXMLとHTML5の一部ですがHTML 4.01では無効であるため、OWASPはダブルクォートで区切られた属性でレガシーパーサーを経由する必要がある場合に数値形式'の使用を推奨しています。 本ツールのエンコードは1パスの置換処理です。順序が重要であり、&を最初にエスケープしなければ、<と>に対して挿入されたエンティティプレフィックスが&に再エスケープされ&;amp;lt;となってしまいます。デコードはブラウザのHTMLパーサーを活用し、入力を分離された要素のinnerHTMLに代入してtextContentを読み戻すことで、HTML仕様の公式Tokenizer状態機械(セクション13.2.5.72の文字参照状態から13.2.5.80)を呼び出し、末尾の;のない不正な入力を含む名前付き・10進数・16進数の各形式を正しく解決します。全文字エンコードモードの数値エンコードでは、String.prototype.codePointAtを使用してコードポイント単位で文字列を走査し、UTF-16サロゲートペアを占める補助平面文字(例:絵文字U+1F600は😀となり、2つのサロゲート参照にはなりません)を処理します。 XSS防止にはHTMLエンティティエンコードだけでなく、コンテキストを意識したエスケープが必要です。OWASPのCross-Site Scripting Prevention Cheat Sheetでは5つの異なるコンテキストを定義しています:HTML本文、HTML属性(クォートあり/なし)、JavaScriptデータ(<script>内)、CSS、URLです。HTMLエンティティエスケープはコンテキスト1と2のみをカバーします。JavaScriptコンテキストにはJSON.stringifyによる\xHHまたは\uHHHHエスケープを、URLコンテキストにはencodeURIComponent(RFC 3986のパーセントエンコーディング)を使用すべきです。インラインイベントハンドラーは値がHTMLとJavaScript両方のパーサーを通過するため、ルールが複合されます。script-src 'self'と'unsafe-inline'を除外したContent-Security-Policyヘッダーが、エスケープミスを拾う現代の多層防御レイヤーであり、innerHTML、document.write、setAttribute('on*', ...)等のDOMシンクは、デフォルトでエスケープを行うtextContentやフレームワーク管理のバインディング(ReactのJSX、Vueのmustache)に置き換えるべきです。
- 名前付き参照:WHATWG entities.jsonに約2,231件のエントリ。必ずエスケープすべき5つの名前は & < > " '('はHTML5/XML専用、HTML 4.01では無効)
- 数値参照:10進数の&#DDDDD;と16進数の&#xHHHH;でU+0000〜U+10FFFFをカバー。サロゲートU+D800〜U+DFFFとU+0000 NULLはHTML仕様で無効
- エスケープ順序:&を最初に置換しないと、後続のエスケープで挿入された&プレフィックスが二重エンコードされる。O(n)の5エントリルックアップテーブル
- DOMParserによるデコード:分離要素のinnerHTMLへの代入はHTML仕様のTokenizer(Character reference state、セクション13.2.5.72-80)を呼び出し、末尾の;のないレガシーエンティティも処理
- 補助平面文字の処理:String.prototype.codePointAtとfor...ofイテレーションを使用し、絵文字やCJK拡張B文字(U+10000以上)が単一の&#NNNNN;となり、2つのサロゲート参照にならない
- コンテキスト認識エスケープ(OWASP XSS Prevention Cheat Sheetルール#0):HTML本文、HTML属性、JavaScript、CSS、URLはそれぞれ異なるエスケープが必要。HTMLエンティティだけではJSやURLシンクでのXSSを防げない
- 多層防御:Content-Security-Policy script-src 'self'(RFCスタイル)、リッチテキスト入力に対するDOMPurifyアローリストサニタイズ、バニラDOMコードではinnerHTMLよりtextContent/innerTextを優先
使用例
基本的な要素のエンコード
入力: <script>alert(1)</script>
出力: <script>alert(1)</script>
用途: ユーザー入力をレンダリングする際、ブラウザがテキストを実際のタグとして解釈するのを防ぐ属性値のエンコード
入力: <div title="Hello & world">
出力: <div title="Hello & world">
注意: 属性値内の引用符とアンパサンドをエンティティ化することで、値が引用符の外に飛び出さないようにするページ内での URL 表示
入力: search?q=hello&lang=en
出力: search?q=hello&lang=en
用途: URL を HTML に挿入する前に & をエンコードしないと、パーサーが残りを不正なエンティティとして扱う可能性がある非 ASCII 文字 (完全エンコード)
入力: CJK 文字 (例: 中文)
出力: UTF-8 数値形式 中文 (ページが対応していれば名前付きエンティティも可)
用途: レガシーな HTML に任意の Unicode を安全に埋め込む。最近のページは通常 UTF-8 を直接使用よくある質問
HTML エンコードはどの文字を変換しますか?
SGML 予約文字 5 つです。& → &、< → <、> → >、" → "、' → '(または ')。オプションで、UTF-8 を扱えないレガシーシステム向けに非 ASCII 文字を数値実体(&#xNN;)に変換することもできます。
いつ HTML エンコードが必要ですか?
ユーザー提供のテキストを HTML コンテンツに挿入するときは常に必要です。エンコードを怠ることが XSS 脆弱性の根本原因です。HTML 本文、属性値、JavaScript コンテキスト、CSS コンテキスト、URL コンテキストにユーザーコンテンツをエンコードしてください。それぞれのコンテキストで微妙にルールが異なります。
' と ' の違いは何ですか?
両方ともシングルクォートを生成します。' は HTML5 で追加されましたが、HTML4 や古いメールクライアントでは無効です。出力が古いシステムで読まれる場合は ' を使用してください。互換性を最大化するため、ページはデフォルトで ' を出力します。
出力にまだ & が含まれているのはなぜですか?
入力にすでに & のような HTML 実体が含まれている場合、エンコードすると &amp; になります。これは正しい動作です。入力中のアンパサンドは実体ではなくリテラル文字として扱われたためです。ソースがすでに実体エンコードされている場合は、先にデコードしてください。
絵文字は変換されますか?
絵文字は有効な Unicode で、最近の HTML はそれらを通常の文字として扱います。対象システムが ASCII のみを要求しない限り、エンコードは不要です。「非 ASCII を数値実体に変換」を有効にすると、&#xNNNN; 形式に変換されます。
URL エンコードと同じですか?
いいえ。URL エンコード(パーセントエンコード)は、URL で使用するために安全でない文字を %NN シーケンスに置き換えます。HTML エンコードは、HTML で使用するために名前付き実体や数値実体に置き換えます。コンテキストに応じた適切なツールを使用してください。混同すると二重エンコードのバグを生みます。
変換はローカルで行われますか?
はい。エンコードとデコードはブラウザ内で行われます。貼り付けたテキストはアップロードされません。