编辑内部iframe中的跨域iframe的css

Question

我查看了这里关于编辑iframe的CSS的（许多）问题，并且我能够编辑来自我们自己网站的其他iframes，但这是完全不同的。

我有一个iframe（托管在相同的网站上），它创建一些HTML元素，然后调用跨域iframe来显示游戏（内部的）。

到目前为止，我已经通过使用jquery .contents()和.find()函数自由地编辑内部iframes：

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

contents 使我能够在 iframe 内查找并修改 css。问题在于，当我有第二个跨域的 iframe 时会出现问题。

第一个 .contents() 似乎无法让我访问第二个 iframe，而且我不确定是否可以通过排队调用来解决。我尝试了以下代码：

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

但是这似乎也不起作用。我阅读了许多其他编辑css的选项，但其中大多数都无法与跨域iframe一起使用。

很抱歉没有提供任何代码，因为它包含一些敏感逻辑。我希望我已经表述清楚了我的问题。

- Obed Parlapiano

Answer 1

无法编辑跨域IFrame，因为这会导致各种安全漏洞。

想象一下，如果我打开一个隐藏的跨域IFrame到你的银行并能在其中运行恶意的JS操作？

但是，您可以操纵同一级别或更低级别的域名，这是由于对域名级别的“内部信任”，例如：example.com 可以编辑 bar.example.com。

如果有一种方法，那么它就是一个CVE漏洞，应该报告并加以修复。

- joaumg

---

噫！既然你提到了，我突然想起来在这里曾经看到有人说过完全相同的话，当时我还想着“希望我永远不用编辑跨域iframe”。谢谢！ - Obed Parlapiano

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/

。

- CodingSamurai