HTMLエンティティ・エスケープ/アンエスケープ

HTMLコードを文字として表示したいときに,&,<,>,",'の5文字を実体参照へ置換します.逆変換はこの5文字の表記と&apos;だけが対象です.任意の名前付き・数値文字参照を網羅する復号器ではなく,XSS対策全体を担うサニタイザーでもありません.

読み込み中...

このツールが向いている用途

操作欄に戻る ↑

テキスト内の特定記号5種(&, <, >, ", ')と対応するHTML実体参照を相互変換し、入力側・出力側の双方をクリップボードへ即時コピーする用途に適しています。

まず試せること

「<p>A & B</p>」を入力欄に貼り付け、出力欄に「&lt;p&gt;A &amp; B&lt;/p&gt;」と即時エスケープ変換される動作を確認してみてください。

利用条件

逆変換は主要5種のみの一段階復元に対応しています。任意の名前付き文字参照や数値文字参照の完全デコード、スクリプト実行、HTMLサニタイズ(無害化)は行いません。

ZeroToolsのブラウザ内処理とプライバシー

ZeroToolsは,入力内容を端末内で処理するツールを中心に提供しています.各ツールの対応範囲と制限を確認して利用してください.

データの取り扱い・プライバシー方針
目次・記事構成
第1章

解説・技術仕様

第1章:対象となる5つの特殊文字とその変換仕様

Webページを記述するためのマークアップ言語であるHTMLにおいて,特定の文字はタグの開始や終了,属性値の囲み文字など,構造を定義するための特別な意味(メタ文字としての役割)を持っています.これらの文字を単なるテキストとして画面上に表示させたい場合,そのまま記述するとブラウザのパーサーがHTMLのコードの一部であると誤認し,表示の崩れや意図しない動作を引き起こす原因となります.これを防ぐための基本的な処理がHTMLエスケープです.

本ツールは,HTMLの基本構文において最も重要かつ頻繁にエスケープの必要性が生じる以下の5つの特殊文字の変換に特化して実装されています. ・「&」(アンパサンド)は「&amp;」に変換されます. ・「<」(小なり記号/レスザン)は「&lt;」に変換されます. ・「>」(大なり記号/グレーターザン)は「&gt;」に変換されます. ・「"」(二重引用符/ダブルクォーテーション)は「&quot;」に変換されます. ・「'」(単一引用符/シングルクォーテーション)は「&#39;」に変換されます.

これらはHTMLで特別な意味を持つ代表的な5文字です.必要な変換はテキスト,属性値,URL,JavaScript等の出力文脈で異なります.例えば,ユーザーの入力フォームから <div class="test">A & B's</div> という文字列が送信されたとします.これをそのままHTML内に出力すると,ブラウザは新たなdivタグの始まりであると解釈してしまいますが,本ツールを用いてエスケープ処理を行うことで, &lt;div class=&quot;test&quot;&gt;A &amp; B&#39;s&lt;/div&gt; という文字参照を使った表記に置換されます.通常のHTMLテキストとして扱う場面では,タグとして解釈されにくくなります.実際の安全要件は出力先の文脈によって異なります.本ツールは,余分な機能を持たせず,この5文字の機械的な変換だけを提供します.

第2章:変換処理の順序と二重エスケープへの注意

テキスト内に複数の特殊文字が混在している場合,単なる文字列置換の繰り返しでは意図しない結果を招くことがあります.特に問題となるのが「アンパサンド(&)」の取り扱いです.HTMLエンティティはすべてアンパサンドから始まり,セミコロンで終わる形式(例:&lt;)をとるため,置換処理の順序を誤ると,一度変換したエンティティの中のアンパサンドが再度変換されてしまう「二重エスケープ」という現象が発生します.

本ツールの内部で稼働しているエスケープ関数は,一回の変換処理で生成した参照を再度置換しないために,置換処理の実行順序を厳密に制御しています.具体的には,入力された文字列に対して一番最初に「&」を「&amp;」へと置換する処理を適用します.文字列内に存在する独立したアンパサンドをすべて無害化した後で,残りの「<」「>」「"」「'」に対する置換を順次実行していきます.この順序により,同じ処理の後半で生成済み参照のアンパサンドを再変換することを避けます.ただし,入力時点ですでに&amp;等を含む場合は先頭の&も変換されるため,自動的な二重エスケープ判定ではありません.

同様に,エンティティから元の文字へと戻すアンエスケープ関数においても,処理順序は極めて重要な意味を持ちます.逆変換においては,エスケープ時とは逆に,「&amp;」から「&」への置換を一番最後に実行するように設計されています.もし仮に「&amp;」の置換を先に実行してしまうと,例えばテキスト内に「&lt;」という文字列があった場合,最初の処理で「&lt;」となり,その後の処理でさらに「<」へと意図せず段階的にデコードされてしまうリスクがあります.本ツールは,「&lt;」や「&quot;」などの他のエンティティをすべて元の記号に復元した最終段階で,最後に残った「&amp;」のみを「&」に戻すという段階的なアプローチを採用することで,対象を限定した予測しやすい文字列変換にしています.

第3章:限定的な逆変換(アンエスケープ)の仕様と範囲

本ツールの重要な特徴の一つとして,逆変換(アンエスケープ)の対応範囲が意図的に限定されている点が挙げられます.現在のHTML5の仕様体系には,数学記号やギリシャ文字,各種の記号類を含む数多くの名前付き文字参照(エンティティ)が定義されています.さらに,10進数や16進数を用いた任意の数値文字参照も存在します.

しかし,本ツールはこれらすべてのHTMLエンティティの網羅的な復号を行うことはしません.DOM解析や完全なHTMLパーサーとしての役割を持たず,前述した特定の対象文字を素早く行き来させることのみを目的としているためです.したがって,本ツールにおける逆変換の対象は,第1章で定義したエスケープ出力結果である5種類(&amp;,&lt;,&gt;,&quot;,&#39;)と,単一引用符のもう一つのエンティティ表現である「&apos;」のみに厳格に限定されています.

これ以外のエンティティが入力された場合,ツールはそれを変換対象とは見なさず,入力された文字列をそのままプレーンテキストとして保持して出力します.例えば,スペースを表す「&nbsp;」や,著作権マークを表す「&copy;」,その他の数値文字参照などがテキストエリアに入力されたとしても,それらが元の記号や空白文字に変換されることはありません.この仕様は,予期せぬ文字化けや意図しないデータの改変を防ぐためのものであり,ユーザーに対してツールが「何を変換し,何を変換しないのか」という明確な境界線を提示しています.本ツールを利用する際は,この限定的な逆変換の仕様を正しく理解し,任意のHTMLコンテンツ全体をパースする目的ではなく,基本的な5文字の相互変換ユーティリティとしてご活用ください.

第4章:双方向のテキスト編集とクリップボード連携機能

ユーザーの作業効率を最大化するため,本ツールは直感的かつシームレスなユーザーインターフェースを備えています.画面上には「元のHTMLテキスト(デコード済)」を入力するエリアと,「エスケープ済テキスト(HTMLエンティティ)」を入力するエリアの2つが並行して配置されています.この2つのテキストエリアは,内部のステート管理によってリアルタイムに双方向で連動しています.

左側のエリアに生のHTMLタグやテキストを入力すると,キーストロークのたびに即座にエスケープ処理が実行され,右側のエリアにエンティティ化された結果が表示されます.逆に,すでにエスケープされているデータを右側のエリアに貼り付けたり編集したりすると,即座にアンエスケープ処理が走り,左側のエリアに元のテキストが復元されます.この双方向のバインディングにより,ユーザーは自分が今持っているデータがどちらの状態であっても,迷うことなく適切なエリアに入力するだけで目的の結果を得ることができます.

さらに,各入力エリアの下部には,現在入力されているテキストの文字数をカウントして表示する機能が備わっており,データ長の確認に役立ちます.また,変換結果を他のアプリケーションやエディタで利用するためのクリップボード連携機能も搭載されています.「コピー」ボタンをクリックするだけで,テキストエリアの内容がOSのクリップボードに転送されます.コピーが成功すると,ボタンのアイコンが一時的に緑色のチェックマークに変化し,視覚的なフィードバックを提供するため,クリップボードAPIが成功した場合にコピー完了を確認できます.ワンクリックで実行できる「サンプル」読み込み機能や「すべてクリア」機能も備えており,これらの一連の動作はすべてブラウザの内部でのみ処理されるため,軽快な操作性を実現しています.

第5章:HTMLサニタイズとの根本的な違いと限界

Web開発やセキュリティの文脈において,「エスケープ」と「サニタイズ」という用語は混同されがちですが,これらは技術的に全く異なる処理を指します.本ツールを安全に運用するためには,この両者の根本的な違いと,本ツールの機能的限界を正しく認識することが不可欠です.

本ツールが提供する「エスケープ」とは,文字列内に出現する特定の文字を,単純に別の文字列(エンティティ)に置換する処理に過ぎません.入力されたデータの意味や文脈を理解する能力はなく,ルールに従って機械的に5つの特殊文字を変換するだけです.一方「サニタイズ」とは,入力されたHTMLの構造を解釈し,安全なタグや属性のみを許可し,悪意のあるスクリプトを実行する可能性のあるタグや,イベントハンドラ属性(onloadなど)を取り除く処理を指します.

本ツールには,このようなHTMLタグの許可リストやDOMツリーを解析するロジックは一切実装されていません.したがって,本ツールのエスケープ処理を適用したからといって,あらゆるクロスサイトスクリプティング(XSS)攻撃を完全に防止できると保証するものではありません.例えば,ユーザーが入力したHTMLの装飾を活かしつつ,危険なスクリプトだけを削除したい場合には,本ツールのような単純なエスケープではすべてのタグが無効化されてしまい,要件を満たせません.そのようなケースでは,本ツールではなく,専用のHTMLサニタイザライブラリを使用する必要があります.本ツールはあくまで「文字列全体をテキストとして出力する」ための単純な置換ツールであるという限界を理解した上で活用することが求められます.

第6章:出力文脈(コンテキスト)別の安全確認と適切な運用

Webアプリケーションにおいてエスケープ処理を行う際,最も注意すべき点は「そのデータをHTML内のどこ(コンテキスト)に出力するのか」によって,安全性を確保するための要件が変わるということです.本ツールが実行する5文字の変換は,データを通常のHTML要素のコンテンツ(例:&lt;p&gt;タグの中のテキスト)として出力する場合においては,ブラウザがタグとして解釈することを防ぐため,十分に効果を発揮します.

しかし,出力先がHTMLの属性値である場合(例:&lt;input value=&quot;...&quot;&gt;),注意が必要です.属性を囲む引用符としてダブルクォーテーションが使われている場合,データ内のダブルクォーテーションをエスケープしていれば枠から抜け出されることは防げますが,引用符が省略されている特殊なケースなどでは,さらなる配慮が必要になります.引用符も変換対象ですが,これだけで安全性を判断せず,出力先の構造を開発者が正しく把握していることが前提となります.

さらに重要な点として,本ツールの処理結果をそのままJavaScriptの文字列リテラル内に出力してはいけません.JavaScriptのコンテキストでは,HTMLエンティティのエスケープだけでは不十分であり,改行コードやバックスラッシュなど,JavaScriptパーサーにとって意味を持つ文字に対する適切なエスケープが必須となります.本ツールはJavaScriptエスケープや,URLパラメータに組み込むためのパーセントエンコーディングの機能は備えていません.ツールが生成した文字列を盲目的にあらゆる場所へ埋め込むのではなく,実際の出力コンテキストに合致しているかを必ず確認し,適切な運用を心がけてください.

よくある質問(FAQ)

A.
&を&amp;,<を&lt;,>を&gt;,ダブルクォートを&quot;,シングルクォートを&#39;へ変換します.&を最初に処理します.
A.
できません.&amp;,&lt;,&gt;,&quot;,&#39;,&apos;だけが対象です.&nbsp;や一般の数値文字参照等はそのまま残ります.
A.
判定しません.すでに&amp;等を含む文字列を左欄へ入れると,先頭の&も変換されます.生文字は左欄,変換済み文字列は右欄へ入れてください.
A.
5文字の置換だけで,タグや属性の許可・削除,URLやJavaScript文脈の検査は行いません.出力先に合う対策を別途使用してください.