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

製作 プログラム

2016/08/23(火)

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

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

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

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

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

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

jquery/javascriptで自動エスケープ処理しない関数

  • jqueryのhtml()関数
  • javascriptのinnerHTML

jquery/javascriptで自動エスケープ処理を行う関数

  • jqueryのtext()関数
  • jqueryのval()関数
  • jqueryのattr()関数
  • javascriptのinnerText
  • javascriptのtextContent
  • javascriptのcreateElement
  • javascriptのvalue

jqueryで簡単にエスケープ処理をする方法

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

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

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

jquery


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

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

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

jqueryの自動エスケープ機能を利用しよう

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

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

おまけ:jqueryのserialize()関数
jqueryのserialize()関数も特殊文字を変換してくれているようです。