HTMLエスケープ・アンエスケープツール【無料・登録不要】特殊文字と文字参照を相互変換|XSS対策の基本も解説
HTML の中で特別な意味を持つ記号(& < > " ')を、< のような文字参照に変換(エスケープ)したり、文字参照を元の文字に戻したり(アンエスケープ)できる無料ツールです。クォートを変換するかどうかや、' の書き方(' / ' / ')を選べるほか、日本語などの文字を数値参照(あ の形)にすることもできます。
アンエスケープは、HTML の標準(HTML Living Standard)にある名前付き文字参照 2,231 件すべてと数値参照に対応し、ブラウザが HTML を読むときと同じルールで変換します。変換結果は HTML として表示せず、文字のまま表示するので、怪しい HTML を貼り付けても安全です。入力した文字はお使いのブラウザの中だけで処理され、サーバーには一切送信されません。
入力した文字はお使いのブラウザ内だけで処理されます。サーバーへの送信や保存は一切行いません。アンエスケープした結果は HTML として表示せず、文字のまま表示します。
使い方
文字を HTML エスケープする
- 「変換」で「エスケープ(< → <)」を選びます。
- 「変換する記号」を選びます。迷ったら、最初から選ばれている「すべて」のままにします。
- 入力欄に文字や HTML を入力します。入力と同時に、出力欄に結果が表示されます。
- 「出力をコピー」を押すと、結果をクリップボードにコピーできます。
たとえば <b>Tom & Jerry's</b> は、<b>Tom & Jerry's</b> に変換されます。ブログの記事にプログラムのコードを載せるときや、HTML のソースをそのまま画面に表示したいときに使えます。
エスケープのオプション
| オプション | 選べるもの | 使いどころ |
|---|---|---|
| 変換する記号 | すべて(& < > ” ‘)/ & < > “/ & < > だけ | 属性値(title="…" など)に入れる文字は「すべて」にします。タグの間の文章だけに使うなら & < > だけでも足ります。 |
| ‘ の書き方 | '/'/' | どれも同じ「’」を表します。' は古い HTML 4.01 の一覧にはないため、古い環境も考えるなら数値参照(' か ')が無難です。 |
| 日本語などの文字 | そのまま/数値参照(10 進数)/数値参照(16 進数) | 文字コードを UTF-8 にできない古いシステムなどに、日本語を ASCII 文字だけで渡したいときに使います。「あ」は あ(16 進数なら あ)になります。 |
入力にすでに & や < などの文字参照が含まれているときは、「二重エスケープ」になる可能性を知らせます(くわしくは「よくある質問」を参照)。
文字参照を元に戻す(アンエスケープ)
- 「変換」で「アンエスケープ(< → <)」を選びます。
- 入力欄に、
<や'を含む文字列を貼り付けます。 - 出力欄に、元の文字に戻した結果が表示されます。何個の文字参照を戻したかも表示されます。
「出力を入力に移して逆変換」を押すと、出力をそのまま入力欄に移し、エスケープとアンエスケープを切り替えます。正しく元に戻るかを確かめたいときに便利です。
次のような文字参照は、標準のルールに従って変換したうえで、注意を表示します。
- 「;」で終わっていないもの:
©2026は「©2026」になります(後で説明する「古い書き方」のため)。「入力欄の「;」がない参照を選択」を押すと、最初の 1 か所を入力欄で選択します。 - 一覧にない名前:
&foo;のような参照は変換せず、そのまま残します。 - 文字として使えない番号:
�、サロゲート(U+D800〜U+DFFF)、U+10FFFF より大きい番号は「�」(U+FFFD)にします。
属性値の中の文字列として読む
アンエスケープのときだけ表示されるオプションです。HTML の標準では、href="…" などの属性値の中に限り、「;」のない古い名前の直後が「=」か英数字のときは変換しません。たとえば ?a=1©=2 は、文章の中では「?a=1©=2」になりますが、属性値の中ではそのまま「?a=1©=2」として読まれます。リンクの URL などを戻すときはチェックを入れてください。
HTMLエスケープとは?
HTML では、< はタグの始まり、& は文字参照の始まり、" と ' は属性値の区切りという特別な意味を持っています。そのため、これらの記号を「ただの文字」として画面に出したいときは、文字参照という別の書き方に置き換えます。これが HTML エスケープです。
| 文字 | 名前付き文字参照 | 数値参照(10 進数) | 数値参照(16 進数) |
|---|---|---|---|
| & | & | & | & |
| < | < | < | < |
| > | > | > | > |
| “ | " | " | " |
| ‘ | ' | ' | ' |
文字参照には、©(©)のように名前で書く「名前付き文字参照」と、Unicode の番号で書く「数値参照」があります。数値参照は &# の後ろに 10 進数で、&#x の後ろに 16 進数で番号を書きます。どの書き方でも、ブラウザに表示される文字は同じです。
「&」を最初に変換する、というのも大切なポイントです。先に「<」を「<」にしてから「&」を変換すると、「&lt;」になってしまいます。このツールは 1 文字ずつ順番に変換するので、この問題は起きません。
コマンドで HTML エスケープする
Python では、標準ライブラリの html モジュールを使います。Windows のコマンドプロンプトや PowerShell で、次のように実行できます。
py -c "import html; print(html.escape('<b>Tom & Jerry</b>'))"
実行すると「<b>Tom & Jerry</b>」と表示されます。html.escape は、最初から " と ' も変換し、' は ' になります(quote=False を付けると & < > だけを変換します)。元に戻すときは html.unescape を使います。
Windows PowerShell では、.NET の WebUtility クラスを使えます。
[System.Net.WebUtility]::HtmlEncode("<b>Tom & Jerry's</b>")
実行すると「<b>Tom & Jerry's</b>」と表示されます(Windows PowerShell 5.1 で確認)。元に戻すときは [System.Net.WebUtility]::HtmlDecode("...") を使います。
このツールのアンエスケープのルール
アンエスケープは、HTML Living Standard の「文字参照」の読み方(ブラウザが HTML を読むときのルール)に合わせています。
- 名前付き文字参照:標準が公開している一覧(entities.json)の 2,231 件をすべて使います。このうち 2,125 件は「;」で終わる名前で、残りの 106 件は
&<©のように「;」なしでも認識される古い書き方です。大文字・小文字は区別します(&は使えますが、&Amp;は一覧にありません)。 - 「;」のない参照:一覧の中で一番長く一致する古い名前を使います。そのため
¬it;は「¬it;」になり、∉は「∉」になります(標準に載っている例と同じ結果です)。 - 数値参照:0、サロゲート(U+D800〜U+DFFF)、U+10FFFF を超える番号は U+FFFD(�)にします。0x80〜0x9F の番号は、標準の表に従って Windows-1252 の文字に読み替えます(例:
€は「€」、–は「–」)。「;」がなくても、数字が続く限りを番号として読みます。
動作は、Python の html.unescape とランダムな 5,000 件の入力で照合し、さらにブラウザ(Microsoft Edge)自身の HTML の読み込み結果とも、文章の中・属性値の中のそれぞれで照合して、すべて一致することを確認しています。なお Python の html.unescape は、 のような制御文字や  のような「非文字」の数値参照を削除しますが、HTML の標準とブラウザは削除せずにその文字として扱うため、このツールも削除しません。
XSS(クロスサイトスクリプティング)を防ぐ仕組み
XSS(クロスサイトスクリプティング)は、Web ページに利用者が入力した文字をそのまま埋め込んでしまうことで、攻撃者が用意したスクリプトが、ほかの利用者のブラウザで動いてしまう脆弱性です。たとえば検索結果のページで「○○ の検索結果」と表示するときに、検索語をそのまま HTML に入れると、検索語が <script>alert(1)</script> だった場合に、そのスクリプトが動いてしまいます。
ここで HTML エスケープをすると、検索語は <script>alert(1)</script> になり、ブラウザはタグとして読まずに文字のまま表示します。これが、HTML エスケープで XSS を防ぐ基本の仕組みです。
埋め込む場所(文脈)ごとに必要な対策は違う
ただし、HTML エスケープが効くのは「HTML の本文」と「クォートで囲んだ属性値」に入れる場合だけです。セキュリティの団体 OWASP がまとめている「Cross Site Scripting Prevention Cheat Sheet」では、文字を埋め込む場所(文脈)ごとに、次のような対策を挙げています。
| 埋め込む場所 | 例 | 必要な対策 |
|---|---|---|
| HTML の本文 | <p>ここ</p> | HTML エスケープ(& < > ” ‘) |
| 属性値 | <input value=”ここ”> | 値を必ず ” か ‘ で囲み、HTML エスケープする |
| URL のパラメーター | <a href=”/search?q=ここ”> | 値を URL エンコードしてから、属性値として HTML エスケープする |
| href・src などの URL そのもの | <a href=”ここ”> | http と https で始まる URL だけを許可する(javascript スキームなどを拒否する) |
| JavaScript の中 | <script>var s = “ここ”;</script> | そもそも埋め込まないのが基本。どうしても必要なら、JavaScript の文字列用のエンコーダーを使い、クォートで囲んだ文字列の中にだけ入れる |
| CSS の中 | <style>…</style> | プロパティの値にだけ入れ、値の形を厳しくチェックする |
HTML エスケープだけでは防げない例
次の例は、どれも HTML エスケープをしたうえで、スクリプトが動いてしまうことを Microsoft Edge で確認したものです。
- javascript スキームの URL:
<a href="ここ">にjavascript:alert(1)を入れると、エスケープの対象になる記号が 1 つもないので、そのまま埋め込まれ、リンクをクリックするとスクリプトが動きます。URL を受け取るときは、http と https で始まるものだけを許可する必要があります。 - イベント属性(onclick など)の中:
<button onclick="search('ここ')">に');alert(1);//を入れると、エスケープで');alert(1);//になります。しかしブラウザは、属性値を JavaScript として実行する前に文字参照を元に戻すので、search('');alert(1);//')が実行されてしまいます。イベント属性に利用者の入力を入れるのはやめて、JavaScript の addEventListener を使います。 - <script> の中:
var n = ここ;のようにクォートで囲まずに埋め込むと、1;alert(1)のような入力には & < > ” ‘ が含まれないので、エスケープしても何も変わらずにスクリプトが動きます。逆に、<script> の中では文字参照が元に戻らないので、エスケープした文字はそのまま「&」のように表示されてしまいます。 - クォートで囲んでいない属性値:
<input value=ここ>にx title=injectedを入れると、空白はエスケープされないので、title 属性が追加されてしまいます。属性値は必ずクォートで囲みます。
実際の開発では
- フレームワークの自動エスケープを使う:React・Vue・Angular や、多くのサーバー側のテンプレートは、値を埋め込むときに自動でエスケープします。React の dangerouslySetInnerHTML のような「自動エスケープを外す機能」は、使う場所を最小限にします。
- JavaScript では textContent を使う:画面に文字を出すときは、innerHTML ではなく textContent や value を使えば、HTML として解釈されません。このツールも、結果はすべて textarea の value に入れて表示しています。
- HTML を入力として受け付けるときはサニタイズする:記事の投稿欄など、利用者に一部の HTML を書かせたい場合は、エスケープではなく、許可したタグだけを残す「サニタイズ」をします。OWASP は DOMPurify というライブラリを勧めています。
よくある質問
' と ' はどちらを使えばいいですか?
今のブラウザでは、どちらも同じ「’」として表示されます。ただし ' は古い HTML 4.01 の文字参照の一覧にはありません(XML と今の HTML の標準にはあります)。どんな環境でも確実に読まれるようにしたいなら、数値参照の ' か ' を使うのが無難です。Python の html.escape は '、.NET の WebUtility.HtmlEncode は ' を使います。
画面に「&」や「<」がそのまま表示されてしまいます
エスケープを 2 回してしまった(二重エスケープ)可能性があります。「&」は「&」に変換されるため、すでにエスケープ済みの「<」をもう一度エスケープすると「&lt;」になり、画面には「<」と表示されます。テンプレートの自動エスケープと、自分で書いたエスケープ処理が重なっていないかを確認してください。このツールでアンエスケープを 1 回すると、1 段階だけ元に戻せます。
エスケープとサニタイズは何が違いますか?
エスケープは、記号を文字参照に置き換えて「すべてを文字として表示する」方法です。サニタイズは、HTML を解析して、危険なタグや属性だけを取り除き「安全な HTML は残す」方法です。利用者の入力を文字として表示するだけならエスケープ、太字やリンクなど一部の HTML を使わせたいならサニタイズを使います。
日本語もエスケープする必要がありますか?
ページの文字コードが UTF-8 なら、日本語はそのまま書いてかまいません。XSS 対策として必要なのは & < > ” ‘ の変換です。日本語を数値参照にするのは、文字コードの違うシステムに ASCII 文字だけで渡したいときなどに限られます。文字コードについては「UTF-8とは?仕組み・バイト数・BOMの有無をわかりやすく解説」で解説しています。
怪しい HTML を貼り付けても大丈夫ですか?
大丈夫です。このツールは、入力も変換結果も HTML として表示せず、文字として textarea に入れるだけなので、<script> などを含む文字列を貼り付けても、スクリプトが動くことはありません。
入力したデータは保存されませんか?
保存されません。変換はすべてお使いのブラウザの中で行われ、サーバーへの送信も保存も行いません。ページを閉じると入力内容は消えます。
関連する記事・ツール
- JavaScriptとは?できること・歴史・Javaとの違いと、ブラウザで今すぐ試す方法
- URLエンコード・デコードツール【無料・登録不要】日本語URLの変換・クエリ分解に対応
- Markdownプレビュー【無料・登録不要】入力と同時に表示・HTML変換|表・コードブロック対応
- JWTデコーダー【無料・登録不要】ヘッダー・ペイロードを表示|有効期限を日本時間で確認
- XML整形ツール【無料・登録不要】インデント・圧縮・構文チェック|サクラエディタ用マクロ付き
- UTF-8とは?仕組み・バイト数・BOMの有無をわかりやすく解説