CDN Causing IFrame Load Issues

Question

I am trying to load a html file in an iframe but ever since I loaded our site's resources to a CDN, it is now being blocked by the browser.

Here is an example (supplement facts on the right side is not loading fully): https://www.prosupps.com/products/aminolinx

This is the error I'm getting from the console:

Uncaught DOMException: Blocked a frame with origin " https://www.prosupps.com " from accessing a cross-origin frame. at resizeIframe ( https://cdn.prosupps.com/media/js/54d03508885a150fb0a1fa2ded94c4e8.js:21106:57 ) at HTMLIFrameElement.onload ( https://www.prosupps.com/products/aminolinx:677:248 )

Can anybody help me find a solution?

Here is the specific line of code that's causing issues now.

 function resizeIframe(e)
{e.style.height=e.contentWindow.document.body.scrollHeight+"px"}

Here is the iframe code:

 <iframe name="aminolinx-sample-supplement-facts" id="supplement-facts" 
src="{{media url="wysiwyg/prosupps/supplement-facts/AminoLinx-Mango-
Passion-Fruit-Sample-Supplement-Facts.html"}}" frameborder="0" 
scrolling="no"></iframe>

Answer 1

From here :

JavaScript APIs such as iframe.contentWindow, window.parent, window.open and window.opener allow documents to directly reference each other. When the two documents do not have the same origin, these references provide very limited access to Window and Location objects

This is why when you offloaded your resources to CDN your JS got broken. You'll either need to move your right block back from CDN or resort to postmessage to communicate between frames

The window.postMessage() method safely enables cross-origin communication between Window objects; eg, between a page and a pop-up that it spawned, or between a page and an iframe embedded within it