Failed to execute 'postMessage' on 'DOMWindow': The target origin provided does not match the recipient window's origin ('null')
JavascriptFacebookHerokuJavascript Problem Overview
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?
Javascript Solutions
Solution 1 - Javascript
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.
Solution 2 - Javascript
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 3 - Javascript
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 4 - Javascript
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 5 - Javascript
In my case I didn't add the http:// prefix. Potentially worth checking.
Solution 6 - Javascript
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 7 - Javascript
My issue was I was instatiating the player completely from start but I used an iframe instead of a wrapper div.
Solution 8 - Javascript
This also reliably happens if you try to create a player without a videoId. Looks like that's not supported.
Solution 9 - Javascript
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', '*');