jQueryで要素を生成するときの注意点

jQuery使って要素を作るとき、$('<div id="' + data + '">').appendTo('body')とかやることあるけど、注意しないとXSS起こすよという話。

つまるところ、dataがどこから来たのかをちゃんと把握してないといけない。

例えばこんな例

server-side-template.htmlは、サーバーサイドのテンプレートエンジンによって{{ form.src }}がクエリの値で置き換えられる、よくあるCGIのテンプレートを想定しています。

この場合、http://mysite.com?src="><script>alert('XSS!')</script><div id="といったURLでXSSが可能となる。

どう対応すべきか

1. 属性をメソッドで追加する
   $('<img>').attr('src', src).appendTo(container);

2. ちゃんとエスケープする
   $('<img src="' + escape(src) + '">').appendTo(container);

なんか微妙。。