Uncaught SecurityError Port Issue: Iframe resize

Question

I have a parent page that renders and iframe with varying sized body. However when the site is navigated to with out www you get the following error:

599 Uncaught SecurityError: Blocked a frame with origin "http://example.com" from accessing a frame with origin "http://www.example.com". Protocols, domains, and ports must match.

The form renders in the iframe but it doesn't resize the scroll height correctly (I cannot have any scroll functionality on the iframe and requires the additional space towards the bottom of the frame).

This happens because of the following iframe/function on the page:

<iframe id="iframe1" src="http://www.example.com/virtual-directory" height="" width="300px" frameborder="0" onload="iframeLoaded()"></iframe>
<script>
   function iframeLoaded() {
     var iFrameID = document.getElementById('iframe1');
     if (iFrameID) {
         iFrameID.height = "";
         iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + 20 + "px";
     }
   }
</script>

I took a look at this post SecurityError: Blocked a frame with origin from accessing a cross-origin frame but I am not exactly sure where to implement that check to get this resize to function properly without introducing a security risk.

Answer 1

If you have full control on both parent and iframe, you might want to try ConroyP's answer here: Resizing an iframe based on content.

(it's the accepted answer)

It is a bit complicated, but it has worked for me. Depending on network speed it can be almost instantaneous.

The only drawback is that it doesn't scroll up the iframe content when you change page within it.

Answer 2

There are a couple of solutions to this problem.

The first is to remove http://example.com from the scr attrib of your iFrame tag, so it is just src="/virtual-directory"

The second option is to use the iFrame-resizer lib.

https://github.com/davidjbradshaw/iframe-resizer