도메인간에 window.postMessage를 어떻게 사용합니까?


88

window.postMessage 의 요점은 다른 도메인에서 호스팅되는 창 / 프레임 간의 안전한 통신을 허용 하는 것 같지만 실제로 Chrome 에서는 허용 하지 않는 것 같습니다 .

시나리오는 다음과 같습니다.

  1. 도메인 A의 페이지에 <iframe> ( src도메인 B * 사용 ) 삽입
  2. <iframe>은 대부분 <script> 태그로 끝나며 실행이 끝날 때 ...
  3. window.postMessage ( some_data , page_on_A )를 호출합니다.

<iframe>은 가장 확실하게 도메인 B의 컨텍스트에 있으며 해당 <iframe>에 포함 된 자바 스크립트가 제대로 실행되고 postMessage올바른 값으로 호출되는지 확인했습니다 .

Chrome에서이 오류 메시지가 나타납니다.

A 에게 메시지를 게시 할 수 없습니다 . 수신자는 출처 B가 있습니다.

다음은 A 페이지에 메시지 이벤트 리스너를 등록하는 코드입니다.

window.addEventListener(
  "message",
  function (event) {
    // Do something
  },
  false);

나는 또한 호출을 시도했지만 window.postMessage(some_data, '*')오류를 억제하는 것뿐입니다.

여기서 요점을 놓치고 있습니까? window.postMessage (...)가 이것을 의미하지 않습니까? 아니면 내가 끔찍하게 잘못하고 있습니까?

* Mime 형식의 텍스트 / html, 그대로 유지해야합니다.


1
이미 알고 계시 겠지만 MDC는 postMessage에 대한 훌륭한 개요를 가지고 있습니다 : developer.mozilla.org/en/DOM/window.postMessage 분명히 FF 구현의 경우, 작동하지 않는 이유를 설명하는 무언가가있을 수 있습니다.
Pekka

답변:


79

다음은 Chrome 5.0.375.125에서 작동하는 예입니다.

페이지 B (iframe 콘텐츠) :

<html>
    <head></head>
    <body>
        <script>
            top.postMessage('hello', 'A');
        </script>
    </body>
</html>

사용주의 top.postMessageparent.postMessage하지 window.postMessage여기를

페이지 A :

<html>
<head></head>
<body>
    <iframe src="B"></iframe>
    <script>
        window.addEventListener( "message",
          function (e) {
                if(e.origin !== 'B'){ return; } 
                alert(e.data);
          },
          false);
    </script>
</body>
</html>

A와 B는 다음과 같아야합니다. http://domain.com

편집하다:

에서 또 다른 질문 , 그것은 도메인 (여기에서 A와 B)가 있어야합니다 보이는 /를 들어 postMessage제대로 작동합니다.


3
페이지 A가 메시지의 출처를 확인할 때 출처에는 후행 '/'가 포함되지 않습니다. 페이지 B가 후행 '/'를 지정하는지 여부는 중요하지 않은 것 같습니다. 주목해야 할 또 다른 점은 URL이 절대 URL이어야한다는 것입니다.
Catch22

1
이 대답은 나를 약간 혼란스럽게 만들고 여전히 대답을 찾고 있습니다. blog.teamtreehouse.com/cross-domain-messaging-with-postmessage 에는 postMessage에 대한 아주 좋은 설명이 포함되어 있습니다. 중요한 것은 메시지 발신자가 수신자의 도메인을 알고 있다는 것입니다. 위의 예에서 A와 B는 같은 도메인가 될 필요는 없지만, B는 A.에 의해 사용되는 정확히 도메인 알고 있어야합니다
그렉 Bogumil

7
문제는 교차 도메인에 관한 것입니다. 허용되는 대답은 동일한 도메인에 대한 것입니다.
스택 형

@stackular, 정확히는 아닙니다. A와 B는 모든 도메인이 될 수 있습니다. 그것이 주된 이유입니다postMessage
Mic

1
+1. 이 솔루션이 우리의 경우에 효과가 있는지 확인하고 싶습니다. 다른 도메인 의 iframe이 포함 된 페이지가 있습니다 . Firefox 에서는 top 대신 window.parent.postMessage 를 사용해야하므로 Chrome 브라우저에서만 작동 합니다. 이것이 다른 브라우저에 적용될 수 있는지 여부는 알 수 없습니다.
rahmatns 19

24

로드 후 프레임에서 상위로 메시지를 게시해야합니다.

프레임 스크립트 :

$(document).ready(function() {
    window.parent.postMessage("I'm loaded", "*");
});

그리고 부모님 께 들어 :

function listenMessage(msg) {
    alert(msg);
}

if (window.addEventListener) {
    window.addEventListener("message", listenMessage, false);
} else {
    window.attachEvent("onmessage", listenMessage);
}

자세한 정보는이 링크를 사용하십시오. http://en.wikipedia.org/wiki/Web_Messaging


2

아마도 mydomain.com에서 www.mydomain.com으로 데이터를 보내려고하거나 반대로 보내려고 할 것입니다. "www"를 놓쳤습니다. http://mydomain.comhttp://www.mydomain.com 은 javascript 와 다른 도메인입니다.


2
현재 진행중인 프로젝트 file:/// 에서 로컬 파일 시스템에서만 콘텐츠를 가져올 때 도메인 오류가 발생할 수 있습니까?를 사용하고 있습니다.
Jacksonkr 2013-06-25
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.