Send messages between windows on different origins without a reference to the window

Question

Window A is any website. The user runs a bookmarklet in this window which downloads a script from my domain. Window B is on my website and has the same domain as the script. What is the best way to send a message from window A to window B when the user runs the bookmarklet?

I was able to get this working by using window.postMessage to communate to a hidden iframe on my domain which used the localstorage api to forward the message to window B. However, I want to know if a simpler method exists.

Method That Worked: Window A -> postMessage -> Hidden iframe on my domain in window A -> storage apis -> Window B

Is there a way to go directly from window A to window B without a hidden iframe or server side logic?

_"I was able to get this working by using window.postMessage to communate to a hidden iframe on my domain which used the localstorage api to forward the message to window B"_ Can you include `javascript` which returns expected result at Question? — guest271314, Apr 10 '16 at 22:03
If WinB is in iframe of WinA, than directly communicate WinA <-> WinB via `postMessage`. Otherwise, you can can avoid iframes, by loading an image on your server with additional parameters to set cookies. — skobaljic, Apr 10 '16 at 22:04
@skobaljic that is not the case; I was able to get it working by adding an iframe to window A which sent the message via local stroage api to window B — , Apr 10 '16 at 22:05
Than just load 1px transparent gif with data, as: ``, this can easily be done using Javascript. — skobaljic, Apr 10 '16 at 22:08
_"Is there a way to go directly from window A to window B without a hidden iframe or server side logic?"_ Other than using `localStorage` ? What is issue with using `localStorage` ? — guest271314, Apr 10 '16 at 22:15
@guest271314 I cannot go direcly from A to B. I have to go A to iframe to B. I was just wondering if an api existed that allowed you to communicate direcly from A to B. — , Apr 10 '16 at 22:18
Why is communication from `A` to `B` not possible? Are both on same domain? — guest271314, Apr 10 '16 at 22:19
Because A & B are on different domains so local storage will not work (without the hidden iframe) — , Apr 10 '16 at 22:20
@user104317 See also http://stackoverflow.com/questions/36146595/can-we-refer-to-javascript-variables-across-webpages-in-a-browser-session — guest271314, Apr 10 '16 at 22:26

chrmod · Answer 1 · 2016-04-10T22:47:52.003

It is browser job to make such communication impossible. There is a high risk of cross site scripting attack if script would be able to pass data between domains without restrictions.

Aside of that browser still allow couple ways such communication can happen:

postMessage talking to hidden frames
browser web-extension with so called content script can listen to changes on one page and transfer them to other page via chrome.runtime.sendMessage (in Firefox extensions you can manage this probably is far more many ways)
alternatively you can try:
- WebRTC data channel or web sockets to create communication between opened tabs
- SharedWorkers (which should act as hidden iframe)

Specific technique should be used based on your use case. In some cases usage of backend or cookies may to totally sufficient.

To help myself experiment with postMessage communication I've created little library called Spanan https://github.com/chrmod/spanan . Its usage of Javascript Proxies makes messaging less painful (not it is an experiment not a serious library you should use in production)

score 0 · Accepted Answer · answered Apr 10 '16 at 22:23

If there is no connection between windows, which means domain A is not an iframe of domain B and vice versa (and you do not have control over both), than you have to use server side logic. The hidden iframe you used is one way, the other would be following:

You can call the site B periodically or intentionally using script in Window A as:

var cookieScriptUrl = 'http://www.siteB.com/set_cookie.php?';
function sendData( data ) {
    var image = new Image();
    image.src = cookieScriptUrl + data;
};
sendData('likes=3');

You can send a lot of data, keeping in mind the max is around 2Mb.

Further on, in your PHP script set the cookie(s), than you can read them in Window B.

Just a note, [Navigator.sendBeacon() method](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon) can also be used, but it is supported only by FF and Chrome (Apr, 2016). — skobaljic, Apr 10 '16 at 22:32

Send messages between windows on different origins without a reference to the window

2 Answers2