Get the height of a same domain iframe when that iframe is inside a different domain iframe?

Question

I have a site which has a media player embedded inside an iframe. The media player and the site are on the same domain, preventing cross-origin issues. Each page, the main page as well as the media player page, have a bit of code which finds the height and width of any parent iframe:

var height = $(parent.window).height();
var width = $(parent.window).width();

No problems so far....until:

A client wants to embed my site inside an iframe on his own site. His site is on a different domain. Now, my iframe is inside another iframe and my code is throwing cross-origin errors.

The following does not throw errors:

var test1 = parent.window; // returns my site
var test2 = window.top;  // returns client site

The following does throw cross-origin errors:

var test3 = parent.window.document;
var test4 = $(parent.window);
var test5 = window.top.document;
var test6 = $(window.top);

How do I get the height of the iframe on my domain without the cross-origin errors? I'm hoping for a pure javascript/jQuery solution.

Options which will not work for my solution are:

1. Using document.domain to white list the site.
2. Modifying the web.config to white list the site.

Like in Inception, I must go deeper. Please help.

Answer 1

Your code is running from the iframe in the middle of the parent and the child window. So, anytime you call

window.parent

and your site is embedded inside an iframe and the parent is a different domain (Same origin policy), an error will be thrown. I would recommend first checking if the parent is the same origin. You need to wrap this check in a try catch.

NOTE: Most browsers, but not Edge, will not throw an error if the parent is http://localhost:xxx and the iframe is http://localhost:zzz where xxx is a different port number than zzz. So, you also need to manually check the origins match by comparing the protocol, domain, and port.

var isEmbeddedInCrossOriginIframe = false;
try {
  var originSelf = (window.self.location.protocol + '//' + 
                    window.self.location.hostname + 
                   (window.self.location.port ? ':' + 
                    window.self.location.port : '')).toLowerCase();
  var originParentOrSelf = (window.parent.location.protocol + '//' + 
                    window.parent.location.hostname + 
                   (window.parent.location.port ? ':' + 
                    window.parent.location.port : '')).toLowerCase();
  isEmbeddedInCrossOriginIframe = originSelf != originParentOrSelf;
}
catch(err) {
  isEmbeddedInCrossOriginIframe = true;
  //console.log(err);
}

Your solution will then be:

var height = $(isEmbeddedInCrossOriginIframe ? window : parent.window)
             .height();
var width = $(isEmbeddedInCrossOriginIframe ? window : parent.window)
            .width();