Cross domain localstorage with javascript

Question

We have javascript api.js, which is hosted on the api.abc.com domain. It manages local storage.

We have included this javascript on our websites at abc.com and login.abc.com as a cross domain js like

<script src="http://api.abc.com/api.js"> 

I understand that localstoarge is domain dependent. However, since api.js is downloaded from api.abc.com, I expected it to have access to the local api.abc.com repository from both domains. Unfortunately, this does not seem to be the case. When api.js stores a value in localstoarge from one domain, it is not available to it when downloading from another domain.

Any idea?

Answer 1

How to use cross domain postmessage and iframes?

So, on your wrong domain page, you include an iframe, which sends messages with cookie data.

Here's a compelling example of cross-domain communications: http://blog.teamtreehouse.com/cross-domain-messaging-with-postmessage

live example: http://codepen.io/anon/pen/EVBGyz // branched sender code with tiiiiiny change :):

 window.onload = function() { // Get the window displayed in the iframe. var receiver = document.getElementById('receiver').contentWindow; // Get a reference to the 'Send Message' button. var btn = document.getElementById('send'); // A function to handle sending messages. function sendMessage(e) { // Prevent any default browser behaviour. e.preventDefault(); // Send a message with the text 'Hello Treehouse!' to the new window. receiver.postMessage('cookie data!', 'http://wrong-domain.com'); } // Add an event listener that will execute the sendMessage() function // when the send button is clicked. btn.addEventListener('click', sendMessage); } 

Recipient Code:

 window.onload=function(){ var messageEle=document.getElementById('message'); function receiveMessage(e){ if(e.origin!=="http://correct-domain.com") return; messageEle.innerHTML="Message Received: "+e.data; } window.addEventListener('message',receiveMessage); } 

Answer 2

As noted in your post, localStorage (sessionStorage, too) will not be stored in storage belonging to the api.abc.com domain. If so, using the CDN version of the library using localStorage, you will need to share the repository with all other websites using this library.

One good solution would be to use an iframe with postMessage, as described in the following stack overflow: use localStorage through subdomains

Answer 3

You can try this cross-storage from Zendesk. Basically, there are hubs and customers:

• : located on any server, directly interact with LocalStorage API

• clients: download the hub using the built-in iframe and post messages, interact with the data

Key features: you can configure the permission (get, set, delete) that each host or client of the domain can have. The library is divided into two types of components: hubs and clients.

Care should be taken to limit the origin of bidirectional communication. Thus, when the hub is initialized, permission objects are transferred to the array. Any messages from clients whose origin does not match the pattern are ignored, as well as an invalid set of methods. A set of permits is respected for policies of the same origin. However, keep in mind that any user has full control over their local storage data - this is still client data. This restricts access only at the domain or web application level.