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 documentation ：

附加说明：

按设计，任何jQuery构造函数或方法   接受HTML字符串 - 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()。这就是为什么我们{{} 1}}和.textContent - 他们为我们逃跑：

.text()

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

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

Answer 2

来自.html()文档：

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

这就是为什么.innerHTML不好以及为什么.html()对于来自不受信任来源的字符串也不好用的原因，例如，如果您发出ajax请求以从不受信任的第三方获取某些数据。您应该使用众多方法之一here或更好，一个经过验证的库函数。

jQuery html（）方法有像innerHTML这样的安全风险吗？

2 个答案: