Friday, June 15, 2018

Value of DOM without manipulation of browser extensions

Leave a Comment

I would like to save the DOM of <body> into a variable with:

var body = document.querySelector('body'); 

The Problem

If there is a browser extension that will manipulate the DOM, users could have different values.

Maybe a solution

I could save the <body> from source code instead of DOM in a variable. So all values would be the same. And if my JavaScript edits the DOM, I need a function that remembers what exactly has been added, removed or edited from the value of the source code and rewrite that variable. That would work but I think there must be a better and easier solution.

Is there a way to exclude all extensions (no matter what browser) when saving the DOM into a variable?

2 Answers

Answers 1

No, there is no way to "exclude all extensions". That is, to ensure that no one else writes in the DOM except you.

You can make an attempt at it. Basically, the DOM is "written" using techniques like innerHTML, appendChild, insertAdjacentHTML, etc.

You'd have to rewrite functions, implement getters and setters etc.

Implementing these changes for document.body is not enough, as each element has the ability to make such changes, so you'd have to follow the prototype chain where you'll see facts like appendChild being a member of Node and innerHTML a member of Element and make the changes there.

Rewriting the appendChild would be easy. For the sake of argument, I'll forbid the <p> tag anywhere in the body (rough example):

var old = Node.prototype.appendChild; Node.prototype.appendChild = function (n){    try {      if (n.tagName.toLowerCase() == "p"){         return;      }    } catch(e) {   }   old.apply(this, [n]);  } 

As already stated, if we'd just rewrite the document.body.appendChild, anyone would be able to appendChild a <p> to a <div> or what not - so we have to go to the root of it.

And after taking care of all of these stuff, who's to say that no one else comes along and rewrites what you've just written?

And on top of it all, there are other ways to change these values, like man-in-the-middle "attacks", where user (or attacker) will modify whatever comes from the server (all scripts) through a Proxy, before those ever reaching the browser - and the browser will blindly obey.

Or the user can extend an opensource browser like Chromium and implement whatever rendering logic they want, etc.

Bottom line: you have no control over code that reaches the client, so don't rely on that.

Answers 2

You don't need to save the DOM into a variable.

I would suggest you make this app and keep everything separate so you can plug anything you want any where you want.

step 1. Just create the html.

step 2. Store your user values somewhere. For example a database.

step 3. When the page loads, grab the users values and use JavaScript to manipulate the dom values.

If You Enjoyed This, Take 5 Seconds To Share It

0 comments:

Post a Comment