使用javascript跨域localstorage

Question

我们有一个javascript api.js,它托管在域api.abc.com上.它管理本地存储.

我们在我们的网站abc.com和login.abc.com中包含了这个javascript作为跨域js

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

我了解localstoarge是基于域的.但是,由于api.js是从api.abc.com加载的,我预计它将从这两个域访问api.abc.com的本地存储.不幸的是,似乎并非如此.当api.js在一个域的localstoarge中存储一个值时,从其他域加载时无法访问它.

任何的想法？

Answer 1

如何使用跨域postmessage和iframe？

因此,在您的错误域名页面上,您包含一个iframe,用于发回包含Cookie数据的邮件.

以下是跨域postmessages的一个很好的例子:http://blog.teamtreehouse.com/cross-domain-messaging-with-postmessage

实例: http://codepen.io/anon/pen/EVBGyz //分叉发送者代码与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);
}

接收者代码:

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

正如您在帖子中所注意到的，localStorage（也是 sessionStorage）不会存储在与域 api.abc.com 相关的存储中。如果是这种情况，通过使用 localStorage 使用库的 CDN 版本，您将必须与使用此库的所有其他网站共享存储。

一个好的解决方案可能是使用带有 postMessage 的 iframe，如以下堆栈溢出中所述： 跨子域使用 localStorage

Answer 3

您可以尝试 Zendesk 的这种交叉存储。基本上，有中心和客户端：

• hubs：驻留在任何服务器上，直接与 LocalStorage API 交互

• 客户端：使用嵌入式 iframe 加载集线器，发布消息，与数据交互

关键是您可以配置每个主机或域客户端可以拥有的权限（获取、设置、删除）。该库分为两种类型的组件：集线器和客户端。

应注意限制双向通信的来源。因此，在初始化集线器时，会传递一组权限对象。来自来源与模式不匹配的客户端的任何消息以及不在允许的方法集中的消息都将被忽略。由于同源策略，该组权限得以强制执行。但是，请记住，任何用户都可以完全控制其本地存储数据 - 它仍然是客户端数据。这仅限制每个域或 Web 应用程序级别的访问。