Hacker News new | past | comments | ask | show | jobs | submit login
Show HN: AcrossTabs – Easy communication between cross-origin browser tabs (github.com/wingify)
107 points by softvar on April 5, 2017 | hide | past | favorite | 25 comments



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


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


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.


Second this. A lot of developers will just drop it in without reading the caveats. Just make the origin a mandatory parameter.


Does that mean, the library should not act when an origin is not specified and throw some kinda message in the console?


Yes, a required argument. It's not uncommon. Think API keys.


Reminds me mongodb being open/unprotected by default, that turned out well...


Don't use unsafe defaults ffs, that's how things get exploited.


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.


Put the wildcard functionality behind a setter with a long name and make the default the current domain?


Put it behind a setter with "doNotUseOrYouWillBeFired" in the function name.

https://github.com/facebook/react/blob/80bff5397bf854750dbe7...


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?


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/post...

All boils down the sender using a specific target, and the receiver remembering to check the origin.


Doesn't most Oauth2 things work that way?

http://www.riskcompletefailure.com/2013/03/postmessage-oauth...


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?


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.


Is that cross origin though?


Yes, there are many. I'm a developer at Wingify, an A/B Testing tool and we are using this library I created a few days back. We have something called heatmaps - https://vwo.com/features/#heatmaps-clickmaps

To view a heatmap, user has to enter a URL, select date-range(Optional), and select the segmentation(eg. Direct, Referral, Location, Device, etc.)(optional).

A new tab is opened up with the specified URL each time on clicking the generate button.

So, let's say, you have to view heatmap of your site for:

1.The last week and only for those who live in US 2. The last week and only for those who uses Windows 3. The last month and who came directly to your site 4. The entire duration of the campaign and for all users

Now, for each configuration, there's an opened tab with the specified URL opened in it and the data for the requested segments and dates.

To pass on the data to and fro from one tab to another, and to track the status of all tabs(active/close), to notify other tabs when one gets closed, to notify all the children tabs when the opener tab gets closed, to send a message to a specific tab(eg. change segment) and to send a message to all tabs(eg. fetch data for new date applied), this library comes in handy. All this can be achieved with its simple API.

Hope you get the gist now.


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.


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.



this works for same origin only.


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


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


Glad to help!




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: