Question

I want to be able to securely authenticate users on my site from any non-secure page. So I made a window.open() popup to open a secure sign in form. The plan is that after the user signs up or authenticates, the popup would close and the parent window would refresh.

Closing the popup works fine, however, due to Cross Site Scripting rules, when trying to refresh the parent, I get the following:

Unsafe JavaScript attempt to access frame with URL http://localhost/ from frame with URL https://localhost/signin_popup. The frame requesting access has a protocol of 'https', the frame being accessed has a protocol of 'http'. Protocols must match.

I can’t simply subscribe on at the parent to onunload, because the authentication popup may traverse through several pages before its ready to refresh the parent. I’m currently trying to see if I can bind custom events to the popup window object from the parent, and fire them from within the popup, but to no avail.

So…

How can I make a popup window interact with a parent window, or have the parent window subscribe to custom events of the popup window when protocols do not match?

Answer 1

You should be able to implement cross-origin window communication with the postMessage-API

To post a message to the other window:

otherWindowRef.postMessage( 'message', origin );

You will then receive it on the other window:

window.addEventListener( "message", function() {
   //message was received 
}, false );

The other window will likewise .postMessage back to the main window and the main window gets a message event.