ToolActToolAct

HTML エンティティエンコードツール

HTMLエンティティ文字をオンライン変換、エンコード・デコード対応、XSS攻撃を効果的に防止

テキスト入力
文字数: 0
バイト数: 0
変換結果
文字数: 0
バイト数: 0

変換方法を選択

HTMLエンティティエンコードとは?

HTMLエンティティエンコードは、特殊文字をHTMLエンティティ参照に変換するメカニズムです。HTMLでは、特定の文字が特別な意味を持つ(<、>、&など)。これらの文字をページに表示するには、エンティティエンコードを使用する必要があります。エンティティエンコードには2つの形式があります:名前付きエンティティ(&lt;など)と数値エンティティ(&#60;など)。名前付きエンティティは読みやすく、数値エンティティは任意のUnicode文字を表現できます。

使い方

使い方

  1. 変換するテキストを左側の入力ボックスに入力または貼り付け
  2. 対応する変換ボタンをクリックしてエンコードまたはデコード方法を選択
  3. 結果が右側に自動的に表示されます
  4. 「コピー」ボタンをクリックして結果をクリップボードにコピー

変換方法

HTML Entity Encode< > & " '' を名前付きエンティティに変換します。XSS対策に適しています
HTML Entity Decode名前付きエンティティを元の文字に復元
Numeric Entity Encode特殊文字を数値エンティティ形式(&#60; など)に変換
Full Encode非ASCII文字をすべてエンコードします。国際化対応に適しています
Full Decodeすべての形式のHTMLエンティティを復元

キーボードショートカット

  • Ctrl + EHTML Entity Encode
  • Ctrl + DHTML Entity Decode

エンコーディングのヒント

  • HTMLソースにテキストを挿入する前に、ユーザーに表示されるテキストをエンコードしてください。特に山括弧、引用符、アンパサンドが含まれる可能性がある場合に重要です。
  • HTMLエンティティエンコーディングはマークアップの解釈を防ぎますが、XSS防御の一部に過ぎず、コンテキストに応じた出力エスケープの代替にはなりません。

利用シーン

HTMLにテキストを挿入する前に安全でない文字をエスケープアンパサンド、山括弧、引用符、アポストロフィを名前付きエンティティに変換し、コピーしたユーザーテキストがマークアップ例としてタグや属性にならないようにします。元の文字列は送信されず、各置換は入力された値に対してローカルで実行されるため、内部ドキュメントや未公開のコピー、機密性の高いスニペットもリモートサービスにテキストをアップロードせずに安全に処理できます。
コピーしたページソースのエンティティをデコードHTMLエンティティ、数値、完全デコードの各モードに切り替えて、&amp;lt; や &#60; などのエンコード済みスニペットを、デバッグやコンテンツ整理中に読みやすいテキストに戻します。デコードはページのDOMパーサーを分離ノードに対して使用するため、入力はネットワークリクエストに送信されず、再構築された文字列は元のブラウザタブ内に留まります。
最小限エンコードと完全エンコードの使い分けHTMLの主要な特殊文字のみをエンコードするにはHTMLエンティティまたは数値モードを使用し、非ASCII文字も数値文字参照に変換する必要があるレガシーシステム向けには完全エンコードを使用します。送信先のエンティティ要件に合わせてモードを選択してください。例えば、人間が読めるHTMLには名前付きエンティティ、古いCMSテンプレートには数値エンティティ、ASCIIのみの通信チャンネルには完全エンコードが適しています。
CMSへの安全な貼り付けのためにアンパサンドと山括弧をエンコードコードスニペットやテンプレート文字列をエンコードモードで処理し、&、<、>、引用符を &amp; &lt; &gt; エンティティに変換してから、リッチテキストエディタ、メールテンプレート、静的サイトのフィールドに貼り付けます。エンコーディングはローカルの正規表現処理で行われるため、出力を明示的にコピーするまで元のスニペットはページ上に残り、ソースに機密性の高い例が含まれている場合に便利です。
検証時にHTML属性内のJSONをデコード数値デコードまたは完全デコードに切り替えて、&#123; &#x7B; &quot; などのシーケンスをリテラル文字に戻し、エンコードされたJSON、Webhookペイロード、保存済みページソースから取得した属性文字列を読み取ることができます。デコードされたJSONは右側の出力エリアに表示され、パーサーエンドポイントに送信されないため、本番環境のログから取得したペイロードフラグメントもブラウザ内で確認できます。

仕組み

HTMLはWHATWG HTML Living Standardで定義された2種類の文字参照を使用します。名前付き文字参照は&で始まり;で終わり、WHATWGが管理するentities.jsonテーブル(現在の仕様で約2,231件、末尾の;なしのレガシーエイリアスである&amp;等を含む)から取得されます。数値文字参照はUnicodeコードポイントを10進数(&#60;)または16進数(&#x3C;)で表記し、サロゲート範囲U+D800〜U+DFFFを除くU+0000〜U+10FFFFの任意の文字をエンコードできます。HTML構文の安全性を保つために必ずエスケープすべき5文字は、&(&amp;)、<(&lt;)、>(&gt;)、"(&quot;)、'(&#39;)です。&apos;はXMLとHTML5の一部ですがHTML 4.01では無効であるため、OWASPはダブルクォートで区切られた属性でレガシーパーサーを経由する必要がある場合に数値形式&#39;の使用を推奨しています。 本ツールのエンコードは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は&#128512;となり、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つの名前は &amp; &lt; &gt; &quot; &apos;(&apos;は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>
出力:  &lt;script&gt;alert(1)&lt;/script&gt;
用途:  ユーザー入力をレンダリングする際、ブラウザがテキストを実際のタグとして解釈するのを防ぐ

属性値のエンコード

入力:  <div title="Hello & world">
出力:  &lt;div title=&quot;Hello &amp; world&quot;&gt;
注意:  属性値内の引用符とアンパサンドをエンティティ化することで、値が引用符の外に飛び出さないようにする

ページ内での URL 表示

入力:  search?q=hello&lang=en
出力:  search?q=hello&amp;lang=en
用途:  URL を HTML に挿入する前に & をエンコードしないと、パーサーが残りを不正なエンティティとして扱う可能性がある

非 ASCII 文字 (完全エンコード)

入力:  CJK 文字 (例: 中文)
出力:  UTF-8 数値形式 &#20013;&#25991; (ページが対応していれば名前付きエンティティも可)
用途:  レガシーな HTML に任意の Unicode を安全に埋め込む。最近のページは通常 UTF-8 を直接使用

よくある質問

HTML エンコードはどの文字を変換しますか?

SGML 予約文字 5 つです。& → &amp;、< → &lt;、> → &gt;、" → &quot;、' → &#39;(または &apos;)。オプションで、UTF-8 を扱えないレガシーシステム向けに非 ASCII 文字を数値実体(&#xNN;)に変換することもできます。

いつ HTML エンコードが必要ですか?

ユーザー提供のテキストを HTML コンテンツに挿入するときは常に必要です。エンコードを怠ることが XSS 脆弱性の根本原因です。HTML 本文、属性値、JavaScript コンテキスト、CSS コンテキスト、URL コンテキストにユーザーコンテンツをエンコードしてください。それぞれのコンテキストで微妙にルールが異なります。

&#39; と &apos; の違いは何ですか?

両方ともシングルクォートを生成します。&apos; は HTML5 で追加されましたが、HTML4 や古いメールクライアントでは無効です。出力が古いシステムで読まれる場合は &#39; を使用してください。互換性を最大化するため、ページはデフォルトで &#39; を出力します。

出力にまだ &amp; が含まれているのはなぜですか?

入力にすでに &amp; のような HTML 実体が含まれている場合、エンコードすると &amp;amp; になります。これは正しい動作です。入力中のアンパサンドは実体ではなくリテラル文字として扱われたためです。ソースがすでに実体エンコードされている場合は、先にデコードしてください。

絵文字は変換されますか?

絵文字は有効な Unicode で、最近の HTML はそれらを通常の文字として扱います。対象システムが ASCII のみを要求しない限り、エンコードは不要です。「非 ASCII を数値実体に変換」を有効にすると、&#xNNNN; 形式に変換されます。

URL エンコードと同じですか?

いいえ。URL エンコード(パーセントエンコード)は、URL で使用するために安全でない文字を %NN シーケンスに置き換えます。HTML エンコードは、HTML で使用するために名前付き実体や数値実体に置き換えます。コンテキストに応じた適切なツールを使用してください。混同すると二重エンコードのバグを生みます。

変換はローカルで行われますか?

はい。エンコードとデコードはブラウザ内で行われます。貼り付けたテキストはアップロードされません。

関連ツール

URL エンコードデコードツール

オンラインURLエンコード・デコードツール。特殊文字、日本語パラメータを自動処理。URLパラメータを素早く変換し、文字化け問題を解決し、データの正確な送信を確保。

Base64 エンコードデコードツール

オンラインBase64エンコード・デコードツール。UTF-8テキスト、日本語、画像変換をサポート。リアルタイムエンコード・デコード、ソフトウェアインストール不要、データはローカル処理でプライバシー保護。

Unicode エンコード変換ツール

オンラインUnicodeエンコード・デコードツール。\uXXXX、&#xXXXX;など複数フォーマットの変換をサポート。国際化テキストを素早く処理し、エンコーディング問題を解決。

HTML フォーマットツール

オンラインHTMLフォーマットツール。コード美化、圧縮、シンタックスハイライトをサポート。ワンクリックで乱れたHTMLコードを整理し、可読性を向上。

XML フォーマットツール

オンラインXMLフォーマットツール。自動インデント美化、構文検証、圧縮処理をサポート。カスタムインデント対応、XMLフォーマットエラーを素早く検出。

JSON エスケープツール

オンラインJSONエスケープツール。JSON文字列のエスケープ・アンエスケープを素早く処理。引用符、改行、タブなど特殊文字の変換に対応、コード埋め込みに便利。