HTMLで特別な意味を持つ文字を、実体参照(< など)に変換します。コードをそのまま表示したいとき、入力値を安全に扱いたいときに使えます。
エスケープされる文字
| 文字 | 実体参照 | 意味 |
|---|---|---|
| < | < | タグの開始 |
| > | > | タグの終了 |
| & | & | 実体参照の開始 |
| " | " | 属性値の囲み |
| ' | ' | 属性値の囲み(シングル) |
なぜエスケープが必要か
ブラウザは < を見つけるとタグの開始と解釈します。ソースコードの説明で「<div>」と書きたいのにタグとして解釈されてしまうのは、このためです。
また、ユーザーの入力をそのままHTMLに埋め込むと、悪意あるスクリプトが実行されるおそれがあります(クロスサイトスクリプティング/XSS)。入力値の表示時にエスケープすることが、基本的な対策の一つです。
実装時の注意
- エスケープは「表示する直前」に行うのが原則です
- & を先に処理しないと、二重エスケープになります(本ツールは順序を考慮しています)
- 多くのテンプレートエンジンは自動でエスケープします。手動での二重処理に注意してください
- 属性値の中では、引用符のエスケープが特に重要です
よくある質問
Q 実体参照とは何ですか?
< のように、特別な意味を持つ文字を別の書き方で表す方法です。ブラウザは表示時に元の文字に戻します。
Q デコードもできますか?
できます。実体参照を元の文字に戻す方向にも対応しています。
Q 二重エスケープとは?
&lt; のように、エスケープ済みの文字列を再度エスケープしてしまう状態です。画面に < がそのまま表示されます。
Q XSS対策にはこれだけで十分ですか?
表示時のエスケープは基本の一つですが、埋め込む場所(HTML本文・属性・JavaScript内)ごとに適切な処理が必要です。
