2

I've built a CodePen-like editor that's client side only. It works by letting you edit HTML, JS, and CSS, and then when you click run, it generates a blob and sets some iframe src to that blob.

This works in Firefox(49), Chrome(53), Safari(10) but it doesn't work in Edge

Is there a workaround?

I thought about using a dataURL but according to caniuse that's not supported in Edge either.

var html = `
<h1>hello world</h1>
<gscript src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/1.2.2/chroma.min.js"></gscript>
<gscript>
document.body.style.backgroundColor = chroma.hsv(Math.random() * 360 | 0, 0.4, 0.8).css();
</gscript>
`;
html = html.replace(/gscript/g, 'script');
var blob = new Blob([html], {type: 'text/html'});
var blobUrl = URL.createObjectURL(blob);
var iframe = document.querySelector("iframe");
iframe.src = blobUrl;
<iframe></iframe>

result in FF/Chrome/Safari

chrome result

result in Edge (no errors in console either)

Edge result

gman
  • 100,619
  • 31
  • 269
  • 393
  • So I finally launched my win10 VM and yep... Edge can't `open` a blobURI... So you can't either set an iframe to a blobURI, it even fires an security error when you set the `data` of an `` element (why not with iframes ? dunno...) Weirdly enough it is able to open an image contained in an iframe to a blobURI that has been created in the main page. Me don't get what they do there and I'm not going to open my VM any time soon ;-) Ps: you should undelete your answer, since it seems to be a correct workaround. – Kaiido Feb 07 '17 at 13:43
  • PPs: don't forget to set the `sandbox` attribute of your frame, even if Edge nor Chrome do allow the access to the parent with dataURI frames, FF does, and Chrome does with blobURIs, so I guess there is a bug somewhere. – Kaiido Feb 07 '17 at 13:43

0 Answers0