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

这只能利用windows.postMessage（）在iframe和父窗口之间推送消息。为了使其工作，您需要编写存在于两个站点上的JS，因此如果第三方域不在您的控制之下，那么此解决方案将不适合您：

在父页上

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;
    };
};

在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);
}

在实践中，此类功能的一个很好的例子是iframereszier库，你可以在这里查看：

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

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

2 个答案: