jquery - Edit the css of a cross domain iframe that is inside an internal iframe

Question

I checked the (many) questions asked here about editing the CSS of an iframe, and I was able to edit other iframes that come from our own site, but this is quite different.

I have an iframe (hosted on the same site) that creates some HTML elements and then calls a cross domain iframe to display a game (inside it).

So far I have been able to freely edit the internal iframes by using jquery .contents() and .find() function:

var first-iframe =  $('#iframeid').contents();
first-frame.find('.to-modify').css('blabla','10);

The contents allows me to .find() any element inside the iframe and modify the css. The problem comes when I have the second, cross domain iframe.

The first .contents() doesn't seem to give me access to the second iframe, and I'm unsure if doing a queued call works. I tried something like this:

first-iframe.find('#second-Iframe').contents();

But that doesn't seem to work either. I read many other options to edit css, but most of them don't work with cross domain iframes.

Sorry for not providing any code, it contains some sensible logic. I hope I made my issue clear enough.

Answer 1

There is no way to edit a Cross Domain IFrame, because it would open all kinds of security loopholes.

Imagine for a second I open a hidden Cross Domain IFrame to your bank and can run rogue JS manipulations on it?

You can however, manipulate domains within the same level, or lower in your domain chain, but thats because of "the internal trust" into the domain level, e.g: example.com can edit bar.example.com

If there is a way, it's a CVE, and should be reported to be fixed.