use localStorage across subdomains

Question

I m replacing cookies with localStorage on browsers that can support it  anyone but IE   The problem is site com and www site com store their own separate localStorage objects  I believe www is considered a subdomain  a stupid decision if you ask me   If a user was originally on site com and decides to type in www site com on her next visit  all her personal data will be inaccessible  How do I get all my  subdomains  to share the same localStorage as the main domain

User · Answer

I m using xdLocalStorage  this is a lightweight js library which implements LocalStorage interface and support cross domain storage by using iframe post message communication   angularJS support    https   github com ofirdagan cross-domain-local-storage

User · Answer

This is how   November 2020 Update   This solution relies on being able to set document domain   The ability to do that has now been deprecated  unfortunately   For sharing between subdomains of a given superdomain  e g  example com   there s a technique you can use in that situation   It can be applied to localStorage  IndexedDB  SharedWorker  BroadcastChannel  etc  all of which offer shared functionality between same-origin pages  but for some reason don t respect any modification to document domain that would let them use the superdomain as their origin directly   1  Pick one  quot main quot  domain to for the data to belong to  i e  either https   example com or https   www example com will hold your localStorage data   Let s say you pick https   example com   2  Use localStorage normally for that chosen domain s pages   3  On all https   www example com pages  the other domain   use javascript to set document domain    quot example com quot     Then also create a hidden  lt iframe gt   and navigate it to some page on the chosen https   example com domain  It doesn t matter what page  as long as you can insert a very little snippet of javascript on there   If you re creating the site  just make an empty page specifically for this purpose   If you re writing an extension or a Greasemonkey-style userscript and so don t have any control over pages on the example com server  just pick the most lightweight page you can find and insert your script into it   Some kind of  quot not found quot  page would probably be fine    4  The script on the hidden iframe page need only  a  set document domain    quot example com quot    and  b  notify the parent window when this is done   After that  the parent window can access the iframe window and all its objects without restriction   So the minimal iframe page is something like   lt  doctype html gt   lt html gt   lt head gt     lt script gt      document domain    quot example com quot       window parent iframeReady        function defined  amp  called on parent window    lt  script gt   lt  head gt   lt body gt  lt  body gt   lt  html gt   If writing a userscript  you might not want to add externally-accessible functions such as iframeReady   to your unsafeWindow  so instead a better way to notify the main window userscript might be to use a custom event      window parent dispatchEvent new CustomEvent  quot iframeReady quot      Which you d detect by adding a listener for the custom  quot iframeReady quot  event to your main page s window   NOTE  You need to set document domain    quot example com quot  even if the iframe s domain is already example com   Assigning a value to document domain implicitly sets the origin s port to null  and both ports must match for the iframe and its parent to be considered same-origin   See the note here  https   developer mozilla org en-US docs Web Security Same-origin policy Changing origin   5   Once the hidden iframe has informed its parent window that it s ready  script in the parent window can just use iframe contentWindow localStorage  iframe contentWindow indexedDB  iframe contentWindow BroadcastChannel  iframe contentWindow SharedWorker instead of window localStorage  window indexedDB  etc     and all these objects will be scoped to the chosen https   example com origin - so they ll have the this same shared origin for all of your pages  The most awkward part of this technique is that you have to wait for the iframe to load before proceeding   So you can t just blithely start using localStorage in your DOMContentLoaded handler  for example   Also you might want to add some error handling to detect if the hidden iframe fails to load correctly  Obviously  you should also make sure the hidden iframe is not removed or navigated during the lifetime of your page    OTOH I don t know what the result of that would be  but very likely bad things would happen  And  a caveat   setting changing document domain can be blocked using the Feature-Policy header  in which case this technique will not be usable as described   However  there is a significantly more-complicated generalization of this technique  that can t be blocked by Feature-Policy  and that also allows entirely unrelated domains to share data  communications  and shared workers  i e  not just subdomains off a common superdomain     Mayank Jain already described it in their answer  namely  The general idea is that  just as above  you create a hidden iframe to provide the correct origin for access  but instead of then just grabbing the iframe window s properties directly  you use script inside the iframe to do all of the work  and you communicate between the iframe and your main window only using postMessage   and addEventListener  quot message quot        This works because postMessage   can be used even between different-origin windows   But it s also significantly more complicated because you have to pass everything through some kind of messaging infrastructure that you create between the iframe and the main window  rather than just using the localStorage  IndexedDB  etc  APIs directly in your main window s code

User · Answer

this kind of solution causes many problems like this  for consistency and SEO considerations redirect on the main domain is the best solution    do it redirection at the server level   How To Redirect www to Non-www with Nginx   https   www digitalocean com community tutorials how-to-redirect-www-to-non-www-with-nginx-on-centos-7   or  any other level like route 53 if are using

User · Answer

If you re using the iframe and postMessage solution just for this particular problem  I think it might be less work  both code-wise and computation-wise  to just store the data in a subdomain-less cookie and  if it s not already in localStorage on load  grab it from the cookie   Pros    Doesn t need the extra iframe and postMessage set up    Cons    Will make the data available across all subdomains  not just www  so if you don t trust all the subdomains it may not work for you   Will send the data to the server on each request  Not great  but depending on your scenario  maybe still less work than the iframe postMessage solution  If you re doing this  why not just use the cookies directly  Depends on your context  4K max cookie size  total across all cookies for the domain  Thanks to Blake for pointing this out in comments    I agree with other commenters though  this seems like it should be a specifiable option for localStorage so work-arounds aren t required

User · Answer

This is how I use it across domains      Use an iframe from your parent domain - say parent com  Then on each child com domain  just do a postMessage to your parent com iframe  All you need to do is setup a protocol of how to interpret your postMessage messages to talk to the parent com iframe    I hope it helps

User · Answer

Set to cookie in the main domain -   document cookie    key value domain  mydomain com    and then take the data from any main domain or sub domain and set it on the localStorage

User · Answer

I suggest making site com redirect to www site com for both consistency and for avoiding issues like this   Also  consider using a cross-browser solution like PersistJS that can use each browser native storage

User · Answer

This is how I solved it for my website  I redirected all the pages without www to www site com  This way  it will always take localstorage of www site com   Add the following to your  htacess   create one if you already don t have it  in root directory  RewriteEngine On RewriteCond   HTTP HOST    www    NC  RewriteRule        http   www   HTTP HOST   1  R 301 L

[javascript] use localStorage across subdomains

Examples related to javascript

Examples related to subdomain

Examples related to local-storage