Edge & IE: Permission Denied after creating an iframe and accessing window object

Question

I'm getting the "Permission Denied" error on Edge and IE when creating an iframe in the script with some delay (setTimeout) and trying to access the window object.

It works on all other browsers, and works without the delay on IE and Edge.

<script>
    function createIframe(win) {
        console.log('foo', win.foo);
        var width = 300;
        var height = 250;
        var id = 'ifr';
        var src = '';
        var iframeTemplate = '<iframe id="'+id+'" src="'+src+'" width="'+width+'" height="'+
            height+'"  marginheight="0" marginwidth="0" scrolling="NO" frameborder="0"></iframe>';
        win.document.write(iframeTemplate);
        var iframe = win.document.getElementById(id);
        console.log('foo', win.foo);
        if (iframe) {
            var doc = iframe.contentWindow.document;
            doc.write('<html><head></head><body><script>console.log("foo on parent", window.parent.foo);</scr'+ 'ipt></body></html>');
            doc.close();
        } else {
            console.log('Failed to create an iframe');
        }
    }
    window.foo = 'bar';
    setTimeout(function() {
        createIframe(window);
    }, 3000);

</script>

This code should print:

foo bar
foo bar
foo on parent bar

But it throws the error "Permission Denied" on the second console.log on Edge and IE.

Works fine without setTimeout.

If I remove the second console.log, and acess window.parent.foo from within an iframe, it is undefined on Edge and IE

Snippets:

Doesn't work on Edge and IE: https://jsfiddle.net/vo2yrjft/

Works on Edge and IE: https://jsfiddle.net/6cbfk1yr/

Any workaround for that?

`win.document.write(iframeTemplate);` where win is window is not a good idea. Use innerHTML of a container instead — mplungjan, Aug 12 '19 at 09:42

score 0 · Accepted Answer · answered Aug 13 '19 at 02:54

document.write is a "bad practice", it will block the page, you could refer to this thread for detailed information.

As a workaround, you could use createElement('iframe') to create an iframe and then use appendChild() to insert the element. Below is the sample code, it can run well in IE & Edge:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <script>
        function prepareFrame(win) {
            console.log('foo', win.foo);
            var id = 'ifr';
            var ifrm = document.createElement('iframe');
            ifrm.setAttribute('src', '');
            ifrm.setAttribute('id', id);
            ifrm.setAttribute('marginheight', 0);
            ifrm.setAttribute('marginwidth', 0);
            ifrm.setAttribute('scrolling', 'NO');
            ifrm.setAttribute('frameborder', 0);
            ifrm.style.width = '300px';
            ifrm.style.height = '250px';
            document.body.appendChild(ifrm);
            var iframe = win.document.getElementById(id);
            console.log('foo', win.foo);
            if (iframe) {
                var doc = iframe.contentWindow.document;
                doc.write('<html><head></head><body><script>console.log("foo on parent", window.parent.foo);</scr' + 'ipt></body></html>');
                doc.close();
            } else {
                console.log('Failed to create an iframe');
            }
        }
            window.foo = 'bar';
            setTimeout(function() {
                prepareFrame(window);
            }, 3000);
    </script>
</body>
</html>

Edge & IE: Permission Denied after creating an iframe and accessing window object

1 Answers1