HTMLエスケープ / アンエスケープ

エスケープ・アンエスケープの手順

1. テキストを貼り付ける。変換したいテキストやHTMLを上の欄に入力します。
2. 変換の向きを選ぶ。「エスケープ」で特殊文字をエンティティに、「アンエスケープ」でエンティティを元の文字に戻します。
3. 必要に応じて追加指定する。バッククォートやスラッシュも変換したい場合はチェックを入れます。テンプレートやスクリプトの中に埋め込むときに使います。
4. 結果をコピーする。変換されたテキストが下に表示されるので、そのままページやエディタに貼り付けてください。

このツールでできること

HTMLでは、いくつかの文字が特別な意味を持っています。本文に<と書けばブラウザはタグの始まりだと解釈しますし、&と書けばエンティティが続くものとして扱います。エスケープは、こうした文字を安全な代替表記に置き換えて、タグとしてではなく文字そのものとして表示させる処理です。アンエスケープはその逆で、エンティティを元の読みやすい文字に戻します。

入力した内容はすべてブラウザ内で処理されます。サーバーに送信されることは一切ないため、貼り付けた内容は手元に保たれたままです。

エスケープが必要な理由

身近な理由は「表示」です。ブログでHTMLの書き方を解説していて、<div>タグそのものを見せたいとき、そのまま書くとブラウザは本物のdivとして解釈してしまい、例として見せたかったコードが画面から消えてしまいます。エスケープすれば、文字としてそのまま表示できます。

もうひとつ、より重要な理由が安全性です。利用者が入力した文章をエスケープせずにページへ出力すると、タグのように見えるものがタグとして解釈されてしまいます。コメント欄が、他の人のブラウザでスクリプトを実行させる入口になりうるということです。これがクロスサイトスクリプティング（XSS）と呼ばれる問題で、出力時のエスケープが基本的な対策になります。なお、このツールはコードの断片を手元で確認・準備するのに便利ですが、アプリケーションの中では、フレームワークやテンプレートエンジンの機能に任せるのが確実です。すべての値に対して漏れなく処理されるためです。

よくある質問