jQuery html() 方法是否存在类似innerHTML 的安全风险？

Question

我最近正在阅读一本 JavaScript 书，发现使用 innerHTML 传递纯文本会带来安全风险，所以我想知道使用html()jQuery 方法是否会带来同样的风险？我试图研究它，但我找不到任何东西。

例如：

$("#saveContact").html("Save"); //change text to Save

var saveContact = document.getElementById("saveContact");
saveContact.innerHTML = "Save"; //change text to Save

据我所知，它们做同样的事情，但它们是否都带来了相同的安全风险，即有人能够注入一些 JavaScript 并执行它？

我对安全不是很了解，所以如果有任何不正确或解释不正确的地方，我提前道歉。

Answer 1

从JQuery 文档：

补充说明：

按照设计，任何接受 HTML 字符串的 jQuery 构造函数或方法——jQuery()、.append()、.after() 等——都可以潜在地执行代码。这可以通过注入脚本标签或使用执行代码的 HTML 属性（例如，）来发生。不要使用这些方法插入从不受信任的来源获取的字符串，例如 URL 查询参数、cookie 或表单输入。这样做可能会引入跨站点脚本 (XSS) 漏洞。在向文档添加内容之前删除或转义任何用户输入。

因此，例如，如果用户要传递一个包含<script>元素的 HTML 字符串，那么该脚本将被执行：

$("#input").focus();
$("#input").on("blur", function(){
  $("#output").html($("#input").val());
});

textarea { width:300px; height: 100px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="input"><script>alert("The HTML in this element contains a script element that was processed! What if the script contained malicious content?!")</script></textarea>
<div id="output">Press TAB</div>

但是，如果我们在传递字符串之前转义它的内容，我们会更安全：

$("#input").focus();
$("#input").on("blur", function(){
  $("#output").html($("#input").val().replace("<", "&lt;").replace(">", "&gt;"));
});

textarea { width:300px; height: 100px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="input"><script>alert("This time the < and > characters (which signify an HTML tag are escaped into their HTML entity codes, so they won't be processed as HTML.")</script></textarea>
<div id="output">Press TAB</div>

最后，避免将字符串处理为 HTML 的最佳方法是首先不要将其传递给.innerHTML或传递 .html()。这就是为什么我们有.textContent和.text()- 他们为我们做逃避：

$("#input").focus();
$("#input").on("blur", function(){
  // Using .text() escapes the HTML automatically
  $("#output").text($("#input").val());
});

textarea { width:300px; height: 100px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="input"><script>alert("This time nothing will be processed as HTML.")</script></textarea>
<div id="output">Press TAB</div>