Question

我正在编写一段代码，要求网站的DOM在任意JavaScript运行时保持冻结状态。属性更改很好，但我无法更改页面的原始标记结构！

我知道在JavaScript中有一些基本数量的函数可以修改DOM：

appendChild( nodeToAppend )
cloneNode( true|false )
createElement( tagName )
createElemeentNS( namespace, tagName )
createTextNode( textString )
innerHTML
insertBefore( nodeToInsert, nodeToInsertBefore )
removeChild( nodetoRemove )
replacechild( nodeToInsert, nodeToReplace )

我最初的想法只是将这些函数覆盖为无操作：

>>> document.write('<p>Changing your DOM. Mwwhaha!</p>')
>>> document.write = function() {}
>>> document.write('<p>No-op now!</p>')

虽然为document对象执行此操作很容易，但可以从许多不同的JavaScript对象调用DOM修改函数！如果我可以在顶层覆盖这些功能，那么它可能会起作用吗？

sktrdie更新：

>>> HTMLElement.prototype.appendChild = function(){}
>>> $("a").get(0).appendChild(document.createElement("div"))
# Still works argh.
>>> HTMLAnchorElement.prototype.appendChild = function(){}
>>> $("a").get(0).appendChild(document.createElement("div"))
# No-op yeah!

所以看起来我可以收集所有DOM元素的构造函数并在它们上面运行无操作但是看起来仍然很混乱......

如何保护DOM免受任意JavaScript的修改？

Answer 1

您是否尝试过 HTMLElement .prototype.appendChild = function（）{}来覆盖更高级别的DOM方法？

Answer 2

虽然这确实是hackish，但维护当前DOM结构的唯一方法是存储DOM的“快照”并定期检查它。

//place in anonymous function to prevent global access
(function() {
  //storing the whole DOM as objects would be ideal, but too memory intensive, so a string will have to do.
  var originalDOM = document.body.innerHTML;

  var checkDOM = function() {
    if (document.body.innerHTML != originalDOM)  document.body.innerHTML = originalDOM
    //check that the code is running
    if (arbitraryCodeIsRunning)  setTimeout("checkDOM", 100);
  }
  checkDOM();
})();

可能不是你想要的东西，但经过一些测试后，这是我能想到维持DOM结构的唯一方法。

Answer 3

不要这样做。使用白名单。请。

Answer 4

您可以将所有内容放在<div>标记中，并隐藏该标记，将其替换为另一个标记为“正在加载...”的标记。然后在加载后，您可以隐藏加载<div>并将其替换为原始文件。

Answer 5

没有办法做到这一点。我做了几个测试，无论我怎么试图覆盖这些方法，他们仍然存在。我相信它们的实现程度高于可执行的javascript可以访问的级别，所以你无法真正触及它们。

将DOM冻结为JavaScript：将DOM修改函数覆盖为no-ops

5 个答案: