automatic iframe height from different origin

Question

I've been trying to integrate content of another page with an iframe. This is the best approach of a source-code I could find for this implementation.

<script> 
function resizeIframe(iframe) { 
   iframe.style.height = iframe.contentWindow.document.documentElement.scrollHeight + 'px'; 
} 
</script>

<iframe src="https://another-backend-domain.com/bnt" frameborder="0" width="100%" onload="resizeIframe(this)"></iframe>

The problem is here, that the onload function is recognized as cross-origin. With pages on the same domain, this method works just fine...

Uncaught DOMException: Blocked a frame with origin "https://original-website.com" from accessing a cross-origin frame.
    at resizeIframe (https://original-website.com/site/:239:42)
    at HTMLIFrameElement.onload (https://original-website.com/site/:241:112)

I would be glad, if anyone could help me out with this, as even after many hours of research I still can't figure out a good way to fix this. The default height of my iframe is just too small, but I can't manually define the height in px, because the content height is changed hourly...

score 1 · Accepted Answer · answered Aug 01 '20 at 13:14

1

Check out JavaScript's postMessage function. It allows you to send and receive messages between the iframe and the top window.

Send the message from the iframe with:

window.top.postMessage({type: "myevent", height: x}, *);

Receive the message in the top window with:

window.onmessage = function (event) {
    if (event.data.type && event.data.type == "myevent") {
        var iframeHeight = event.data.height;
    }
};

You can also check event.origin to ensure targetOrigin matches the window domain for additional security.

answered Aug 01 '20 at 13:14

dzimney

565
1
5
15

Thanks for your reply! This one is interesting... I currently can't get it to work, but that's probably because of the combination of a modern angular server and an old, shitty cms, but I think this bares some other problems. See, I need this iframe to be responsible. At first I thought, I'd just pass the aspect ratio instead of the height to make more sizes possible, but with changing width, this also isn't always constant [To give more context, my iframe contains a material card (https://material.angular.io/components/card/examples), where it's contents are fetched from firestore in angular] – klydra Aug 01 '20 at 16:17
This code should be. window.top.postMessage({type: "myevent", height: x}, "*"); – Nisar Ahmed Jul 29 '22 at 19:31

score 0 · Answer 2 · edited Aug 01 '20 at 20:52

0

I would try to fix with this simple snippet taken from this answer, without even the need to insert JavaScript

<body style="margin:0px;padding:0px;overflow:hidden">
    <iframe src="http://www.example.com/video" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe>
</body>

edited Aug 01 '20 at 20:52

Dharman

30,962
25
85
135

answered Aug 01 '20 at 15:04

Antonino

3,178
3
24
39

thanks for your answer! If it wasn't clear, I sadly wasn't looking for this approach. The iframe displays a teaser, which is loaded from a kind of backend server, which is connected to the database logic and doesn't fill a whole page. The height depends on the content which changes almost hourly, so something like this, sadly wouldn't work... – klydra Aug 01 '20 at 15:24

automatic iframe height from different origin

2 Answers2