Prevent inline JS execution

Question

I have a situation where I am loading external HTML into a WYSIWYG editor on a web page. The external HTML is from a trusted source, and includes what ever is between two specific <div> tags from a number of different pages.

My problem is that some of the pages contain inline javascript event handlers. So when I am working in the WYSIWYG editor, certain events cause the execution of this js.

Mostly it doesn't do anything other than fill up the console with errors saying ... is not defined, and this may be all it is, and that wouldn't be a problem. But still, it's messy, and I don't know if there isn't a page somewhere that might execute something like alert(...) which could get extremely annoying. The code is all trusted, but detached from its intended context, it could produced undesirable results.

I want to find a way to globally prevent this execution, preferably without modifying the inline script. I could do something like attach =false; to each handler, but then I have to check all the incoming elements, and even with regular expressions, this will degrade performance. Also, I then would have to remove it before submitting the edited HTML back to the server, which seems like a major pain, and difficult to do flawlessly.

Is there a way to prevent this online code from being executed within this particular context?

• Pointy: It all depends on how you're loading the content. In general, inline scripts in page fragments are not evaluated when the fragment is added to the DOM. If they're being evaluated, it's because some of your code (or a library you're using) is doing it.
• dgo: I am using the $.jqte plugin for creating a WYSIYG editor. My guess is that is the source, because it must first render the content as it would display before editing it. Which is what I want. Otherwise I could just strip all the tags or output the content with no tags. I just now realized that angular or something similar would've been the right tool for this, but I am a bit too far along I think.

Answer 1

Depending on what browser you are trying to support, you can checkout 'Content Security Policy' headers. Checkout http://caniuse.com/contentsecuritypolicy for details on browser support.

If you target browser is in the list, CSP can do exactly what you are looking for. It will disable event handlers by default. It will block execution of any code embedded within on the page in addition to blocking event handlers. So you will need to move all your js code, if present on the html page to a separate js, specify that filename in the safe-list and load your js from there.

CSP are set as Http headers but with the new specification it can be set using meta tags as well. Checkout https://dvcs.w3.org/hg/content-security-policy/raw-file/tip/csp-specification.dev.html#html-meta-element--experimental.

For WebKit supported browsers(Chrome/Safari) something like would restrict load from any external source. You can add a list of accepted sources to the list and explore what works for you.

For firefox, though its there in the specification, I do not think the meta tag is supported yet. https://developer.mozilla.org/en-US/docs/Security/CSP/Introducing_Content_Security_Policy.

So to summarize, as long as you can set headers for the Web-Server that is hosting the web page (unless you only want Chrome/Safari support), and your target browser supports CSP, you might give it a shot.

Answer 2

I copied this from sitepoint forum, a question similar to yours. This takes an approach of pulling div out of the parent and putting it back on. If this is what you want here is the example code:

var div = document.getElementById('div');
var nextSibling = div.nextSibling;
var parent = div.parentNode;
parent.removeChild(div);
function reCreateElement() {
 if (nextSibling) {
 parent.insertBefore(div, nextSibling);
 } else {
 parent.appendChild(div);
 }
}
setTimeout(reCreateElement, 100);
// Below is the stuff we don't want to run!
document.getElementById('div').onclick = function() {
 alert('CLICKED!');
}

• dgo: This will force the extra coding that I am trying to avoid.