4 ms·

Show HN: AcrossTabs – Easy communication between cross-origin browser tabs

107 points by softvar 10y ago

tiplus 10y ago
I was puzzled when I first saw cross tab communication in impress.js for their slide control tab (slid.es) and I am still wondering about the proper use case of this feature today. Isn't this a security nightmare?
- tyingq 10y ago
  It maps back to window.postMessage. There's a security concerns section on Mozilla's docs: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage https://developer.mozilla.org/en-US/docs/Web/API/Window/post... All boils down the sender using a specific target, and the receiver remembering to check the origin.
- d--b 10y ago
  Doesn't most Oauth2 things work that way? http://www.riskcompletefailure.com/2013/03/postmessage-oauth-20.html?m=1 http://www.riskcompletefailure.com/2013/03/postmessage-oauth...
mnarayan01 10y ago
Looks like a nice library, though using a default of `*` for Origin seems like an invitation for people to shoot themselves in the foot.
- softvar 10y ago
  Yea, that's totally true. I would recommend using an origin property to be used every time an instance of the Library is created. Please refer: https://github.com/wingify/across-tabs#usage https://github.com/wingify/across-tabs#usage
  - detaro 10y ago
    Then don't have a default that works without doing so. Really, defaults like this lead to "works, ship it" and totally unnecessary cases of vulnerable software.
    - Karupan 10y ago
      Second this. A lot of developers will just drop it in without reading the caveats. Just make the origin a mandatory parameter.
    - softvar 10y ago
      Does that mean, the library should not act when an origin is not specified and throw some kinda message in the console?
      - tokenizerrr 10y ago
        Yes, a required argument. It's not uncommon. Think API keys.
    - fdim 10y ago
      Reminds me mongodb being open/unprotected by default, that turned out well...
  - deadbunny 10y ago
    Don't use unsafe defaults ffs, that's how things get exploited.
    - softvar 10y ago
      Does that mean, the library should not act when an origin is not specified and throw some kinda message in the console? How can it be enforced? Any suggestions? Users can also make it a bit more complicated while using `*` to get hacked by accepting responses which match some kinda pattern(it's not bullet-proof though) and simply discarding others.
martin-adams 10y ago
I think I understand what this does, but I don't think I understand the use case. Does anyone have any real-world examples of where this helps?
- onion2k 10y ago
  If you build browser-based applications that open websites in new tabs and programatically interact with them then I imagine it'd be handy. I'm making a test builder to generate user scripts and e2e tests more easily, so having the app open in one tab talking to a site you're working with in another would be a possible use case. I've actually written my app as Chrome devtools extension though, so it already has access to everything through a background script and an injected content script. If I ever move it to being web-based I'd use something like this to do communication between tabs. Looking at Wingify's website it seems they're doing something similar with A/B testing - they (presumably) have an app that sits in one tab and a two of copies of the target site in two more tabs, so changes made in their app are reflected in the two versions of the target site. That's a total guess though.
  - softvar 10y ago
    Yea, that's a good use case you mentioned regarding the browser-build application. Why we want this library, at Wingify, is something related to heatmaps and showing previews of changes made to the site in new tabs. Please read the detailed explanation I gave to @martin-adams in the above comment.
- seibelj 10y ago
  We had this exact problem before, we had a single-page-app console for sales agents and they would open up a lot of tabs, one for each conversation. If we didn't sync between the tabs, a lot of alerts and whatnot would have been duplicated.
  - tokenizerrr 10y ago
    Is that cross origin though?
ggaahh 10y ago
This is great. I found this pattern very useful when communicating with iframes. I wrote a similar library a while back. https://github.com/taylorhakes/postmessage-plus https://github.com/taylorhakes/postmessage-plus
ssalka 10y ago
I had something very similar to this in my backlog, as a weekend project. Glad to see someone else beat me to it - saves me time in both implementation and maintenance! I look forward to trying it out
- softvar 10y ago
  Glad to help!
ssalka 10y ago
I had something very similar to this in my backlog, as a weekend project. Glad to see someone else beat me to it - saves me time in both implementation and maintenance! I look forward to trying it out
zspitzer 10y ago
Chrome and Firefox support BroadcastChannel https://developers.google.com/web/updates/2016/09/broadcastchannel https://developers.google.com/web/updates/2016/09/broadcastc... https://developer.mozilla.org/en-US/docs/Web/API/BroadcastChannel https://developer.mozilla.org/en-US/docs/Web/API/BroadcastCh...
- gauravmuk 10y ago
  this works for same origin only.

107 points by softvar 10y ago

I was puzzled when I first saw cross tab communication in impress.js for their slide control tab (slid.es) and I am still wondering about the proper use case of this feature today. Isn't this a security nightmare?

tyingq 10y ago
It maps back to window.postMessage. There's a security concerns section on Mozilla's docs: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage https://developer.mozilla.org/en-US/docs/Web/API/Window/post... All boils down the sender using a specific target, and the receiver remembering to check the origin.
d--b 10y ago
Doesn't most Oauth2 things work that way? http://www.riskcompletefailure.com/2013/03/postmessage-oauth-20.html?m=1 http://www.riskcompletefailure.com/2013/03/postmessage-oauth...

mnarayan01 10y ago

Looks like a nice library, though using a default of `*` for Origin seems like an invitation for people to shoot themselves in the foot.

softvar 10y ago
Yea, that's totally true. I would recommend using an origin property to be used every time an instance of the Library is created. Please refer: https://github.com/wingify/across-tabs#usage https://github.com/wingify/across-tabs#usage
- detaro 10y ago
  Then don't have a default that works without doing so. Really, defaults like this lead to "works, ship it" and totally unnecessary cases of vulnerable software.
  - Karupan 10y ago
    Second this. A lot of developers will just drop it in without reading the caveats. Just make the origin a mandatory parameter.
  - softvar 10y ago
    Does that mean, the library should not act when an origin is not specified and throw some kinda message in the console?
    - tokenizerrr 10y ago
      Yes, a required argument. It's not uncommon. Think API keys.
  - fdim 10y ago
    Reminds me mongodb being open/unprotected by default, that turned out well...
- deadbunny 10y ago
  Don't use unsafe defaults ffs, that's how things get exploited.
  - softvar 10y ago
    Does that mean, the library should not act when an origin is not specified and throw some kinda message in the console? How can it be enforced? Any suggestions? Users can also make it a bit more complicated while using `*` to get hacked by accepting responses which match some kinda pattern(it's not bullet-proof though) and simply discarding others.

martin-adams 10y ago

I think I understand what this does, but I don't think I understand the use case. Does anyone have any real-world examples of where this helps?

onion2k 10y ago
If you build browser-based applications that open websites in new tabs and programatically interact with them then I imagine it'd be handy. I'm making a test builder to generate user scripts and e2e tests more easily, so having the app open in one tab talking to a site you're working with in another would be a possible use case. I've actually written my app as Chrome devtools extension though, so it already has access to everything through a background script and an injected content script. If I ever move it to being web-based I'd use something like this to do communication between tabs. Looking at Wingify's website it seems they're doing something similar with A/B testing - they (presumably) have an app that sits in one tab and a two of copies of the target site in two more tabs, so changes made in their app are reflected in the two versions of the target site. That's a total guess though.
- softvar 10y ago
  Yea, that's a good use case you mentioned regarding the browser-build application. Why we want this library, at Wingify, is something related to heatmaps and showing previews of changes made to the site in new tabs. Please read the detailed explanation I gave to @martin-adams in the above comment.
seibelj 10y ago
We had this exact problem before, we had a single-page-app console for sales agents and they would open up a lot of tabs, one for each conversation. If we didn't sync between the tabs, a lot of alerts and whatnot would have been duplicated.
- tokenizerrr 10y ago
  Is that cross origin though?

ggaahh 10y ago

This is great. I found this pattern very useful when communicating with iframes. I wrote a similar library a while back. https://github.com/taylorhakes/postmessage-plus https://github.com/taylorhakes/postmessage-plus

ssalka 10y ago

I had something very similar to this in my backlog, as a weekend project. Glad to see someone else beat me to it - saves me time in both implementation and maintenance! I look forward to trying it out

softvar 10y ago
Glad to help!

ssalka 10y ago

zspitzer 10y ago

Chrome and Firefox support BroadcastChannel https://developers.google.com/web/updates/2016/09/broadcastchannel https://developers.google.com/web/updates/2016/09/broadcastc... https://developer.mozilla.org/en-US/docs/Web/API/BroadcastChannel https://developer.mozilla.org/en-US/docs/Web/API/BroadcastCh...

gauravmuk 10y ago
this works for same origin only.