Local storage across pages on same domain but using different ports

Question

I'm trying to use local storage across various pages on the same domain, but for some reason Firefox is creating multiple instances of the same storage data across pages if they are using different ports. So if I set something for www.example.com:80 that won't persist when going to www.example.com:8000, it will create an entirely new redundant entry of the same data. How can I rectify this and get it to use the same entry?

Solution 1

Ports must be the same for origin rules to work. The only way around this is a server-side proxy.

Definition of an origin:

Two pages have the same origin if the protocol, port (if one is specified), and host are the same for both pages.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Same_origin_policy_for_JavaScript

Solution 2

To pass tokens between apps, I've resorted to using cookies:

Set cookie on client side of app-001

<script>( function() { document.cookie = 'token=undefined; token_expires=Fri, 3 Aug 2020 20:47:11 UTC; path=/' } )();</script>

Then to use the cookies on the client side of app-002

<script>( function() { console.log( document.cookie.replace(/(?:(?:^|.*;s*)token*=s*([^;]*).*$)|^.*$/, '$1') ); } )();</script>

Then once you have the cookie on either app, add it to a localStorage making slightly easier access moving forward.

<script>( function() { localStorage.setItem('token', document.cookie.replace(/(?:(?:^|.*;s*)token*=s*([^;]*).*$)|^.*$/, '$1') );); } )();</script>