Get iframe content's height when domain & protocol match, but subdomain doesn't

Question

I'm trying to get the iframe's ( https://booking.yourdomain.com from https://www.yourdomain.com ) content so I can set the height to it. So all the content is visible, like this ( I took the expression from here ):

var booking_iframe = document.querySelector('iframe');

booking_iframe.onload = function() {
    booking_iframe.style.height = booking_iframe.contentWindow.document.body.offsetHeight + 'px';
}

But this fires the following error:

VM389:1 Uncaught DOMException: Blocked a frame with origin "https://www.yourdomain.com" from accessing a cross-origin frame.
    at <anonymous>:1:54

Domains and protocol match, but subdomain doesn't,

Any suggestion?

( If you want to play with de debugger. I created a test.html with just the iframe in the production environment )

-EDIT-

As a workaround: Any idea how to enable the scrolling on the iframe's content? ( tried fixed height and overflow scroll, and scrolling="yes" but won't work )

The domains don’t “match”. The notion of a “subdomain” doesn’t really exist as far as the same-origin policy and cross-origin restrictions are concerned. As far as browsers are concerned, what you’re dealing with is effectively the same as two domains that don’t match in any way—`https://www.yourdomain.com` vs `https://some.completely.other.site.com` — sideshowbarker, Aug 01 '17 at 23:57
What do you mean by "enabling the scrolling on the iframe's content"? It seems to me that it is enabled by default (see this [jsfiddle](http://jsfiddle.net/ConnorsFan/5s4u7bz9/); tested in Chrome, Firefox and IE on Windows). — ConnorsFan, Aug 07 '17 at 19:14
i you check the link in the question (test.html) you'll see that it's not my case.. — Toni Michel Caubet, Aug 07 '17 at 21:56
Yes, but I see `scrolling="no"` in the definition of your iframe. Can you remove that attribute? — ConnorsFan, Aug 07 '17 at 22:08

pwagner · Answer 1 · 2017-08-11T15:04:55.307

1

The Same-origin policy is the reason, why the browser is blocking.

To circumvent the issue, add the following line of JS to both, the page that contains the iframe, and the page that is loaded inside the iframe:

document.domain = "yourdomain.com";

For more details, see https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy#Changing_origin.

Edit: In order to resize the iframe based on its content, I recommend iframe-resizer.

edited Aug 11 '17 at 15:04

answered Aug 08 '17 at 12:36

pwagner

1,224
1
13
31

If you check the source code of my test.html I'm already doing it in my part. The other subdomain it's a c-name record which I have no access to it.. – Toni Michel Caubet Aug 09 '17 at 12:44
In the source code of https://www.islamallorca.com/booking-test.html, I see `window.domain = 'islamallorca.com';`and not `document.domain = 'islamallorca.com';`. Please try **document**.domain. Then make sure that this line of code is also present in the page that is loaded inside the iframe. At the moment, it's still missing in the embedded page (the iframe src, e.g. https://booking.islamallorca.com:4475/fwbookingresponsivestep/...). – pwagner Aug 10 '17 at 09:18
indeed, I made a mistake and set the property to window instead! The thing is i changed it my code ( `booking_iframe.contentWindow.document.body.offsetHeight + 'px'; // returns 150px but the content is bigger` ) still return the iframe height ( not its content ). Any idea how to get it? thanks! – Toni Michel Caubet Aug 11 '17 at 14:52
Oh, sorry, I forgot you cannot access the DOM inside the iframe from the parent page, except via postMessage: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage I think you can quickly achieve what you need using iframe-resizer: https://github.com/davidjbradshaw/iframe-resizer – pwagner Aug 11 '17 at 14:57

score 0 · Answer 2 · answered Feb 22 '23 at 16:00

document.domain is deprecated and already been removed from the relevant web standards.

We should use Window.postMessage to send an asynchronous message to the other origin.

<script type="text/javascript">
    function sendHeight(height)
    {
        if(parent.postMessage)
        {   
            const resizeEventMessage = {
                eventName: "WindowResize",
                value: height
            };
            parent.postMessage(resizeEventMessage, "*");
        }
    }
    (function() {
        const content = document.getElementsByTagName("html")[0];
        sendHeight(content.offsetHeight);
        const resizeObserver = new ResizeObserver(entries => {
            sendHeight(content.offsetHeight);
        });
        resizeObserver.observe(content);
    })();
</script>

Get iframe content's height when domain & protocol match, but subdomain doesn't

2 Answers2