Share cookies or local storage data between cross domain in Angular ?

www.example.com​
abc.example.com​

www.avinashdalvi.com | www.internetkatta.com

@aviboy2006

Hello Am Avinash - @aviboy2006

Software Engineer II @Eagleview India

Open Source Enthusiast | AWS Community Builder

Agenda :

  • What is cookies or local storage data ?

  • Why it  is required to share ? 

  • How can share it between subdomain or cross domain ?

  • Demo

  • Discussion (Q/A)

www.avinashdalvi.com | www.internetkatta.com

@aviboy2006

What is cookies/local storage data ? ?  🤔

  • HTTP Cookie - is a small piece of data stored on the user's computer

  • Local storage - The localStorage properties allow to save key/value pairs in a web browser.

www.avinashdalvi.com | www.internetkatta.com

@aviboy2006

Why it is required to share ?

  • When two domain share same resources like one is www.example.com and one is customer.example.com

  • Two domain rights with same owner or accessible

  • Avoid multiple times resource access or fetch if it duplicate across two subdomain or cross domain

  • Major use case is when login to one domain and access to all subdomains 

www.avinashdalvi.com | www.internetkatta.com

@aviboy2006

How to share those ? 

Sending Data

Receiving Data

www.example.com​
abc.example.com​

Sending Data

Receiving Data

www.avinashdalvi.com | www.internetkatta.com

@aviboy2006

Sender Code

HTML Code

function postCrossDomainMessage(msg) {
  var win = document.getElementById('ifr').contentWindow;
  win.postMessage(msg, "http://example.com/");
}
var postMsg = {"login": "user"}; // this is just example
postCrossDomainMessage(postMsg);





<iframe style="display:none;" src="http://example.com/getlocalstorage.html" id="ifr"></iframe>

Javascript Code

www.avinashdalvi.com | www.internetkatta.com

@aviboy2006

Receiver Code

var PERMITTED_DOMAIN = "http://example.com";
/**
 * Receiving message from other domain
 */
window.addEventListener('message', function(event) {
    if (event.origin === PERMITTED_DOMAIN) {
        //var msg = JSON.parse(event.data);
        // var msgKey = Object.keys(msg)[0];
        if (event.data) {
            localStorage.setItem("localstorage", event.data);
        } else {
            localStorage.removeItem("localstorage");
        }
    }

});

www.avinashdalvi.com | www.internetkatta.com

@aviboy2006

Demo 

Two Angular apps share their login data between them using pub-sub pattern

 

www.avinashdalvi.com | www.internetkatta.com

@aviboy2006

Any Question ? 

www.avinashdalvi.com | www.internetkatta.com

@aviboy2006

Reference:

  • https://www.internetkatta.com/share-cookies-or-local-storage-data-between-cross-domain

  • https://github.com/aviboy2006/cross-domain-cookie-sharing

  • https://github.com/aviboy2006/cookie-or-localstorage-sharing-in-angular-apps

  • https://en.wikipedia.org/wiki/HTTP_cookie

  • https://www.w3schools.com/jsref/prop_win_localstorage.asp

www.avinashdalvi.com | www.internetkatta.com

@aviboy2006

Thank You !

You can reach out to me here 👇🏻

@aviboy2006

@aviboy2006

https://www.linkedin.com/in/avinash-dalvi-315b021a/

avinashsdalvi@gmail.com

avinashdalvi.com |  www.internetkatta.com

Made with Slides.com