Доступ к iframe.contentWindow.document не работает с помощью postMessage ()

Question

Моя цель - добавить css к контенту iframe с родительской страницы. У меня есть два разных домена, один из которых отображает iframe от другого, я использую postMessage, чтобы обойти проблему политики same-origin, однако, похоже, что она не работает должным образом. Когда я пытаюсь console.log(iframe.contentWindow) я получаю сообщение об ошибке в консоли Uncaught DOMException: Blocked a frame with origin "http://parent.domain.com" from accessing a cross-origin frame.

iframe

<iframe
        sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
        src="https://domain.with.iframe.content"
        width="100%"
        frameBorder="0"
        id="iframe-1"
    ></iframe>

Страница с iframe.

<script>
    window.addEventListener('message', function(e) {
        var iframe = document.getElementById("iframe-1");
        console.log(e)
        console.log(e.origin)
        console.log(iframe)
        console.log(iframe.contentWindow)
    }, false);
</script>

Страница, которую я ' m iframing.

<script>
    var body = document.body
    body.onload = function resize() {
        parent.postMessage(["hey"], "*");
    }
</script>
</script>

Из консоли видно, что прослушиватель событий message работает, однако эта строка console.log(iframe.contentWindow) выдает ошибку. Любая помощь будет высоко ценится, спасибо.

Answer 1

Добавление ответа из моих комментариев:
Вы не можете получить доступ к iframe.contentWindow из родительского фрейма, см. SecurityError: заблокирован фрейм с источником из-за доступа к фрейму перекрестного происхождения
Таким образом, вам нужно будет передать CSS, который вам нужен, туда и обратно с postMessage.

В зависимости от того, как вы получите CSS, но при условии, что у вас есть строка, вы можете отправить эту строку в iframe, используя postMessage. Внутри iframe вы можете создать тег стиля, установить для внутреннего HTML этого тега строку CSS и добавить его в заголовок документа. Как и в этой статье в разделе Глобальные стили https://dev.to/karataev/set-css-styles-with-javascript-3nl5