Question

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

我们将这个javascript包含在我们的网站abc.com和login.abc.com中作为跨域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://codepen.io/anon/pen/EVBGyz

直播示例： TPageControl //使用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版本的库，您将不得不与使用此库的所有其他网站共享存储。

一个好的解决方案可能是使用iframe和postMessage，如下面的堆栈溢出中所述： use localStorage across subdomains

Answer 3

您可以在Zendesk尝试此cross-storage。基本上，有集线器和客户：

集线器：驻留在任何服务器上，直接与LocalStorage API交互
客户端：使用嵌入式iframe加载集线器，发布消息，与数据交互

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

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

Answer 4

其他答案都忽略了您并不是真正在跨子域之间运行跨域这一事实。

您仍然需要一个隐藏的iframe来封装要访问的localStorage存储（api.abc.com）的来源，但是通过在主窗口和隐藏的iframe中都设置document.domain = "abc.com"，它们可以直接进行交互。

然后，您可以直接使用hiddenIFrame.contentWindow.localStorage而不是window.localStorage，而不必担心通过postMessage（）做任何事情的麻烦。

我在此处发布了此答案的更详细版本：https://stackoverflow.com/a/63602446/999120

使用javascript跨域localstorage

4 个答案: