Last Updated: 2024-11-21

This code for an iframe, hosted on CodePen (cdpn.io), failed

<script type="text/javascript">
  function setHeightprojectS(iframe) {
     iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';
  }
</script>

<iframe src="https://www.projectS.com/widgets/calculator"
        width="100%"
        height="100%"
        onload="setHeightprojectS(this)"
></iframe>

The error was this

Uncaught DOMException: Blocked a frame with origin "https://cdpn.io" from accessing a cross-origin frame.
    at setHeightprojectS (https://cdpn.io/jackkinsella/fullpage/ZEYgxpw:33:51)
    at HTMLIFrameElement.onload (https://cdpn.io/jackkinsella/fullpage/ZEYgxpw:36:131)

This shows that any line of JavaScript, even if only accesses the height of iframe element itself, is stopped from executing by the cross-origin policy. Generally speaking the parent is not allowed to access or modify the DOM of the iframe or vice-versa.

The way around this is to use the postMessage API or a library that does this for you in the iframe context.

// Page 1: Iframe host

const message = 'Resize me';
const target = 'example.com';
iframe.contentWindow.postMessage(message, target);

// Page 2: Iframe server
window.addEventListener('message', callback);

Incident 2

With gotty, I tried to get access to the Vim instance iframe in the browser, but without any success.

iframe.contentWindow.body

It gave me the error

VM1174:1 Uncaught DOMException: Blocked a frame with origin "http://localhost:8080" from accessing a cross-origin frame.

I tried all the CORS headers, etc. but still to no avail. I proved the CORS was working correctly with an XHR request yet I still could not grab my iframe.

Then I found out this simply wasn't possible because CORS/Access-Control-Allow-Origin does not apply to iframes.

Resources

• https://benohead.com/blog/2015/12/07/cross-document-communication-with-iframes/