javascript - 在添加到文档之前，Javascript/jQuery DOM 创建是否安全？

Question

请仔细阅读此声明:让我们假设在将任何元素添加到 document 之前$dom 中的所有 不安全元素已被删除。但它们最初是被创造出来的。好的，让我们继续....

---

如果一段用户文本被处理并且可以像这样加载:

var comment = 'I\'m a naughty person!!' +
              '<script src="http://blah.com/some_naughty_javascript.js">';
var $dom = $('<div>' + comment + '</div>');

这本身有任何危险吗？我的观点是，创建 DOM 的简单行为是否可以以某种方式注入(inject)任何东西，或者只是简单地处理并创建结构？

例如:

var $dom = $('<script>alert("hi");</script>');

显然消息 hi 不会弹出，直到它被添加到 document .但是:

• 以这种方式创建的任何标签或任何东西都会有危险吗？
• javascript/jquery 中的任何函数是否可以“监视”以这种方式创建的元素并在它被删除坏元素并放入文档之前对其执行操作？

---

赏金编辑

所以正如下面的答案所概述的那样，这种方法似乎不是很安全，特别是出于一个原因:

• var $dom = $('<img src="blah.jpg"/>') -- 这将立即请求图像，无论对象是否已添加到文档中。

这为处理 HTML ajax 请求带来了一个主要问题。例如，如果我们想从表单的输入中获取值:

$.ajax({
  url: 'test.php',
  success: function(responseHTML) {
    var inputs = $(responseHTML).find('form input');
  }
});

这将不由自主地导致浏览器请求所有图像。

赏金授予任何人:

• 谁可以提供一种安全的好方法来处理 ajax 请求而不会出现上述问题。
• 理想情况下不提供正则表达式答案...即如果我们想做什么 $(responseHTML).find('img') -- 不能使用正则表达式删除图像标签，因此需要一种不显眼的方式来阻止 src 加载，但仍然具有相同的属性、结构等。

Answer 1

Is this by itself dangerous in any way? My point being, can just the simple act of creating a DOM somehow inject anything, or is it just simply processed and the structure is created?

简单地创建一个元素而不将它附加到 dom 将不会导致任何脚本运行，因为此时它只是一个对象 (HtmlScriptElement)。当它实际附加到 dom 时，脚本元素将由浏览器评估和运行。话虽如此，我想一个极其狡猾的人可能会利用您可能使用的某些框架或浏览器中存在的错误来导致意外结果。

考虑这个例子:

<p>
    <input type="button" value="Store 'The Script' In Variable" id="store"/>
    <input type="button" value="Append 'The Script' To Dom" id="append"/>
</p>
<br/>
<p>
    <input type="button" value="Does nothing"/>
</p>
<h1>The Script</h1>
<pre id="script">
    $(function(){
        function clickIt(){
            $(this).clone().click(clickIt).appendTo("body");
        }
        $("input[type='button']").val("Now Does Something").click(clickIt);
    });
</pre>

var theScript;

$("#store").click(function() {
    theScript = document.createElement('script');
    var scriptText = document.createTextNode($("#script").text());
    theScript.appendChild(scriptText);
});

$("#append").click(function() {
    var head = document.getElementsByTagName('head')[0];
    head.appendChild(theScript);
});

当您点击 store 时它将创建 HtmlScriptElement 并将其存储到一个变量中。您会注意到即使创建了对象也没有运行任何东西。只要你点击append脚本附加到 dom 并立即评估，按钮执行不同的操作。

Code Example on jsfiddle

Can any functions in javascript/jquery "watch" for elements being created in this manner and act on it BEFORE it's been stripped of bad elements and put on document?

jQuery sort 已经为您做了这件事，就像它做一些内部脚本评估一样

来自 Karl Swedberg在 .append() 上发帖

All of jQuery's insertion methods use a domManip function internally to clean/process elements before and after they are inserted into the DOM. One of the things the domManip function does is pull out any script elements about to be inserted and run them through an "evalScript routine" rather than inject them with the rest of the DOM fragment. It inserts the scripts separately, evaluates them, and then removes them from the DOM. ...

您可以更改 jQuery 的行为以删除所有 <script/>并使用内联 javascript 清理其他元素 onclick, mouseover, etc打电话时 append()然而，这只会影响 jQuery，因为有人可以轻松地使用 vanilla javascript 来附加 <script/>。元素。

Dom 突变事件

Dom Level 2确实定义了一些 Dom 突变事件来捕获添加到 dom 中的元素，人们会查看事件，DOMNodeInserted .但是，它是在元素已添加后触发的。 注意，根据 Raynos 的说法，这些目前是 deprecated .

DOMNodeInserted Fired when a node has been added as a child of another node. This event is dispatched after the insertion has taken place. The target of this event is the node being inserted. Bubbles: Yes Cancelable: No Context Info: relatedNode holds the parent node

最后似乎没有完全停止一个<script/>通过其他一些 javascript 附加到 dom。 (至少我找不到)。

我能建议的最好方法是永远不要相信用户输入，因为所有用户输入都是邪恶的。当您进行 dom 操作时，请仔细检查以确保没有禁止的标签，无论是 <script/>甚至是普通的 <p/>元素并在持久化之前清理所有输入。

此外，正如 John 指出的那样，您需要担心可以附加 onclick 的任何 元素。事件或任何内联 javascript 事件处理程序。