HTMLエスケープ — タグを文字として表示する
< や & といった実体参照への変換と、その逆変換を行います。コード例をそのまま載せたいとき、入力された文章を安全に表示したいときに使います。
HTMLの中に < を書くと、ブラウザはタグの始まりだと解釈します。だから記事にコード例を載せるとき、そのまま書くと表示されずにタグとして動いてしまいます。
エスケープは、これらの文字を「タグではなく文字だ」と伝える書き方に置き換える作業です。< と書けば < が文字として表示されます。
置き換わる文字
| 文字 | 実体参照 | そのまま書くと |
|---|---|---|
| < | < | タグの始まりと解釈される |
| > | > | タグの終わりと解釈される |
| & | & | 実体参照の始まりと解釈される |
| " | " | 属性の値が途中で切れる |
| ' | ' | 同じく属性の値が切れる |
安全のためのエスケープ
利用者が入力した文章をそのままページに出すと、その中に書かれたスクリプトが実行されてしまいます。掲示板やコメント欄で古くから起きてきた問題で、クロスサイトスクリプティングと呼ばれます。
入力をエスケープしてから表示すれば、タグは文字として表示されるだけで動きません。ただし、これは表示する側の対策です。データベースに入れる前にエスケープしてしまうと、別の場所で使うときに二重になります。表示する直前に行うのが原則です。
最近のフレームワークは、標準で自動的にエスケープします。自分で組み立てた文字列をHTMLとして挿入する処理を書くときだけ、意識する必要があります。
二重エスケープに注意
すでにエスケープされた文字列をもう一度エスケープすると、&lt; のようになり、画面には < という文字がそのまま表示されます。
このツールは、入力がすでにエスケープされているように見えるときに知らせます。処理の前に、その文字列の状態を確かめてください。
逆変換では、& だけでなく ' のような数値参照も元に戻します。
よくある質問
日本語もエスケープされますか？
されません。HTMLで特別な意味を持つ文字だけが対象です。
&lt; と表示されてしまいます。
二重にエスケープされています。一度逆変換してください。
入力値のエスケープはいつ行うべきですか？
保存するときではなく、表示する直前です。保存時に行うと、別の用途で使うときに二重になります。
貼り付けた内容は送信されますか？
されません。処理はすべてブラウザの中で行われます。