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

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?

Solution 1:^[1]

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!", '*');

Solution 2:^[2]

To check whether the frame have been loaded, use onload function. Or put your main function in load: I recommend to use load when creating the iframe by js

 $('<iframe />', {
   src: url,
   id:  'receiver',
   frameborder: 1,
   load:function(){
     //put your code here, so that those code can be make sure to be run after the frame loaded
   }
   }).appendTo('body');

Solution 3:^[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.

Solution 4:^[4]

In my case I didn't add the http:// prefix. Potentially worth checking.

Solution 5:^[5]

In my case SSL certificate was invalid for iframe domain, so make sure that iframe URL you're trying to send messages to is opening w/o any issues (in case you load your iframe over https).

Solution 6:^[6]

My issue was I was instatiating the player completely from start but I used an iframe instead of a wrapper div.

Solution 7:^[7]

This also reliably happens if you try to create a player without a videoId. Looks like that's not supported.

Solution 8:^[8]

I was tryina do cross-domain messaging between parent page and embedded iframe. Was unsuccessful using
window.postMessage('text', '*'); - the message just never got received on the iframe's side.

Changing to this nailed it:
document.querySelector('iframe').contentWindow.postMessage('text', '*');

Solution 9:^[9]

In my case the app was served with SSL (HTTPS) and the iframe was calling a pure HTTP page. My browser blocked the request for security reasons. I needed to disable it by clicking the padlock next to the URL or use an https link to the iframe page.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Jamie McCrindle
Solution 2	twiii_florence
Solution 3	dougwig
Solution 4
Solution 5	Artyom Pranovich
Solution 6	Walter Kimaro
Solution 7
Solution 8	avalanche1
Solution 9	Sixteen

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

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]