HTMLの特殊文字をエスケープ・アンエスケープ変換
HTMLの特殊文字(<, >, &, " 等)をHTMLエンティティ(< > & 等)に変換する無料ツールです。XSS(クロスサイトスクリプティング)対策、HTMLテンプレートへのデータ埋め込み、技術ブログでのコード表示などに使います。
ユーザーが入力したテキストをそのままHTMLに埋め込むと、悪意のあるスクリプトが実行されるXSS脆弱性が発生します。特に <script> タグを含む入力は必ずエスケープする必要があります。このツールで変換結果を確認しながら、安全なHTML出力を構築できます。
HTMLエンティティを元の文字に戻すアンエスケープ機能も搭載しています。すべてブラウザ内で処理されます。
HTMLエスケープとは、HTMLの構文上で特別な意味を持つ文字を、ブラウザに「文字そのもの」として表示させるためのエンティティ参照(実体参照)へ置き換える処理のことです。たとえば「小なり記号」(<) はタグの開始を表す特別な記号ですが、これをそのまま本文に書くとブラウザはタグの一部だと誤認識してしまいます。そこで < という形に変換しておくことで、ブラウザはタグではなく「小なり」という1文字として正しく描画します。
エスケープが必要な理由は大きく2つあります。1つはこのタグの誤認識防止です。コードスニペットやサンプルHTMLを記事に載せるとき、エスケープしないと意図せずタグとして解釈され、レイアウトが崩れたり内容が消えたりします。もう1つはXSS(クロスサイトスクリプティング)対策です。ユーザーが入力した文字列をそのままページに出力すると、悪意ある <script> が実行される恐れがあります。出力時に特殊文字をエスケープしておけば、入力はスクリプトではなく単なる文字列として扱われ、攻撃を防げます。アンパサンド(&)はエンティティそのものの開始記号なので、最初に変換しないと二重変換が起きる点にも注意が必要です。
このツールのエスケープは、次の5文字を対応するエンティティ参照へ変換します。実装の出力に完全に一致した対応表です。
| 元の文字 | エンティティ参照 | 読み・意味 |
|---|---|---|
| < | < | 小なり(less than) |
| > | > | 大なり(greater than) |
| & | & | アンパサンド |
| " | " | ダブルクオート |
| ' | ' | シングルクオート(数値文字参照) |
シングルクオートは名前付きの ' ではなく数値文字参照 ' に変換します。' は古いHTML4では未定義のため、互換性の高い ' を採用しています。アンエスケープ側では、これら5つに加えて © や などブラウザが認識する名前付き参照も元の文字へ戻せます。