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?

Cinderella

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.

Operator

"the target window you're/FB is posting message is loaded" I am new to web dev. WHat is this supposed to mean? – Tanya

@PrakharMohanSrivastava good question -- the grammar makes this answer difficult to understand. – Smile

I think he's saying that posting to a window whose document has not finished loading (yet) causes this error. – Mairemaise

It sounds like Facebook's "out of the box" code doesn't work. How would I ensure the target window's loaded? – Addend

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-same-origin"></iframe> /* https://www.w3schools.com/tags/att_iframe_sandbox.asp */
<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!", '*');

Clunk

But using both allow-scripts and allow-same-origin is unsafe (Firefox says: "Warning: Using both allow-scripts and allow-same-origin invalidates the iframe sandbox attribute."). Related to this question. So I think it is recommended to use the asterisk, since you did not allow changing the URL. – Definiendum

On the other side, I tried to window.postMessage from iframe, Error message in conlsoe show that the domain has to match, With window.parent.postMessage, it still complains with the same error message. window.parent.location.origin is also denied access. Then I tried '*' as origin, it works. Turns out host localhost and 127.0.0.1 doesn't match. – Leo

I wanted something for local development without having a server, I don't want to include any Node.js or Apache, this was the only solution that provided something for my use case. Many thanks. – Into

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.

Buy

Answer 4

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');

Venessavenetia

This worked for me. Without jQuery: iframeReference.addEventListener('load', () => { iframeReference.contentWindow?.postMessage('hello', 'https://iframe-domain.com') }) – Houlberg

Answer 5

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

Unbelievable

Answer 6

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).

Grover

Answer 7

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

Parmenter

That's because, in the first case, the message is being sent to the parent window – Guard

Answer 8

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

Marten

Answer 9

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

Sigismund

Answer 10

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.

Expletive

Answer 11

The easiest way to get this message is to forget the second "origin" argument in the call postMessage(message, origin). "origin" in this context are the origins of the pages you're happy to send your message to. (The user may have navigated away from the origin you presume. This gives you the chance to protect yourself. Put "*" to rule this out as a cause of your problem.)

Actable