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

Question

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

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

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

如您所见，它已转义。

但是，如果我随后运行这段代码:

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

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

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

弹出警告框。

JSFIDDLE

我在这里做错了什么？我认为在输出时转义我的数据是我需要做的全部，但显然在使用 jQuery 操作 DOM 时情况并非如此。

Answer 1

如果你想设置文本，使用.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>