jquery/javascriptのhtml(),innerHTMLは自動エスケープされない

最終更新日：2016/10/03

ラムネグから一言：寝る前に読むとくだらなすぎて逆に寝れると好評なすごい適当なブログをこっちではじめてます.

jqueryにはエスケープ関数がない

jqueryやjavascriptにはphpのhtmlspecialchars()のようなエスケープ関数が標準では用意されていません。

クロスサイトスクリプティング対策が難しいなと感じてしまいますが、jqueryの場合だとhtml()以外の関数text()やval()、attr()を用いてDOMに文字列を設定する場合は自動でエスケープ処理をしてくれているようです。

またjavascriptの場合でもinnerHTMLを直接書き換えないDOM操作、例えばオーソドックスなtextContentやcreateElement、そしてinnerTextではjavascriptが自動でエスケープ処理を行ってくれているみたいです。

なので、あまりエスケープ処理を気にする必要はないと個人的には思っています。（詳しく書かれた書籍等が探してもなかったため、自動エスケープ処理についてちゃんと言い切れてません。）

以下はテストしてみた結果です。

上記のようにjqueryやjavascriptでは勝手にクロスサイトスクリプティング対策であるエスケープ処理を行ってくれているのですが、中には自分で行わないといけないケースもあるかと思います。

冒頭で書いたとおり、jqueryにはそのような関数は標準では準備されてないので、自分で用意する必要があります。

とっても簡単でやり方はjqueryのtext()関数で行われる自動エスケープ処理をそのまま利用します。

jquery


function x(val){
return $('<p />').text(val).html();
}

使い方は『x(エスケープしたい文字列)』とするだけです。

pタグの要素を新規作成し、そのp要素に文字列を格納（このタイミングで自動エスケープ処理がされます）、その後html()でそのエスケープされた文字を取得しています。

javascriptやjqueryではだいたいの関数で自動エスケープ処理がされているようです。なのでクロスサイトスクリプティング対策を特別に意識する必要は少ないと思います。（このへん言い切れなくてすみません…）

少なくともjqueryのtext()関数では確実に自動エスケープが行われているので、自前でエスケープ関数を作る必要がある場合はjqueryのtext()関数の自動エスケープ処理をそのまま使うことで任意のタイミングでエスケープできる関数を簡単に実装することが出来ます。

【おしらせ、というか完全なる宣伝】

文体がもうぜんぜん適当すぎてあれだけどものすごい自由に書いてるブログ「檸檬だくだく」もよろしく.寝る前に読める恐ろしくくだらないやつです.