70

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?

Sascuash
  • 3,661
  • 10
  • 46
  • 65

10 Answers10

93

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.

Bob Stein
  • 16,271
  • 10
  • 88
  • 101
Gustaff
  • 954
  • 7
  • 2
  • 10
    "the target window you're/FB is posting message is loaded" I am new to web dev. WHat is this supposed to mean? – praxmon Jun 13 '14 at 04:31
  • 19
    @PrakharMohanSrivastava good question -- the grammar makes this answer difficult to understand. – tadasajon Sep 15 '15 at 20:02
  • 5
    I think he's saying that posting to a window whose document has not finished loading (yet) causes this error. – doug65536 Jan 20 '16 at 09:28
  • 2
    It sounds like Facebook's "out of the box" code doesn't work. How would I ensure the target window's loaded? – Adrian Aug 21 '17 at 23:54
42

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!", '*');
Jamie McCrindle
  • 9,114
  • 6
  • 43
  • 48
  • 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](https://stackoverflow.com/questions/44565959/javascript-postmessage-to-sandboxed-iframe-why-is-recipient-window-origin-nul). So I think it is recommended to use the asterisk, since you did not allow changing the URL. – Yeti Mar 04 '18 at 22:01
  • 2
    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. – Ben Jun 04 '19 at 14:18
  • 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. – Wylie May 17 '22 at 13:30
8

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.

dougwig
  • 526
  • 6
  • 8
7

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');
twiii_florence
  • 79
  • 1
  • 4
  • 1
    This worked for me. Without jQuery: `iframeReference.addEventListener('load', () => { iframeReference.contentWindow?.postMessage('hello', 'https://iframe-domain.com') })` – Ricardo Passos Jan 16 '23 at 13:44
2

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

nikk wong
  • 8,059
  • 6
  • 51
  • 68
1

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

Artyom Pranovich
  • 6,814
  • 8
  • 41
  • 60
1

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

avalanche1
  • 3,154
  • 1
  • 31
  • 38
0

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

Walter Kimaro
  • 250
  • 3
  • 4
0

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

Mark
  • 6,269
  • 2
  • 35
  • 34
0

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.

Sixteen
  • 443
  • 1
  • 4
  • 23