Отредактируйте css перекрестного домена iframe, который находится внутри внутреннего iframe

Question

Я проверил (многие) вопросы, заданные здесь о редактировании CSS iframe, и я смог редактировать другие фреймы, которые поступают с нашего собственного сайта, но это совсем другое.

У меня есть iframe (размещенный на том же сайте), который создает некоторые элементы HTML, а затем вызывает перекрестный домен iframe для отображения игры (внутри нее).

До сих пор я был в состоянии свободно редактировать внутренние фреймы с помощью Jquery .contents() и .find() функция:

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

contents позволяет мне .find() любой элемент внутри iframe и изменить css. Проблема возникает, когда у меня есть второй, перекрестный домен iframe.

Первый .contents(), похоже, не дает мне доступа ко второму iframe, и я не уверен, работает ли работа в очереди. Я пробовал что-то вроде этого:

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

Но это, похоже, не работает. Я прочитал много других вариантов для редактирования css, но большинство из них не работают с перекрестными iframes.

Извините, что не предоставил никакого кода, он содержит разумную логику. Надеюсь, я достаточно четко изложил свою проблему.

Answer 1

Невозможно редактировать кросс-домен IFrame, поскольку он откроет все виды лазеек безопасности.

Представьте себе, что я открываю скрытый кросс-домен IFrame на ваш банк и могу запускать на нем манипуляции JS-рейга?

Однако вы можете манипулировать домены в том же уровне или ниже, в доменной цепи, но тот из-за «внутреннее доверие» в уровень домена, например: example.com может редактировать bar.example.com

Если есть способ, это CVE, и следует сообщить, что он исправлен.

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/