How to share localstorage among different subdomains?

Question

We have two separate websites / apps in same domain but different subdomains.

E.g.

https://hello.website.com (Webapp 1)
https://world.website.com (Webapp 2)

What we’d like to do is to login users at Webapp 1 and upon logging in and clicking a button within Webapp 1, we’d like to redirect the user to Webapp 2. However, Webapp 2 needs the same authentication token which is currently stored in the localstorage of Webapp 1. How do I make the localstorage content available to Webapp 2?

Or is there a better way to do this?

Does this answer your question? [use localStorage across subdomains](https://stackoverflow.com/questions/4026479/use-localstorage-across-subdomains) — Ahmet Zeybek, Jan 31 '20 at 02:22
Hmm not so because the login doesn't happen on parent domain but on another subdomain. — catandmouse, Jan 31 '20 at 02:23

score 7 · Answer 1 · answered Jan 31 '20 at 02:27

7

That's the limitation of localstorage and sessionstorage. You can't. There are some workarounds with iframe, but those are neither elegant nor secured. You should use cookie with appropriate domain attribute domain=example.com. You may also want to read the following answer for security with cookie vs localstorage: https://stackoverflow.com/a/54258744/1235935

answered Jan 31 '20 at 02:27

Saptarshi Basu

8,640
4
39
58

1

Why is using iframes for this purpose not secure? – Rishabh Poddar Feb 06 '20 at 14:29

CertainPerformance · Accepted Answer · 2022-03-15T18:19:27.650

Since the domains are not the same, transferring information from the local storage of one of them to another isn't possible directly, but since the sites are on HTTPS, it should be safe and easy enough to send the authentication token as search parameters. For example, when redirecting, instead of redirecting to https://world.website.com, instead take the current authentication token for https://hello.website.com and append it, then redirect:

const url = 'https://world.website.com?token=' + authToken;
window.location.href = url;

(if the authentication token may have special characters in it, you may need to escape them first)

Then, on the other domain, check to see if there's a token in the search parameters, and if so, extract it and save it to localStorage:

const paramsMatch = window.location.href.match(/\?.+/);
if (paramsMatch) {
  const params = new URLSearchParams(paramsMatch[0]);
  const authToken = params.get('token');
  if (authToken) {
    localStorage.authToken = authToken;
  }
}

Because the domains are on HTTPS, putting the token in the URL is mostly safe - eavesdroppers will not be able to see it. But if your server that handles the requests saves logs, you may find it undesirable for the server to have its logs include authentication tokens as a result of this approach.

Another way would be for:

Webapp 1 to make a POST request to Webapp 2 with the token in the payload (where Webapp 2 has the appropriate CORS settings)
Webapp 2 generates a new unique URL (that expires after, say, 30 minutes), associates the token with that URL, and responds to the client on Webapp 1 with the URL
The client receives the response from Webapp 2 and then navigates to the unique URL on Webapp 2 that it was just given
Webapp 2, when handling the request, sees that the unique URL was associated with a token, and goes through the process of fully associating that token with the request session

Not so safe, as these URLs are usually recorded in http server logs. It would be better to make a cross-site POST request with this token. — lmcarreiro, Mar 03 '22 at 21:37

How to share localstorage among different subdomains?

2 Answers2

Linked