How do you use window.postMessage across domains?

It seems like the point of window.postMessage is to allow safe communication between windows/frames hosted on different domains, but it doesn’t actually seem to allow that in Chrome.

Here’s the scenario:

Embed an <iframe> (with a src on domain B^*) in a page on domain A
The <iframe> ends up being mostly a <script> tag, at the end of which’s execution…
I call window.postMessage( some_data, page_on_A )

The <iframe> is most definitely in the context of domain B, and I’ve confirmed that the embedded javascript in that <iframe> executes properly and calls postMessage with the correct values.

I get this error message in Chrome:

Unable to post message to A. Recipient has origin B.

Here’s the code that registers a message event listener in the page on A:

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

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

I’ve also tried calling window.postMessage(some_data, '*'), but all that does is suppress the error.

Am I just missing the point here, is window.postMessage(…) not meant for this? Or am I just doing it horribly wrong?

_{*Mime-type text/html, which it must remain.}

Answer

Here is an example that works on Chrome 5.0.375.125.

The page B (iframe content):

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

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

Note the use of top.postMessage or parent.postMessage not window.postMessage here

The page 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>

JavaScript
 
<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 and B must be something like http://domain.example

From another question, it looks the domains(A and B here) must have a / for the postMessage to work properly.

Advertisement

Answer