I'm trying to send postmessage from the opened window to opener in facebook app browser, but the "opener window" never receives messages. What can be the cause of the problem?
Receiver side:
window.addEventListener('message', function (e) {
window.console.log("on message: " + e.data);
}, false)
Sender side:
window.opener.postMessage('any Message', document.location.origin);
It's hard to tell without seeing more of your code, but as this Opening facebook connect window via javascript? answer states, if you're trying to access the oAuth page, it's not possible.
Show us where you get the variable window.opener, that might add some context.
If you opened it from window.open(/page/), it appears that it is specifically blocked: How do I get around window.opener cross-domain security
as mentioned in that question:
NOTE
Social signups do not work for google, FB, etc within an iframe. I
believe they disallow them for security reasons.
Also from window.opener is null after redirect
window.opener is removed whenever you navigate to a different host
(for security reasons), there is no way around it. The only option
should be doing the payment in a frame if it is possible. The top
document needs to stay on the same host.
But as mentioned in the second answer quoted, instead of using window.opener on the opened page, do everything from the origninal page, and (IF you have access to the source of the popup), make an onmessage on the other page, like mentioned in the accepted answer there, that the correct way to do it is only in reverse:
Do it the other way around. Track the state of the child popup window
from the main (opener) window, and you could easily know when the
child window has been navigated back to you domain, so you could
"talk" to it again. But don't close the child window by itself. Let
the opener window obtain the result from the child window and then
close it.
Reference: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage#Example
For example, in your started page, do something like:
var popup = window.open(/*some URL*/);
popup.postMessage("hi");
addEventListener("message", function(e) {
console.log(e);
e.source.postMessage("Hi there"); //official workaround for window.opener on other page
})
then in your "/some URL/" source code page, do something like:
addEventListener("message", function(e) {
console.log(e);
e.source.postMessage("hi back");
});
and just play around with that strategy, but it appears window.opener is out of the picture. Just try console.logging it, it just say null.
Related
Let's say I am currently at the following link:
"localhost/admin/test" when i do
window.open("/user/list/2034", "_blank")
it will appear like this:
localhost/admin/test/user/list/2034
what can i do to make it like this instead?
localhost/user/list/2034
I am assuming that windows should be window. If it really is windows then you have a custom object and need to show us what that is before we can answer your question.
The other point to note is that window.open will open a new window, regardless what you name it, so you don't need to use the _blank name. You only need to specify a name if you want to subsequently reuse that window (e.g. open another URL in the same other window).
When at http://localhost/admin/test, if you do:
window.open("/user/list/2034")
It will go to http://localhost/user/list/2034, unless...
window.open has been redefined somewhere. You can do console.log(window.open) and the console should say something like ƒ open() { [native code] } if it hasn't been redefined.
Your web server is responding to /user/list/2034 with a redirect to /admin/test/user/list/2034. The network tab in your developer console will show you the HTTP requests and responses where you can see if the web server is redirecting.
Your link really doesn't start with a / and you actually have window.open("user/list/2034")
You're viewing a cached version of the page with the above error in it, the source code is fixed but the browser hasn't loaded it. Try again in a private browsing window to see if it still happens.
You have some browser plug-in or extension interfering with your page. Try another browser/computer without the extensions and see if it still happens.
I am developing a chrome extension, in which I am working on two windows. The second window has been opened by the first window, through JavaScript. What I want to do is, to get the URL of the window opened by the first window. I have tried some methods, like using cookies, local Storage but I failed because of the cross origin policy. Now I came to know after a tutorial on postMessage() API of JavaScript that it overcomes the policy of cross origin. What I am doing is, I am accessing the URL from my localhost, and trying to get the URL of any other site, or possible I can get a simple message from that, but its not working for me as well. As I am not even getting any error and not even a warning. My goal is to get the URL, after when the child window loads. I will require on load function, so that I can check when the window is loaded right after it send me the message to my current window where it has been opened from.
My Code
var win = window.open('https://javascript.info/','_blank');
win.focus();
win.postMessage('The URL of the window is : ' + document.URL,'http://localhost.com/ext_files/index.php');
window.addEventListener("message", function(event) {
if (event.origin != 'https://javascript.info/') {
// something from an unknown domain, let's ignore it
return;
}
alert(event.data);
});
I've read up on how to avoid security issues when using window.postMessage() -- particularly the suggestions in this MDN doc.
But given all the preventative tips are all client-side, I'm having trouble understanding how they'd stop bad actors from simply editing changing the code in their developer tools.
Here's the situation I'm dealing with. I have a page that will contain an embedded iframe, and I have control over that iframe (it lives on a separate domain, but the vendor that provides it allows me to put custom JavaScript in the iframe source). The parent window and the iframe will communicate back and forth.
/**
window at https://firstgoodorigin.com
Receives message from iframe to indicate
its contents have loaded.
Once that message has been received,
send a message back to the iframe.
*/
function handleMessage(message) {
if (message.origin === 'https://secondgoodorigin.com') {
// verify and sanitize what's in message.data
// (it'll be something like "loaded")
// if it's good, send a message back
message.source.postMessage('foo', 'https://secondgoodorigin.com');
}
}
window.addEventListener('message', handleMessage, false);
/**
iframe at https://secondgoodorigin.com
Tell parent window it has loaded. Once that happens
it will receive a message from the parent window, for
which we add an event listener.
*/
window.addEventListener('load', () => {
window.parent.postMessage('loaded', https://firstgoodorigin.com);
});
window.addEventListener('message', (message) => {
if (message.origin === 'https://firstgoodorigin.com') {
// verify and sanitize what's in message.data
// do stuff
}
});
Given both the window source and iframe source will be editable inside someone's web inspector, what's to stop them from removing all the validation logic and replacing it with something malicious? What am I missing here?
As mentioned in the comment by Will any code in the browser can be edited by the end user if he or she may want to. The point of the locking down postmessages is to stop a third web site from posting unwanted messages.
If a user is logged into the site in question, and then loads a malicious website, that website could load the web site in question in an iframe or a popup, and then post messages unauthorized to the site.
I want to pass the Window reference using PostMessage but getting this exception
Uncaught DataCloneError: Failed to execute 'postMessage' on 'Window': An object could not be cloned.
below is my code:
var postWindow = window.document.getElementById('dummyId').contentWindow;
postWindow.postMessage(window, 'http://localhost:9090');
How to pass this Window reference?Any idea?
You can't. Too much stuff dangling off window does not fall into the supported types.
Pass the data you need, not absolutely everything.
I have main MainAPP application(running in 8080) in that i have a button,when i clicked that button its open a pop with new iframe and loading content from some other server(running in 9090).when i clicked the cancel button in popup,that popup has to be closed.so i need the window reference of parent(MainApp) in popup window.
So the page in the iframe needs to post a message to the parent window saying "Close me".
The event handler handler listening for the message then needs to remove the iframe.
Make the JavaScript belonging to the window containing the frame responsible for removing the frame.
The postMessage function exist to talk cross origin. It is a tool to be able to go around security (in a secure way) when for instance an iframe has a site of different origin.
You do not want to try to send the window object into it, even if you find a way.
The restriction exists so that any iframed site cannot access and modify content of its parent window.
Instead, you should define an API of messages that can be sent and handled by the other site. But it is up to the other site to handle them by itself. That way communication can be more restricted and secure.
I'm opening a popup and want to have a click action in it cause the execution of some jQuery in the page that opened it. Everything I find online says I should be able to do that with window.opener, (e.g. JQuery - Write to opener window)
But when I console.log window.opener, it's just 'true', not a real object. window.opener.jQuery is undefined as is window.opener.$ and 'window.opener.document'.
Here's the window open code:
window.open('http://google.com' , "moderatorWindow", 'width=300, height=300');
This is in Safari. Other pages are able to launch a popup and when I inspect window.opener on those, I get a real object. What am I doing wrong?
Your variable is true and not an object because of same-domain policy rules. Just like an iframe, if the popup you open is not on the same domain or sub-domain then it is lost to you after you create it. The web would be a very unsecure place if I could say, open a (hidden) iframe on my site to gmail.com and was able to read your email.
Even if the popup is on a sub-domain you have to do extra work and set the document.domain value of both windows to the root domain (eg. mydomain.com). This is to ensure that the popped-up site wants to be known to its parent (again, think security, if my coke.ning.com community could open a hidden iframe to your pepsi.ning.com and do brute force attempts at a login, etc.)
To prove my point try actually going to google.com and opening up Firebug (or Inspector if you're using Safari or Chrome) and doing:
var bob = window.open('http://google.com' , "moderatorWindow", 'width=300, height=300');
bob.window.location.href; // returns "http://www.google.com/"
Lastly, feel free to call jQuery on the child page to modify elements on the same page and vice-versa but you can't use jQuery from one page to modify the dom of the other page. I tried this a few years ago to try to save on some loading time and, unless something has changed, it doesn't work. jQuery seems to be bound to the window object of where it was created. Weird things happen.
Presumably you are calling:
console.log(window.opener);
which should call the toString() method of whatever window.opener references. It should reference a window object, which is a host object. Per the ECMA-262, a host object's toString() method (if it has one) can return anthing it likes, even throw an error (try it on certain IE host objects implemented using ActiveX).
This article might help: http://developer.apple.com/library/safari/#documentation/AppleApplications/Conceptual/SafariJSProgTopics/Articles/Cross-documentmessaging.html