jQuery html()方法像innerHTML一样存在安全风险吗? [英] jQuery html() method a security risk like innerHTML?

问题描述

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

I recently was reading a JavaScript book and discovered using innerHTML to pass plain text poses a security risk, so I was wondering does using the html() jQuery method pose these same risks? I tried to research it but I could not find anything.

例如:

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

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

从我所知的角度来看，它们的作用相同，但是它们都带来了相同的安全风险，即有人可以注入一些JavaScript并执行它们吗?

These do the same thing from what I know, but do they both pose the same security risk of someone being able to inject some JavaScript and execute it?

我对安全性不是很了解，所以如果有任何不正确或错误解释的地方，我会向您道歉.

I am not very knowledgeable in security, so I apologize in advance if anything is incorrect or explained incorrectly.

推荐答案

来自 JQuery文档 :

From the JQuery documentation:

附加说明:

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

By design, any jQuery constructor or method that accepts an HTML string — jQuery(), .append(), .after(), etc. — can potentially execute code. This can occur by injection of script tags or use of HTML attributes that execute code (for example, ). Do not use these methods to insert strings obtained from untrusted sources such as URL query parameters, cookies, or form inputs. Doing so can introduce cross-site-scripting (XSS) vulnerabilities. Remove or escape any user input before adding content to the document.

例如，如果用户要传递包含<script>元素的HTML字符串，则将执行该脚本:

So, for example, if the user were to pass an HTML string that contains a <script> element, then that script would be executed:

$("#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>

但是，如果我们在传递字符串内容之前先对其进行转义，那么我们会更安全:

But, if we escape the strings contents before we pass it, we're safer:

$("#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和-他们为我们做转义:

Finally, the best way to avoid processing a string as HTML is not to pass it to .innerHTML or .html() in the first place. That's why we have .textContent and .text() - they do the escaping for us:

$("#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>

这篇关于jQuery html()方法像innerHTML一样存在安全风险吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！