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が自動でエスケープ処理を行ってくれているみたいです。

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

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

  1. jqueryにはエスケープ関数がない
  2. jquery/javascriptで自動エスケープ処理しない関数
  3. jquery/javascriptで自動エスケープ処理を行う関数
  4. jqueryで簡単にエスケープ処理をする方法
  5. jqueryの自動エスケープ機能を利用しよう

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()関数も特殊文字を変換してくれているようです。

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

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

こんなにも一ミリも目を引かれないタイトルを取り扱ってます: ココア20g / ハイチュウとかってさ / なぜ米と小麦を食べようと思ったのかの謎 /