HTMLエスケープ — HTML特殊文字・エンティティ変換ツール
<、>、&、"、' などのHTML特殊文字を、ブラウザがコードとして解釈しないようHTMLエンティティへ変換します。
変換済みエンティティを元の文字へ戻すデコードにも対応しています。
すべての処理はブラウザ内で完結し、入力内容は外部へ送信されません。
URL内の特殊文字を扱う場合は URLエンコード・デコード を、
テキストデータを安全に扱う場合は Base64エンコード・デコード をご利用ください。
HTMLエスケープが必要な理由 — XSS対策と安全な表示
HTML特殊文字をエスケープしない場合、ブラウザが入力内容をコードとして実行する可能性があります。
たとえば <script>alert('XSS')</script> をそのまま表示するとスクリプトが実行されますが、エスケープすると文字列として表示されます。
掲示板、コメント、検索結果など、ユーザー入力を表示するすべての場面でエスケープ処理は重要です。
バックエンド側で対策済みでも、出力確認や検証用途として便利に利用できます。
主要なHTMLエンティティコード — エスケープ対象文字一覧
HTMLでよく使用されるエスケープ対象文字と対応するエンティティコードです。
| 文字 | エンティティコード | 説明 |
|---|---|---|
| < | < | タグ開始記号 |
| > | > | タグ終了記号 |
| & | & | エンティティ開始記号 |
| " | " | 属性値のダブルクォート |
| ' | ' | 属性値のシングルクォート |
< と > はHTMLタグとして解釈され、& はエンティティの開始文字として扱われるため優先して変換します。
ダブルクォートとシングルクォートは属性値内でHTML構文を崩さないためにエスケープが必要です。
は連続した空白や改行しない空白を表現するときによく使われます。
HTMLアンエスケープとは — エンティティを元の文字へ戻す方法
アンエスケープはエスケープの逆処理です。<、>、& のようなHTMLエンティティを、<、>、& の元の文字へ戻します。
アンエスケープは、APIレスポンスやデータベースに保存されたHTMLエンティティ文字列をHTMLへ復元したり、
メールテンプレートや外部システムから取得したエスケープ済みコンテンツを編集前の状態へ戻したり、
サーバー側で二重エンコードされた文字列を調査・検証するときによく利用されます。
ツール上部の ESCAPE / UNESCAPE ボタンで双方向の変換を切り替えられます。
HTMLエスケープ形式の比較 — HTML・JavaScript・JSONの違い
同じ特殊文字でも、利用する場所によってエスケープ方法は異なります。
HTMLでは <、>、&、" のようなHTMLエンティティを使用します。HTMLソースへ直接埋め込むテキストに適しています。
JavaScript文字列では \"、\'、\\ のようなバックスラッシュ形式のエスケープを使用します。JavaScriptコード内に埋め込む文字列で利用します。
JSONでは仕様に従ってダブルクォートや制御文字をエスケープします。APIレスポンスやJSONファイルへ安全にテキストを含める用途で利用されます。
このツールではHTML、JavaScript、JSONの3種類に対応しており、用途に合わせた形式を選んでそのままコピーできます。
言語別HTMLエスケープリファレンス — サーバー側での処理方法
フロントエンドツールで結果を確認した後も、実際のアプリケーションではサーバー側でHTMLエスケープを自動処理することが推奨されます。
| Language | エスケープ方法 |
|---|---|
| Java (Spring) | HtmlUtils.htmlEscape(str) |
| Java (Commons Text) | StringEscapeUtils.escapeHtml4(str) |
| JavaScript | textContent / createTextNode() |
| Python | html.escape(str) |
| PHP | htmlspecialchars($str, ENT_QUOTES) |
| Go | html.EscapeString(str) |
| Ruby | CGI.escapeHTML(str) |
Thymeleaf、Jinja2、Blade などのテンプレートエンジンは、th:text や {{ }} の式で通常自動エスケープされます。
ただし、th:utext や raw フィルターのようにHTMLをそのまま出力する場合は、出力内容を必ず確認してください。
よく使われるHTMLエンティティ — すぐ使えるコピー用リファレンス
実務でよく使用されるHTMLエンティティをまとめました。クリックしてそのままコピーできます。
| 文字 | 名前付き文字参照 | 数値文字参照 | 説明 |
|---|---|---|---|
| < | < | < | 小なり記号・タグ開始 |
| > | > | > | 大なり記号・タグ終了 |
| & | & | & | アンパサンド |
| " | " | " | ダブルクォート |
| ' | ' | ' | シングルクォート |
| 空白 | |   | 改行しない空白 |
| © | © | © | 著作権記号 |
| ® | ® | ® | 登録商標 |
| ™ | ™ | ™ | 商標記号 |
| — | — | — | 全角ダッシュ |
名前付き文字参照（<形式）と数値文字参照（<形式）は同じ結果になります。
数値文字参照は名前が定義されていない文字にも使用できます。
よくあるご質問
はい。まったく異なる処理です。
HTMLエスケープは、特殊文字を < や & のような形式へ変換し、ブラウザがHTMLタグやエンティティとして解釈しないようにします。
URLエンコードは、URLで安全に扱えない文字を %2F や %20 のようなパーセントエンコードへ変換します。
用途が異なるため、混同すると意図しない結果になることがあります。
URLパラメータ経由でHTMLコンテンツを扱う場合は、まずURLエンコードを行い、表示時にHTMLエスケープを別途適用してください。
はい。エスケープはXSS対策以外でも重要です。
代表例として、ユーザー入力をHTML属性へ直接埋め込むケースがあります。
たとえば、引用符を含む値を href や value 属性へエスケープせず挿入すると、属性構造が崩れて意図しない動作につながる場合があります。
さらに、メールテンプレート、PDF生成、CSV出力などHTML以外の出力先でも、形式ごとに適切なエスケープ処理が必要です。
th:text 属性を使用すると、Thymeleaf が自動的にHTMLエスケープを行います。
たとえば model に test が含まれている場合、th:text で出力するとHTMLとして解釈されず、そのまま文字列として表示されます。
一方、th:utext はHTMLをエスケープせずそのまま出力するため、信頼できない入力に使用するとXSSの原因になる可能性があります。
th:utext は、管理済みのHTMLコンテンツなど信頼できるソースに限定して利用してください。
送信されません。エスケープ・アンエスケープ処理はすべてブラウザ内で実行されます。
HTMLコード、スクリプト、APIキーなど、ツールへ入力したデータが外部サーバーへ送信されることはありません。
このツールでは、<、>、&、"、' など、HTMLで通常エスケープが必要な特殊文字のみ変換します。
Unicode文字、絵文字、そして多くの現代的な文字体系は、HTML5でUTF-8を使用している場合、通常は追加のHTMLエスケープなしで正しく表示できます。
ただし、ASCIIのみを扱うレガシー環境では、直接文字を出力せずUnicodeコードポイントによる数値文字参照を利用する場合があります。その際は文字エンコーディングを別途考慮する必要があります。
厳密には異なりますが、実際には同じ意味で使われることも少なくありません。
HTMLエンティティ（HTML Entity）は、<、&、© のように特定の文字を表現するためにHTMLで定義された記法です。
HTMLエスケープ（HTML Escape）は、特殊文字をHTMLエンティティへ変換し、ブラウザがマークアップとして解釈しないようにする処理を指します。
つまり、エスケープ処理によって生成されたものがHTMLエンティティです。検索結果や技術文書では、両者がほぼ同義で扱われることがあります。