如何防止在使用.val()时引入XSS漏洞?

How to prevent XSS vulnerability from being introduced when using .val()?

我将未经过滤的用户输入存储在我的数据库中,然后在输出时将其转义。

如果我在输入中输入 "><svg/onload=alert(3)> 并将其保存在数据库中,然后加载一个转义数据的页面,将其放回输入中,页面源显示:

... value="&quot;&gt;&lt;svg/onload=alert(3)&gt;" ...

如你所见,它被转义了。

但是,如果我然后 运行 这个代码:

$(".somediv").html($("#myinput").val());

然后将以下内容放入元素中:

""><svg/onload=alert(3)>"

并弹出警告框。

JSFIDDLE

我在这里做错了什么?我以为我需要做的就是在输出时转义我的数据,但显然当用 jQuery 操纵 DOM 时,这是不正确的。

如果要设置文本,请使用.text()。属性值中的实体已经被解释,""><svg/onload=alert(3)>" 属性的值。

$(".somediv").text($("#myinput").val());

$('#destination').text($('#source').attr('title'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="source" title="&amp;&quot;&lt;">Hover over me!</div>

<div id="destination"></div>