jQueryを使って

Question

ユーザが入力した文字列をjQueryを使って画面に表示するシステムがあります。
以下のようにスクリプトタグを入力されてしまうと、アラートが実行されてしまいます。

$("#sample").html("<div><script>alert(1)</script></div>")

これを上手く回避する方法はないでしょうか？
一応、HTML特殊文字を一度エスケープしてから表示後に元に戻せばスクリプトは実行されませんが、
少し画面がちらついてしまいます。

良い方法をお持ちだという方、是非ご教示願います。

Answer 1

タグを入力させる必要がない場面であれば、.text()を使いましょう。タグが入ってもエスケープされて、単なる文字として処理されます。

Comments

[just]

回答ありがとうございます。
言葉足らずで申し訳なかったのですが、<div>の部分はユーザの入力値ではないので、
そこの部分はhtmlとして解釈したかったです。説明下手で申し訳ありません・・・

Answer 2

maisumakun さんのコメントより。

言葉足らずで申し訳なかったのですが、<div>の部分はユーザの入力値ではないので、そこの部分はhtmlとして解釈したかったです。

テキストノードと要素ノードを別々に生成すればエスケープする必要もないと思います。

jQuery('#sample').append(jQuery('<div>').text('\x3Cscript>alert(1)\x3C/script>'));

Comments

[think49]

タッチの差で解決したようなので流してください。

Answer 3

次のURLを参考にしてみてはいかがでしょうか。
XSS対策：jQueryでのエスケープ

Comments

[just]

回答ありがとうございます。上記サイトを参考にして解決しました。
ベストアンサーにさせていただきます。