Question

我需要在https://example.com上与http://example.com

分享localStorage

该网站在https上运行，但有一条特定的路径（/viewer）需要为http，因此它可以将其他网站嵌入到iframe中（如果浏览器没有阻止它）混合内容，因为https无法在iframe上加载http页面。

如何在https://example.com内访问http://example.com的localStorage？

如果不可能，是否有任何解决方法？

Answer 1

在localStorage中无法实现。

但是，您可以在http和https中使用javascript https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie来处理Cookie。

Answer 2

浏览器正在考虑将两种不同的协议作为不同的域，因此本地存储对于我们可以使用post message api进行的两种协议都不同，我们在本地存储中设置数据，我们在iFrame中调用函数并将该数据作为消息传递。

在http页面

中使用此代码

var data = "Smith";
localStorage.setItem("lastname", data);
let o = document.getElementsByTagName('iframe')[0];
o.contentWindow.postMessage({
  'func': 'set_data_function',
  'message': data
}, '*');

现在我们需要在https中接收这些数据并为我们的https设置数据，就像我们可以从两个协议的本地存储中删除数据一样。

此代码位于https页面中，您正在加载iframe。

// this is the function which is we calling from our http
window.set_data_function = function (data) {
    console.log('called from parant');
    localStorage.setItem("lastname", data);
}

$(function () {

    window.addEventListener('message', receiver, false);
    (window).set_data_function = this.set_data_function.bind(this);
    function receiver(e) {
        // also we able to check the origin this will make our script secure 
        console.log(event.origin);
        if (event.origin !== 'http://localhost:8081') {
            return;
        }

        var data = event.data;
        console.log(typeof (window[data.func]));
        window[data.func].call(undefined, data.message);
        if (typeof (window[data.func]) == 'function') {
            window[data.func].call(undefined, data.message);
        }
    }

});

希望它能帮助你好运

如何在相同的域上共享localStorage但不同的协议（http vs https）

2 个答案: