stocare locală cross domain cu javascript (Programare, Javascript, Stocare Locală)

Mark a intrebat.

Avem un javascript api.js care este găzduit pe domeniul api.abc.com. Acesta gestionează stocarea locală.

Am inclus acest javascript în site-urile noastre web de la abc.com și login.abc.com ca un js transdomeniu, cum ar fi

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

Înțeleg că localstoarge este pe bază de domeniu. Cu toate acestea, din moment ce api.js este încărcat de pe api.abc.com, mă așteptam ca acesta să aibă acces la stocarea locală a api.abc.com din ambele domenii. Din păcate, nu pare să fie cazul. Atunci când api.js stochează o valoare în localstoarge dintr-un domeniu, aceasta nu este accesibilă atunci când este încărcată din celălalt domeniu.

Aveți vreo idee?

Comentarii

  • Nu cred că da. Api.js este executat pe partea de client a browserului, cu domeniul. Asta este ceea ce contează. –  > Por Praveen Kumar Purushothaman.
  • Nu contează de unde provine scriptul (scriptul poate fi încărcat de la CND, nu vă așteptați ca localStorage să fie salvat pe domeniul CDN), dar dacă aveți nevoie de localStorage inter-domeniu există o modalitate folosind proxy iframe, verificați acest articol Stocare locală între domenii. Puteți utiliza iframe pentru a interacționa cu orice API de pe un domeniu diferit. –  > Por jcubic.
4 răspunsuri
25r43q

Ce ziceți de utilizarea postmessage și iframe de domenii încrucișate?

Deci, pe pagina dvs. de domeniu greșit, includeți un iframe care postează mesaje cu datele cookie înapoi.

Aici este un exemplu solid de cross domain postmessage:http://blog.teamtreehouse.com/cross-domain-messaging-with-postmessage

un exemplu viu:http://codepen.io/anon/pen/EVBGyz //cod de expeditor modificat cu o mică schimbare 🙂 :

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

Codul destinatarului:

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

Benjamin Chelli

După cum se observă în postarea dvs., localStorage (și sessionStorage) nu va fi stocat pe spațiul de stocare aferent domeniului api.abc.com. Dacă acesta ar fi cazul, prin utilizarea versiunii CDN a unei biblioteci care utilizează localStorage ar trebui să partajați stocarea cu toate celelalte site-uri web care utilizează această bibliotecă.

O soluție bună ar putea fi utilizarea unui iframe cu postMessage, așa cum se explică în următorul stack overflow:use localStorage across subdomains

Comentarii

  • Adevărat, punctul dvs. de vedere este luat în considerare, însă CDN este adesea un domeniu diferit și mi-aș dori să fie permis între subdomenii, la fel cum sunt permise cookie-urile. –  > Por Mark.
super1ha1

Ați putea încerca acest lucru cross-storage de la Zendesk. Practic, există hub-uri și clienți:

  • hub-uri: rezidă pe orice server, interacționează direct cu API-ul LocalStorage

  • clienți: încarcă hub-ul folosind un iframe încorporat și postează mesaje, interacționează cu datele

Lucrurile cheie sunt că puteți configura permisiunile (obține, setează, șterge) pe care le-ar putea avea fiecare client gazdă sau domeniu. Biblioteca este împărțită în două tipuri de componente: hub-uri și clienți.

Trebuie avut grijă să se limiteze originile comunicării bidirecționale. Ca atare, la inițializarea hub-ului, se trece un array de obiecte de permisiuni. Toate mesajele de la clienți a căror origine nu corespunde modelului sunt ignorate, precum și cele care nu se încadrează în setul de metode permise. Setul de permisiuni este pus în aplicare datorită politicii de aceeași origine. Cu toate acestea, nu uitați că orice utilizator are control deplin asupra datelor de stocare locală – acestea sunt tot date ale clientului. Acest lucru restricționează accesul doar la nivel de domeniu sau de aplicație web.

Faceți

Celelalte răspunsuri ignoră toate faptul că nu operați cu adevărat între domenii, ci doar între subdomenii.

Aveți nevoie în continuare de un iframe ascuns pentru a încapsula originea magazinului localStorage pe care doriți să-l accesați (api.abc.com), dar prin setarea document.domain = "abc.com" atât pe fereastra principală, cât și pe iframe-ul ascuns, acestea pot interacționa direct.

Apoi, puteți utiliza literalmente doar hiddenIFrame.contentWindow.localStorage în loc de window.localStorage, , și să uitați de durerea de cap de a face ceva prin postMessage().

Am postat o versiune mai detaliată a acestui răspuns aici: https://stackoverflow.com/a/63602446/999120