Using iframes to protect the rest of a page from scripts in 3rd party proxied-in div

Question

I have taken over a "dashboard" application that displays lots of goodies.

One of the things displayed is a div that is populated by the content of a 3rd party webpage (which auto-refreshes it's own contents). Unfortunately the javascript in the imported 3rd party webpage affects/refreshes the entire page it sits on.

Is there a way I can display the content of the 3rd party page on my own page, while at the same time sandboxing it to prevent it from accessing/affecting the page it sits on?

Answer 1

我建议您使用iframe元素并将div元素放入其中

Answer 2

Since cross-site scripting limitations prevent you from accessing external HTTP resources through Ajax, you have to use (inline) frames.

I am only aware of ONE way to prevent frames from running scripts. Chrome doesn't support this method, though.

var untrusted = document.getElementById("iframe-3rd-party");
untrusted.designMode = "On"; //No script can be run from the frame any more.

If you've found a method to avoid the cross-site limitations (eg: CORS, X-Access-Control-Allow ), strip the script tags and event handlers from the code. :

//xmlhttp_responsestring holds the responseText property of the XMLHttpRequest object
xmlhttp_responsestring
     .replace(/<script[^>]*?>\s*\/\/\s*<\[CDATA\[[\S\s]*?]]>\s*<\/script\s*>/gi, "")
     .replace(/<script[\S\s]+?<\/script\s*>/gi,"")
     .replace(/ o([nN])/g," &#111;$1").replace(/ O([Nn])/g," &#79;");

All script tags, and al event handlers are stripped in this way: all characters which start with a space, followed by "on" are replaced by HTML entities. Text will still be readable, while the event listeners are disabled.

Note that the last code snippet only deals with script tags and event handlers. It doesn't deal with external objects, such as Java Applet and frames. See my other answer for a more advanced sanitise function.