Failed to execute 'postMessage' on 'DOMWindow': The target origin provided does not match the recipient window's origin ('null')

Question

I have a game in heroku, now I'm trying to make it work in Facebook canvas, but, while it works in Firefox, in Chrome and IE doesn't.

IE shows a warning with a button, when clicking the button, it shows the content.

In chrome, I get this error:

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://game.herokuapp.com') does not match the recipient window's origin ('null').

What's wrong?

Answer 1

Make sure the target window that you (or Facebook) is posting a message to, has completed loading. Most of the times I've gotten this error were when an iframe I was sending messages to had failed to load.

Answer 2

Another reason this could be happening is if you are using an iframe that has the sandbox attribute and allow-same-origin isn't set e.g.:

// page.html
<iframe id="f" src="http://localhost:8000/iframe.html" sandbox="allow-scripts"></iframe>
<script type="text/javascript">
    var f = document.getElementById("f").contentWindow;
    // will throw exception
    f.postMessage("hello world!", 'http://localhost:8000');
</script>

// iframe.html
<script type="text/javascript">
    window.addEventListener("message", function(event) {
        console.log(event);
    }, false);
</script>

I haven't found a solution other than:

• add allow-same-origin to the sandbox (didn't want to do that)
• use f.postMessage("hello world!", '*');

Answer 3

RELATED NOTE: When messaging from an iframe to the host page, you will get this error if you forget to use window.top.postMessage.

Without .top you are sending the message to iframes within the iframe.