DOM freezing for JavaScript: overriding DOM modification functions as no-ops

I am writing a piece of code that requires a DOM

website to remain frozen when arbitrary JavaScript runs. Changing the attributes is ok, but I can't change anything from the original tag structure on the page!

I know that JavaScript has a base number of functions that can change DOM

:

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

      

My initial thought was to simply overwrite these functions as no ops:

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

      

While this is easy on an object document

, modification functions DOM

can be called from many different JavaScript objects! If I could overwrite these functions at the top level, perhaps it would work?

Update from 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!

      

So, it would seem that I could just collect the constructors of all the elements DOM

and run them by putting no-ops, but that still seems pretty messy ...

How can I protect DOM

against modification from arbitrary JavaScript?

+1


source to share


5 answers


Have you tried HTMLElement .prototype.appendChild = function () {} to overwrite DOM methods at a higher level?



+2


source


While this is really hackish, the only way to maintain the current DOM structure is to keep a snapshot of the DOM and check it periodically.

//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();
})();

      



Probably not what you're looking for, but after some testing, this is the only way I can think of maintaining the DOM structure independently.

+1


source


Do not do this. Use a whitelist. You are welcome.

0


source


You can put everything in a tag <div>

and hide that tag by replacing it with another that says "Loading ..". Then after downloading it, you can hide the download <div>

and replace it with the original.

0


source


There is no way to do this. I did a couple of tests and no matter how I tried to rewrite these methods, they stay. I believe they are implemented at a higher level than the available javascript to access, so you cannot touch them.

0


source







All Articles