使用jQuery .html()函数转义内容以进行放置

时间:2011-10-04 08:52:56

标签: javascript jquery escaping html-entities

我需要接受任意用户输入。后来,我想将已经转义为HTML实体的输入复制到textarea中,以便进行编辑。但是,jQuery的jQuery.html()函数将HTML实体读出来,就像它们是真正的HTML一样,并将用户脚本直接注入页面。我需要抓取用户输入的内容,即使它包含<script>标签,并输出到textarea,可以在其中进行编辑。

所以,我需要这个:

<textarea name="empty"></textarea>
<div name="user-input"> &lt;script&gt; window.alert('hi'); &lt;/script&gt; </div>

成为这个:

<textarea name="empty"> &lt;script&gt; window.alert('hi'); &lt;/script&gt; </textarea>
<div name="user-input"> &lt;script&gt; window.alert('hi'); &lt;/script&gt; </div>

关于JavaScript触发器。相反,textarea变为:

<textarea name="empty"> <script> window.alert('hi'); </script> </textarea>

显示一个空文本框并将用户的JavaScript注入页面。

现在我正在获取用户输入的内容并将它们放入textarea中,如下所示:

 $('#edit-textarea').html(($('#user-input').text()));

我尝试了几种变体无济于事。

请参阅http://jsfiddle.net/vkRkt/8了解测试用例。

编辑:

见下面的讨论。我的解决方案是使用jquery.val()而不是jquery.html()。我跳过了val,因为我认为它是jquery.attr('value', new_value)的别名,它有自己的注入问题(可以用“#”停止)。 val()不一样attr('value', val) ,在我的简短测试中看起来不安全。

如果有人之后遇到此问题,并且知道val实际上不是一种安全的方法,请立即回复并更新我们。

感谢。

1 个答案:

答案 0 :(得分:1)

$('#edit-textarea').val(($('#user-input').text()));

对我来说很好。我也尝试使用.text()而不是.val(),当然也保留了转义权限。如果您不希望数据为HTML,请不要使用.html()

jsFiddle Demo