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.

html5 javascript- How to catch attempt to initiate navigation out of sandboxed iframe?

I have an sandboxed iframe that doesn't allow changing location:
<iframe sandbox="allow-forms allow-popups allow-pointer-lock allow-same-origin allow-scripts" class="iframe visible" src="thesource.html" width="100%" scrolling="auto" frameborder="0"></iframe>
If the iframe tries to unframe itself or change location I see a blank page because the browser stops the iframe's operation. This is the log from Chrome:
Unsafe JavaScript attempt to initiate navigation for frame with URL 'http://example.com' from frame with URL 'http://otherdomaian.com'. The frame attempting navigation of the top-level window is sandboxed, but the 'allow-top-navigation' flag is not set.
That is great but I want to catch this so if it happens I'll move to the next iframe. So how do I catch this attempt?
EDIT:
I added a jsfiddle code (check the error in the console log)
I also tried to listen for an event with no success:
document.addEventListener('error', receiveMessage, true);
function receiveMessage(error) {
alert("iframe tried to unframe itself");
}

I am new here so I don't have enough reputation to comment on answers and I apologize if I am doing this wrong, but the accepted solution will unfortunately not be able to accomplish what you are looking for.
I was able to demonstrate what I mean by having the script from the JSFiddle above run once the DOM is ready (there will be no alert but still an error in the console). Here's a little more detail on what happens currently with that fiddle:
// running with the No wrap - in <head> option
var frame = document.querySelector('iframe'); // null, the iframe isn't there yet
try {
frame.src="http://wedesignthemes.com/themes/redirect.php?theme=wedding";
} catch(e) {
// TypeError here, no hints about the iframe :(
alert('Error!');
}
The exception that is being caught has nothing to do with the iframe, it is actually a type error from trying to set the src property on a null value.
What you really want to do is catch the error inside of the iframe (when the sandboxed script tries to access window.top), but this is not possible because of the Same-origin policy. Btw, setting the "allow-same-origin" sandbox flag only has any effect when the iframe content is being served from the same origin as the top level document. E.g. as soon as the src or location of the iframe is changed to a different origin, there's no way to touch anything inside.
There are ways to communicate across iframe boundaries, such as with window.postMessage or the older and hackier way of using the iframe's location.hash, but I am assuming you can't affect the source of the page going into your iframe. (A nice developer would of course be open to suggestions and see that a feature like this could be useful.)
The only way that I was able to catch this error without violating any browser security policies was to set the allow-top-navigation sandbox flag and then use the window.onbeforeunload handler in the top level document to catch the navigation attempt from the child iframe. I would never recommend this because the user experience is awful. There is no way to prevent the navigation without prompting the user about whether they want to leave the page or not. Proof of concept below:
<iframe id="myframe" sandbox="allow-scripts allow-top-navigation"></iframe>
<script>
var url = "http://wedesignthemes.com/themes/redirect.php?theme=wedding",
frame = document.getElementById("myframe"),
listener;
listener = window.addEventListener("beforeunload", function(e) {
e.preventDefault();
e.stopImmediatePropagation();
// The iframe tried to bust out!
window.removeEventListener("beforeunload", listener);
return "This is unavoidable, you cannot shortcut a " +
"navigation attempt without prompting the user";
});
frame.src = url;
</script>
So unfortunately I can't find any ways to do this nicely in current browser implementations without help from your 3rd party content developer. I read some interesting things in the HTML5 spec that might allow us to do things like this in the future (and am unfortunately maxed out on my number of links I can insert here), so I would keep an eye out as things progress.

Example:
An with extra restrictions:
<iframe src="demo_iframe_sandbox.htm" sandbox=""></iframe>
the sandbox attribute is supported in Internet Explorer 10, Firefox, Chrome, and Safari.
Note: The sandbox attribute is not supported in Internet Explorer 9
and earlier versions, or in Opera.
Definition and Usage
If specified as an empty string (sandbox=""), the sandbox attribute
enables a set of extra restrictions for the content in the inline
frame.
The value of the sandbox attribute can either be an empty string (all
the restrictions is applied), or a space-separated list of pre-defined
values that will REMOVE particular restrictions.
Differences Between HTML 4.01 and HTML5
The sandbox attribute is new in HTML5.
Syntax
<iframe sandbox="value">
Attribute Values
"" => Applies all restrictions below
allow-same-origin => Allows the iframe content to be treated as being from the same origin as the containing document
allow-top-navigation => Allows the iframe content to navigate (load) content from the containing document
allow-forms => Allows form submission
allow-scripts => Allows script execution
javascript: is a kind of weird URI protocol. It works in some contexts, like , but not all - for instance, a window's location can not be set to such a URI. (While you can assign a javascript: URI to window.location as a really roundabout way of running a script, the window's location doesn't stay set to that value.)
To write content into an IFRAME, get a reference to the frame's document and write to it. Doing so will require that you set the allow-same-origin sandbox flag.
<iframe id="myframe" sandbox="allow-scripts allow-same-origin" src="about:blank"></iframe>
<script>
var frame = document.getElementById("myframe");
var fdoc = frame.contentDocument;
fdoc.write("Hello world"); // or whatever
</script>
Live example: http://jsfiddle.net/wUvrF/1/

You can now do this with allow-top-navigation-by-user-activation

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.

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.

Refresh iframe in javascript

I tried to run a line of code as the following:
document.getElementById('frame0').contentDocument.location.reload(true); to force iframe to refresh or reload but I got the error like "permission denied" in firefox. Does anyone know why? and help to offer a solution? Thanks!

It is probably because of crossdomain issues - looks like your iframes content is from another domain as your mainframe (from which you run your js code). FF is very restrictive concerning crossdomains.

You can't reload a document that comes from a different hostname, due to the Same origin policy, which applies in all browsers.
You would have to remove the iframe from the page and replace it with a new one:
var iframe= document.getElementById('frame0');
var newiframe= document.createElement('iframe');
newiframe.src= iframe.src;
iframe.parentNode.replaceChild(newiframe, iframe);
However this will load the original src of the <iframe>, which won't be the same as the current location if the user has navigated the page since.