web-dev-qa-db-fra.com

stockage local inter-domaines avec javascript

Nous avons un api.js javascript qui est hébergé sur le domaine api.abc.com. Il gère le stockage local.

Nous avons inclus ce javascript dans nos sites Web à abc.com et login.abc.com en tant que js de domaine croisé comme

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

Je comprends que localstoarge est par domaine. Cependant, comme api.js est chargé à partir d'api.abc.com, je m'attendais à ce qu'il ait accès au stockage local d'api.abc.com à partir des deux domaines. Malheureusement, cela ne semble pas être le cas. Lorsque api.js stocke une valeur dans localstoarge à partir d'un domaine, il n'y est pas accessible lorsqu'il est chargé à partir d'un autre domaine.

Une idée?

javascriptlocal-storage
16
yumoji

Que diriez-vous d'utiliser le post-message et les iframes entre domaines?

Ainsi, sur votre page de mauvais domaine, vous incluez un iframe qui publie des messages contenant les données des cookies.

Voici un exemple solide de messages post-domaine croisés: http://blog.teamtreehouse.com/cross-domain-messaging-with-postmessage

exemple en direct: http://codepen.io/anon/pen/EVBGyz // code d'expéditeur fourchu avec un changement tiiiiiny :):

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);
}

Code récepteur:

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);
}
10
25r43q

Comme indiqué dans votre message, le localStorage (sessionStorage aussi) ne sera pas stocké sur le stockage lié au domaine api.abc.com. Si tel était le cas, en utilisant la version CDN d'une bibliothèque utilisant localStorage, vous devriez partager le stockage avec tous les autres sites Web utilisant cette bibliothèque.

Une bonne solution pourrait être d'utiliser un iframe avec postMessage comme expliqué dans le débordement de pile suivant: tiliser localStorage à travers les sous-domaines

4
Benjamin Chelli

Vous pouvez essayer ceci stockage croisé de Zendesk. Fondamentalement, il existe des hubs et des clients:

  • hubs: résidez sur n'importe quel serveur, interagissez directement avec l'API LocalStorage

  • clients: charger le concentrateur à l'aide d'une iframe intégrée, et publier des messages, interagir avec les données

L'essentiel est que vous puissiez configurer l'autorisation (obtenir, définir, supprimer) que chaque hôte ou client de domaine pourrait avoir. La bibliothèque est divisée en deux types de composants: les concentrateurs et les clients.

Il faut veiller à limiter les origines de la communication bidirectionnelle. Ainsi, lors de l'initialisation du concentrateur, un tableau d'objets d'autorisations est transmis. Tous les messages provenant de clients dont l'origine ne correspond pas au modèle sont ignorés, ainsi que ceux ne faisant pas partie de l'ensemble de méthodes autorisé. L'ensemble des autorisations est appliqué grâce à la même politique d'origine. Cependant, gardez à l'esprit que tout utilisateur a le contrôle total de ses données de stockage local - il s'agit toujours de données client. Cela restreint uniquement l'accès au niveau par domaine ou au niveau de l'application Web.

2
super1ha1