CODEWITHSUNDEEP
javascripthtmlshadow-dom
jiminssy
jiminssy

Reputation: 2451

Is it possible to prevent imported javascript code from modifying my dom

What I want to do is to allow other people to be able code their own logic to render contents of certain div element I give them. It is a space they can freely add DOM elements, customize with their own CSS, and design however they want it to look like.

However when I do that I run into the problem with CSS conflicts and Javascript global variable conflicts. I came across shadow DOM and would this be the right technology to use for this use case? If so, how do you prevent others from selecting DOM elements outside of their shadow DOM? For example if they do something like $('body') using jquery and start changing it.

Also another thing to consider is what people will be rendering inside this given div element relies on getting data from my web application. A good example might be a stream of data and some unknown type of chart they may be designed by others to display realtime data.

Upvotes: 1

Views: 112

Answers (2)

Andreas Furster
Andreas Furster

Reputation: 1638

If you don't want to use an iframe with the sandbox attribute, the sort answer is NO. It's not possible.

JavaScript runs inside a window and has complete access over the document in the window. You can try to modify some functions, but there is no way of doing it the right way.

Just use an iframe for this.

Upvotes: 0

ssc-hrep3
ssc-hrep3

Reputation: 16089

Use an iframe sandbox. You have several options to disallow scripts or let the page behave like it is on another domain. You can find all the options here: http://www.w3schools.com/tags/att_iframe_sandbox.asp

An example for your use case would be: <iframe sandbox="allow-scripts" src="anotherpage.html"></iframe>

Upvotes: 3

Related Questions