5 ms·

Inter-window messaging using localStorage

103 points by bensummers 14y ago

Sephr 14y ago
This isn't abuse, it's what the storage event was specifically made for. Facebook, Google, etc. have been using this event to update common state information between tabs for quite a while.
- bensummers 14y ago
  I am disappointed I did not have an original thought. Nothing is new in this world. I propose we rename it the "Web Storage And Messaging" API.
  - 8ig8 14y ago
    Maybe you didn't invent the idea, but your post will likely introduce the concept to many folks. I believe this is equally valuable. Thanks.
    - brunolazzaro 14y ago
      TIL that you can do this. Awesome.
    - badgar 14y ago
      Education equally as valuable as innovation? Why are you comparing the two at all? Apples and oranges.
      - deleted 14y ago
        [deleted]
      - gfodor 14y ago
        I don't believe there was an explicit comparison being made. You are reading too much into it.
  - eclipticplane 14y ago
    Don't be disappointed! This is slick, and easy to understand. I don't really want to digest the javascript Facebook is using to learn a new tool/concept.
    - bensummers 14y ago
      Thank you. I was impressed with how few lines of code were needed to use the API, always a sign of a well-designed system.
  - angersock 14y ago
    No worries. We all stand on the shoulders of giants. :)
  - agilebyte 14y ago
    Yup. We use it in our Backbone.js app to allow users to open links in new tabs and for changes in those tabs to propagate back too. For me it is awesome to use PushState and LocalStorage in a client side app and all the while the user thinks they are using a "traditional" server side app.
  - mr_k 14y ago
    I learned something new today because of your post. Thanks
  - holloway 14y ago
    Also you probably broke the law http://www.google.com/patents/US7730419 http://www.google.com/patents/US7730419 http://www.google.com/patents/US7426699 http://www.google.com/patents/US7426699 (ok they're for cookies but you get the idea)
tiles 14y ago
If you want to use localStorage atomically, I found this writeup and code on a LockableStorage interface to be very thorough: http://balpha.de/2012/03/javascript-concurrency-and-locking-the-html5-localstorage/ http://balpha.de/2012/03/javascript-concurrency-and-locking-...
- bensummers 14y ago
  That's rather cool. And nice to see a use of the Lamport algorithm in a browser. :-)
- hobohacker 14y ago
  It depends on what you mean by atomic. Please refer to http://www.chromium.org/developers/design-documents/indexeddb/indexeddbbackup http://www.chromium.org/developers/design-documents/indexedd... where Chromium devs state: """ LocalStorage is inherently racy or a parallelism disaster, depending on whether or not you're willing to implement the "storage mutex" described in the spec. Chromium has decided not to implement it. WebKit itself is single thread/process (i.e. no parallelism period). """ Note that the way Chromium implements localStorage, it uses a disk backing store of sqlite, a caching layer (a std::map) in the browser process, and a caching layer (also a std::map) in the renderer processes (where WebKit runs, and may handle 1-X tabs per process). Changes are propagated via IPC, but as the API does not provide any locking guarantees beyond the optional storage mutex, which Chromium does not implement, there are obviously race conditions. This probably explains the issues the author of that post encountered with Chrome.
  - khuey 14y ago
    The storage mutex is still technically in the spec, but no browser is going to implement it.
btipling 14y ago
localStorage doesn't clear when the browser exits so it's a security issue in some cases. Look at sessionStorage instead in that case.
- Benferhat 14y ago
  sessionStorage won't work across tabs. You have to encrypt sensitive data; I use securecookie [0]. [0] http://godoc.org/github.com/gorilla/securecookie http://godoc.org/github.com/gorilla/securecookie (Go)
- bensummers 14y ago
  Yes, there are potential security issues with this, but as with anything in the browser you need to think through where your secrets are held. A similar issue comes with setting an expiry time of a few hours on a resource to let the browser cache it, so it's something web developers have been battling against for years.
- angersock 14y ago
  Hmm.... Could you use sessionStorage to hold a temporary key for decrypting whatever is localStorage?
alxndr 14y ago
Great idea. Doesn't seem to work in Chrome on iOS?
- bensummers 14y ago
  http://caniuse.com/#search=localStorage http://caniuse.com/#search=localStorage needs another column. I was intending this to be a "nice to have if it works", rather than essential to my app. But do people really use multiple tabs on a single site that much on mobile devices?
- judofyr 14y ago
  I thought the reason why Chrome on iOS doesn't implement the "full" incognito functionality was because they couldn't disable localStorage?
hobohacker 14y ago
The primary caveat with this approach is race conditions due to lack of locking. Note the "Issues" section in http://www.w3.org/TR/webstorage/ http://www.w3.org/TR/webstorage/ which says: """ The use of the storage mutex to avoid race conditions is currently considered by certain implementors to be too high a performance burden, to the point where allowing data corruption is considered preferable. Alternatives that do not require a user-agent-wide per-origin script lock are eagerly sought after. If reviewers have any suggestions, they are urged to send them to the addresses given in the previous section. More details regarding this issue are available in these e-mails (as well as numerous others): http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2009-September/023059.html http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2009-Sep... http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2009-December/024277.html http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2009-Dec... """ So as long as you don't need transactions/locks across the shared state, this might work. Of course, transactions/locks are often necessary.
atarian 14y ago
I was attempting to do something similar, but needed to support IE7 which doesn't support localStorage. You could probably rely on userData as a fallback though.
nmjenkins 14y ago
This technique does indeed work very well. I wrote about it last year, describing how we use it at FastMail to share a single push events connection between all open tabs: http://blog.fastmail.fm/2012/11/26/inter-tab-communication-using-local-storage/ http://blog.fastmail.fm/2012/11/26/inter-tab-communication-u...
jdavid 14y ago
This method may allow message passing between tabs, and windows, but it does not do so between iFrames. Two iFrames on the tab will not trigger storage events on each other. In my opinion this is a bug that should be fixed, https://code.google.com/p/chromium/issues/detail?id=177342 https://code.google.com/p/chromium/issues/detail?id=177342
STHayden 14y ago
As far as I can tell this does not work cross protocol from http to https. One of the thing I use postMessage for the most is messaging between those two protocols.

103 points by bensummers 14y ago

Sephr 14y ago

This isn't abuse, it's what the storage event was specifically made for. Facebook, Google, etc. have been using this event to update common state information between tabs for quite a while.

bensummers 14y ago
I am disappointed I did not have an original thought. Nothing is new in this world. I propose we rename it the "Web Storage And Messaging" API.
- 8ig8 14y ago
  Maybe you didn't invent the idea, but your post will likely introduce the concept to many folks. I believe this is equally valuable. Thanks.
  - brunolazzaro 14y ago
    TIL that you can do this. Awesome.
  - badgar 14y ago
    Education equally as valuable as innovation? Why are you comparing the two at all? Apples and oranges.
    - deleted 14y ago
      [deleted]
    - gfodor 14y ago
      I don't believe there was an explicit comparison being made. You are reading too much into it.
- eclipticplane 14y ago
  Don't be disappointed! This is slick, and easy to understand. I don't really want to digest the javascript Facebook is using to learn a new tool/concept.
  - bensummers 14y ago
    Thank you. I was impressed with how few lines of code were needed to use the API, always a sign of a well-designed system.
- angersock 14y ago
  No worries. We all stand on the shoulders of giants. :)
- agilebyte 14y ago
  Yup. We use it in our Backbone.js app to allow users to open links in new tabs and for changes in those tabs to propagate back too. For me it is awesome to use PushState and LocalStorage in a client side app and all the while the user thinks they are using a "traditional" server side app.
- mr_k 14y ago
  I learned something new today because of your post. Thanks
- holloway 14y ago
  Also you probably broke the law http://www.google.com/patents/US7730419 http://www.google.com/patents/US7730419 http://www.google.com/patents/US7426699 http://www.google.com/patents/US7426699 (ok they're for cookies but you get the idea)

tiles 14y ago

If you want to use localStorage atomically, I found this writeup and code on a LockableStorage interface to be very thorough: http://balpha.de/2012/03/javascript-concurrency-and-locking-the-html5-localstorage/ http://balpha.de/2012/03/javascript-concurrency-and-locking-...

bensummers 14y ago
That's rather cool. And nice to see a use of the Lamport algorithm in a browser. :-)
hobohacker 14y ago
It depends on what you mean by atomic. Please refer to http://www.chromium.org/developers/design-documents/indexeddb/indexeddbbackup http://www.chromium.org/developers/design-documents/indexedd... where Chromium devs state: """ LocalStorage is inherently racy or a parallelism disaster, depending on whether or not you're willing to implement the "storage mutex" described in the spec. Chromium has decided not to implement it. WebKit itself is single thread/process (i.e. no parallelism period). """ Note that the way Chromium implements localStorage, it uses a disk backing store of sqlite, a caching layer (a std::map) in the browser process, and a caching layer (also a std::map) in the renderer processes (where WebKit runs, and may handle 1-X tabs per process). Changes are propagated via IPC, but as the API does not provide any locking guarantees beyond the optional storage mutex, which Chromium does not implement, there are obviously race conditions. This probably explains the issues the author of that post encountered with Chrome.
- khuey 14y ago
  The storage mutex is still technically in the spec, but no browser is going to implement it.

btipling 14y ago

localStorage doesn't clear when the browser exits so it's a security issue in some cases. Look at sessionStorage instead in that case.

Benferhat 14y ago
sessionStorage won't work across tabs. You have to encrypt sensitive data; I use securecookie [0]. [0] http://godoc.org/github.com/gorilla/securecookie http://godoc.org/github.com/gorilla/securecookie (Go)
bensummers 14y ago
Yes, there are potential security issues with this, but as with anything in the browser you need to think through where your secrets are held. A similar issue comes with setting an expiry time of a few hours on a resource to let the browser cache it, so it's something web developers have been battling against for years.
angersock 14y ago
Hmm.... Could you use sessionStorage to hold a temporary key for decrypting whatever is localStorage?

alxndr 14y ago

Great idea. Doesn't seem to work in Chrome on iOS?

bensummers 14y ago
http://caniuse.com/#search=localStorage http://caniuse.com/#search=localStorage needs another column. I was intending this to be a "nice to have if it works", rather than essential to my app. But do people really use multiple tabs on a single site that much on mobile devices?
judofyr 14y ago
I thought the reason why Chrome on iOS doesn't implement the "full" incognito functionality was because they couldn't disable localStorage?

hobohacker 14y ago

The primary caveat with this approach is race conditions due to lack of locking. Note the "Issues" section in http://www.w3.org/TR/webstorage/ http://www.w3.org/TR/webstorage/ which says: """ The use of the storage mutex to avoid race conditions is currently considered by certain implementors to be too high a performance burden, to the point where allowing data corruption is considered preferable. Alternatives that do not require a user-agent-wide per-origin script lock are eagerly sought after. If reviewers have any suggestions, they are urged to send them to the addresses given in the previous section. More details regarding this issue are available in these e-mails (as well as numerous others): http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2009-September/023059.html http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2009-Sep... http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2009-December/024277.html http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2009-Dec... """ So as long as you don't need transactions/locks across the shared state, this might work. Of course, transactions/locks are often necessary.

atarian 14y ago

I was attempting to do something similar, but needed to support IE7 which doesn't support localStorage. You could probably rely on userData as a fallback though.

nmjenkins 14y ago

This technique does indeed work very well. I wrote about it last year, describing how we use it at FastMail to share a single push events connection between all open tabs: http://blog.fastmail.fm/2012/11/26/inter-tab-communication-using-local-storage/ http://blog.fastmail.fm/2012/11/26/inter-tab-communication-u...

jdavid 14y ago

This method may allow message passing between tabs, and windows, but it does not do so between iFrames. Two iFrames on the tab will not trigger storage events on each other. In my opinion this is a bug that should be fixed, https://code.google.com/p/chromium/issues/detail?id=177342 https://code.google.com/p/chromium/issues/detail?id=177342

STHayden 14y ago

As far as I can tell this does not work cross protocol from http to https. One of the thing I use postMessage for the most is messaging between those two protocols.