HTMLをエスケープ・アンエスケープする方法
- 特殊文字をエンティティに変えるならエンコード（エスケープ）、エンティティを普通の文字に戻すならデコード（アンエスケープ）を選びます。
- テキストやマークアップを上の欄に貼り付けます。入力に合わせて下の結果が変わります。
- エンコードした結果がASCIIしか扱えないシステムを通る場合は、ASCII以外の文字もエンコードをオンにします。
- コピーを押すか、⇅ 入れ替えで結果を逆のモードに戻し、元のテキストになるか確かめます。
エンコードで変わる文字
エンコードで置き換わるのは、ブラウザによるページの解釈を変えてしまう可能性のある5文字だけです。
| 文字 | 変換後 | 理由 |
|---|---|---|
& | & | エンティティの始まりなので、そのままだと誤って解釈されることがある |
< | < | タグを開く |
> | > | タグを閉じる |
" | " | ダブルクォートで囲んだ属性値を終わらせる |
' | ' | シングルクォートで囲んだ属性値を終わらせる |
5文字は一度にまとめて置き換えられるので、エスケープで新たに加わった & がもう一度エスケープされることはありません。カーリークォート、アクセント付きの文字、日本語、絵文字などその他の文字は、ASCIIのオプションをオンにしない限りそのままです。オンにすると、ASCII以外のすべての文字がUnicodeのコードポイントに基づく10進数の数値参照になります。é は é、€ は €、中 は 中、😀 は 😀 です。
デコードは、HTMLで定義された名前付きエンティティすべて（é、 、♥ など）と、10進数（é）・16進数（é）の参照を解釈します。入力に含まれるタグは文字のまま残り、描画も実行もされません。
例
ブログ記事にコードを載せる
if (a < b && b > c) を貼り付けると、if (a < b && b > c) が返ります。これを <pre><code> の中に入れれば、ページが崩れずに元のコードがそのまま表示されます。
引用符や約物を含むマークアップ
入力欄のサンプル <p class="note">Tom & Jerry’s “best” café</p> は <p class="note">Tom & Jerry’s “best” café</p> になります。ASCII以外の文字のエンコードをオンにすると、カーリーアポストロフィ、カーリークォート、é も変わります：Jerry’s “best” café。
二重にエスケープされたテキストを直す
& が表示されるはずの場所に & と出ている（Tom & Jerry）なら、保存時に一度、表示時にもう一度エスケープされています。一度デコードして結果を確認し、エンティティが残っている場合だけもう一度デコードしてください。根本的な対策は、出力するときの一か所だけでエスケープすることです。
エスケープとクロスサイトスクリプティング（XSS）
サイトがユーザーの入力をエスケープせずにページへ埋め込むと、訪問者が <img src=x onerror="alert(1)"> のような内容を送り込み、そのページを見た全員のブラウザで実行させることができます。エスケープすれば同じ入力は <img src=x onerror="alert(1)"> となり、無害な文字として表示されます。
この種のエスケープが守るのは、タグの間のテキストと、引用符で囲まれた属性値の2か所です。<script> ブロック、インラインのイベントハンドラー、CSS、引用符のない属性、href などのURLの中では不十分です。たとえば javascript: のリンクには特殊文字がひとつも要りません。実際のアプリケーションではテンプレートエンジンの自動エスケープに任せ、このツールは個々の文字列を調べたり準備したりするのに使ってください。
ヒント
- UTF-8で保存したページには、é、ü、日本語、한글をそのまま書けます。わざわざエンコードするとソースが読みにくくなるだけです。ASCIIのオプションは、古いメールテンプレート、旧式のCMSの入力欄、文字コードを管理できないファイル向けです。
はノーブレークスペース（U+00A0）にデコードされます。スペースに見えてもスペースではないため、プログラムでの検索や比較が失敗する原因になります。完全一致が必要なら置き換えておきましょう。- エンティティはHTMLとXMLのものです。リンクにはURLエンコードを、JSONの文字列の中ではJSON独自のエスケープを使ってください（文字列が正しいかはJSON整形で確認できます）。
よくある質問
' と ' の違いは何ですか？
どちらもアポストロフィを表します。' はXMLとHTML5では定義されていますが、HTML 4にはありませんでした。数値形式の ' はどのブラウザやメールソフトでも通じるため、このツールはこちらを使います。
名前付きエンティティと数値参照はどちらを使うべきですか？
どちらも同じ文字にデコードされます。© のような名前付きのほうが読みやすく、数値参照はすべてのUnicode文字に使えますが、名前があるのは一部の文字だけです。
普通のテキストでは > をエスケープしなくてよいのはなぜですか？
厳密には、テキスト中の > 単体は無害で、必ずエスケープが必要なのは < と & だけです。5文字すべてを一貫してエスケープしておけば、同じ結果を引用符で囲んだ属性の中でも安全に使えます。
デコードすると貼り付けたコードが実行されますか？
いいえ。デコードはエンティティを文字に変えるだけで、結果は読み取り専用の欄にプレーンテキストとして表示されます。