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.

Answer 2

This is only possible leveraging the windows.postMessage() to push messages between the iframe and the parent window. In order for this to work you'll need to write JS that exists on both sites, so if the 3rd party domain isn't under your control then this solution won't work for you:

On Parent Page

window.onload = function () {
    var iframeWin = document.getElementById("da-iframe").contentWindow,
        form = document.getElementById("the-form"),
        myMessage = document.getElementById("my-message");

    myMessage.select(); 

    form.onsubmit = function () {
        iframeWin.postMessage(myMessage.value, "http://domainwithiframe.com");
        return false;
    };
};

In iframe

function displayMessage (evt) {
    var message;
    if (evt.origin !== "http://domainwithiframe.com") {
        message = "You are not worthy";
    } else {
        message = "I got " + evt.data + " from " + evt.origin;
    }   
    document.getElementById("received-message").innerHTML = message;
}

if (window.addEventListener) {
    // For standards-compliant web browsers
    window.addEventListener("message", displayMessage, false);
} else {
    window.attachEvent("onmessage", displayMessage);
}

A good example of this type of functionality in practice is with the iframereszier library which you can review here:

http://davidjbradshaw.github.io/iframe-resizer/