Develop Reference

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?

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.

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

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.

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

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

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

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

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

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

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.

communication between an iframe and the page its part of through javascript in ie8

I have seen many questions like this but have not found anything that seems to help with my specific situation so I apologize if this question seems repetitive.
I have a site www.foo.com and have an iframe in it. When information I click on an a tag in foo.com a javascript function is called that passes a new image to the iframe to show the user. The communication between iframe and its "parent" seems to work fine on all browsers EXCEPT RANDOM IE8 PAGES. I get the following error message "access is denied" and the browser points to the function that has been activated. Following is a piece of code from the site to see how it works.
the iframe:
<iframe scrolling="no" src="foo.com/bar" id="ifram" name="ifram"></iframe>
the a tag:
The javascript:
if($(this).val() == '242'){
document.getElementById('ifram').style.border='0px';
document.getElementById('ifram').style.background = "url('../product_images/uploaded_images/Flag.jpg')";
document.frames.ifram.document.body.style.backgroundColor="transparent";
This is just a snippet of a code and does not include the whole process of the ajax call to get the image but was not sure if the ajax is part of the issue. I get an undefined error in firefox but the function still fires . I am assuming I would just need to use window.frames for firefox.
Overall, any help on how to resolve this issue would be appreciated. I am wondering if there is a security issue that has to do with browser settings or if its part of how I coded.
Thanks in advance

It's important to note that if your iframe tag is on a page located at http://www.foo.com but the iframe points to http://foo.com it's considered a sandboxing violation and you'll get access denied. Make sure you're pointing to the same domain as your page is on. You can use relative URLs in the iFrame src tag, too, so you can change it to src="bar.php" (without any domain information).

You dont need to use document.frames before document.frames.ifram.document.body.style.backgroundColor = "#ccc";. Just ifram.document.body.style.backgroundColor = "#ccc"; will do.

top.window.location internet explorer permission denied error

I want to do redirect a page from an iframe, specifically i want to redirect the top page from an iframe.
so im using:
top.window.location = 'http://xxx'
Its working fine in mozzila or chrome, but in ie i get: permission denied error. I found some infor that this is cross-domain scription problem:
http://www.mombu.com/microsoft/microsoft/t-ie-shows-permission-denied-javascript-error-on-toplocationhre-4565452-last.html
i i dont know how to do it any other way - to redirect parent window to some url from a iframe, wich sits on different url (obviously)
thank for your help...

There is a way to redirect the parent frame cross-domain. It's a trick, actually. :-) It will work if you have access to the server hosting the parent frame.
Inside your frame, create a child frame, too small to be seen, from the same domain as the parent frame. Your little child frame is allowed to change the parent document's location.
Parent:
<iframe src="http://other-domain/doc.html"></iframe>
doc.html
All the stuff from the document...
<iframe width="0" height="0" src="http://original-domain/trick.html"></iframe>
trick.html
<script>
window.location.replace("http://xxx");
</script>

I had the same problem, using:
top.window.location= "http://www.google.com";
and I changed it to:
window.parent.location = "http://www.google.com";
Which solved it for me.

document.domain "permission denied" issues with IE8

I'm currently trying to load a page within a sub-domain, onto my main domain, using an iframe, and have the sub-domain call a javascript function (when dom-ready) within my main domain, so that the main domain can resize the iframe according to the height of the content.
Here's an example
www.mysite.com (code within page):
<script type="text/javascript">
document.domain = "mysite.com";
function doSomething() {
//do something
}
</script>
<iframe id="mytestid" src="test.mysite.com" height="0" width="900"></iframe>
And for my other site, test.mysite.com, here's the code within the page:
<script>
document.domain = "mysite.com";
$(document).ready(function () {
window.parent.doSomething();
});
</script>
This seems to work just fine for firefox, safari, and chrome, but not for IE8.
IE8 always gives me a "permission denied" error when making the call window.parent.doSomething()
I haven't been able to test on IE7 or IE6 to see if the problem persists, but has anyone encountered this problem? Have I missed something with the way I'm laying out the code?
Thanks for the help guys.

document.domain “permission denied” issues with IE8 SOLVED!!
just like other user said, just set a timeout of a couple o seconds after set document.domain where the iframe is on page, and then call your second page within the iframe.
you need to set the SRC value of your iframe, a couple of seconds after you set document.domain on IE8 and it will work..

Here's a thread with a lot of comments about a few possible problems:
http://waelchatila.com/2007/10/31/1193851500000.html
Note that I did not test this, as I don't have IE. Unfortunately, neither seem to convincing from my perspective - try it and see if it works for you.
So, from the above post, it seems there are two possible causes:
The post alleges IE requires all documents to have the same domain. If you have more documents (iframes and such), try removing them and testing with just these two (main and iframe)
See the last comment in the post - it might just be a race condition. Try putting it in a setTimeout with a few seconds of waiting after both pages have set document.domain to the same value

I ran in the same issue and using a timeout didn't solve the issue.
As I had another site with similar settings where all was working fine, I opened both windows side by side and noticed in the status bar at the bottom that one was under "Local Intranet" while the other was under "Trusted Sites".
This led me to another point to check : make sure that both sub-domains appear in the same Security Zone in IE's Internet Security Properties ! If they don't, then you'll have a "Permission denied" error.

Dynamic iframe not loaded occasionally in Firefox

I have some JavaScript code that dynamically injects an iframe in a given HTML page. Unfortunately, in Firefox, and only in Firefox, although the iframe is created from time to time the relevant URL isn't loaded into it.
I know it wasn't loaded because the relevant URL doesn't appear in the Firebug Net tab, and when I inspect the iframe I don't see any expected HTML code in there (when the iframe is on the same domain as the outlying page). I don't see any JavaScript or network errors either.
Here's a code snippet, I've checked all the relevant variables are correct:
var iframe = document.createElement("iframe");
iframe.width = options["w"];
iframe.height = options["h"];
iframe.scrolling = "no";
iframe.marginWidth = 0;
iframe.marginHeight = 0;
iframe.frameBorder = 0;
iframe.style.borderWidth = 0;
if (node.childNodes.length > 0)
node.insertBefore(iframe, node.childNodes[0]);
else
node.appendChild(iframe);
iframe.contentWindow.location = iframeSrc + "?" + querystring;
Here's an example URL that is set for the iframe (the issue also recreates when the URL points to an external server, had to omit the 'http://' at the beginning otherwise I couldn't post the question):
127.0.0.1:8000/widget/iframe/index.html?style=slide-top-to-bottom&culture_code=en_us&c=26&sc=1324&title=Top%20News&caption=Top%20Stories&order=relevance&count=20&w=250&h=300&timestamp=true&scrollbar=false&theme=ui-lightness&className=8815455464592103&referrer=http%3A%2F%2F127.0.0.1%3A8000%2Fwidget%2Fbuilder%2Findex.html
Doing some research on the web, I found this unfixed Firefox bug which seems related to this issue:
https://bugzilla.mozilla.org/show_bug.cgi?id=279048
After reading the bug, I tried several solutions none of which solved the issue:
Setting iframe.src instead of iframe.contentWindow.location
Adding a random parameter to the querystring
Adding the '#' symbol with a random number at the end of the URL
Giving the iframe a random name
Does anyone have a workaround for this annoying Firefox bug? Or is the issue I'm describing unrelated to the bug and has a different solution?

What happens if you add this to the bottom of your script?
iframe.contentWindow.location.reload(true);
Perhaps it will stop the need to reload in FF.
EDIT
Fixed the example

Solved the issue, I was looking in the wrong place. The HTML file where this dynamic iframe was loaded had an empty iframe tag that was removed from the DOM, after which the dynamic iframe was injected instead.
Apparently Firefox cached the last URL for this iframe, and loaded it immediately as the external page loaded. I know because I saw the relevant HTML file being loaded twice in the Firebug Net tab rather than once upon the injection.
After I got rid of this empty iframe tag and relied only on the injected iframe, everything started to work well and the issue didn't reproduce anymore. I guess Firefox didn't like handling this scenario, some kind of bug maybe?
Thanks anyway for helping me out, it gave me the inspiration for the right solution :)