В чем разница между postMessage() и dispatchEvent() в отношении политики происхождения?

Question

У меня есть этот код, я установил начало MessageEvent в *, но все же подсказки консоли Заблокирован кадр с источником «AAAA» от доступа к кадру с источником «BBBB». Протоколы, домены и порты должны совпадать. Кто-нибудь знает почему?

var size = { 
    width: document.body.scrollWidth, 
    height: document.body.scrollHeight 
    } 
    var evt = new MessageEvent("dimensionMessage",{ 
     "data": size, 
     "origin":"*" 
    }); 
    window.parent.dispatchEvent(evt); 

Однако, если я использую window.parent.postMessage(size, "*"), это работает.

Answer 1

В сообщении об ошибке указано, что iframe с перекрестным началом не может вообще вызывать метод из родителя, если он находится в другом начале; который включает в себя метод dispatchEvent (в противном случае iframe мог бы, например, генерировать события мыши на родительской странице).

API-код postMessage является исключением из этого, разработанным специально для обеспечения четкой передачи данных по перекрестному потоку.

(Установка origin к «*» не поможет здесь, в общем, это свойство, как ожидается, будет установлен в браузере, когда сообщение посылается через postMessage, создание вручную MessageEvent объект в основном только полезно, когда вам хотите имитировать на принимающей странице прием внешнего сообщения)

Answer 2

Если два документа не имеют одинакового происхождения, они имеют очень ограниченный доступ, вызванный политическими ограничениями одного и того же происхождения.

В вашем примере dispatchEvent() имеет ограниченный доступ к разным рамкам (window.parent).

window.postMessage() позволяют выполнять перекрестную пересылку сообщений, избегая ограничений политики одного и того же происхождения.

Параметр targetOrigin для window.postMessage() указывает, для чего должно происходить событие otherWindow для отправки события, либо как буквальная строка «*» (без указания предпочтения), либо как URI.

Обратите внимание, что в вашем производственном коде вы должны использовать определенный URI, чтобы сделать ваш код более безопасным. Более подробную информацию о том, как использовать window.postMessage() безопасно, можно найти здесь https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage