title: How to properly use postMessage to do cross-domain messaging with html5 and modern browsers ? I still get errors
body: <p>I'm sure something is wrong here but I can't quite put a finger on it... The example <a href="http://html5demos.com/postmessage2" rel="nofollow">here</a> behaves just fine with no notices or errors on the console, so it means my browser supports cross domain messaging with html5 (of course it does, it's Chrome 14..).</p>
  
  <p>My code does more or less the following: A script loaded in WebsiteA.com created an iframe and appends it to WebsiteA.com's document. The frame appended will contain WebsiteB.com and when it's loaded, it must send a message to it's parent, WebsiteA.com, to tell it that WebsiteB.com is ready to receive some JSON. When WebsiteA.com get's this message, it sends back the JSON.</p>
  
  <p>So WebsiteA.com has a line just before <code>&lt;/body&gt;</code> just like this: <code>&lt;script scr="http://WebsiteB.com/load-my-iframe.js" type="text/javascript"&gt;&lt;/script&gt;</code>, and inside the <code>load-my-iframe.js</code>, I have the following:</p>
  
  <pre><code>var child = document.createElement('iframe');
  child.src = 'http://WebsiteB.com/child.html';
  
  var body = document.getElementsByTagName('body')[0]
  body.appendChild(child);
  
  var SomeJSON = {"something" : "that WebsiteB should have"};
  
  window.onmessage = function (e) {
      if (e.origin === 'http://WebsiteB.com' &amp;&amp; e.data === 'ready') {
              e.source.postMessage(SomeJSON, 'http://WebsiteB.com');
      }
  }
  </code></pre>
  
  <p>So that creates the iframe element, appends it to WebsiteA.com's document and waits for it to say it's ready (I guess...). On WebsiteB.com, I have the file child.html that is <code>src</code> of the iframe loaded in WebsiteA.com's document, and that file has the following:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="pt"&gt;
      &lt;head&gt;
          &lt;title&gt;WebsiteB.com&lt;/title&gt;
          &lt;script type="text/javascript"&gt;
              window.onload = function () {
                  window.parent.postMessage('ready','*');
              }
  
              window.addEventListener('message', receiveMessage, false);
              function receiveMessage(event) {
                  if (event.data.something === "that WebsiteB should have") {
                      document.write('It worked!');
                  }
              }
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And now the weird stuff:</p>
  
  <p>Sadly I do not own WebsiteA.com and WebsiteB.com, but I managed to have this working between one top level domain and a subdomain (that ends with .no.de). It really does work, BUT in Google Chrome 14's console I get the classic <code>Unsafe JavaScript attempt to access frame with URL <a href="http://WebsiteA.com/" rel="nofollow">http://WebsiteA.com/</a> from frame with URL <a href="http://WebsiteB.com/child.html" rel="nofollow">http://WebsiteB.com/child.html</a>. Domains, protocols and ports must match.</code>. The <a href="http://html5demos.com/postmessage2" rel="nofollow">example from html5demos</a> works just fine without this error.</p>
  
  <p>Why do I get this error and how do I get rid of it ?</p>