通过消息将数据传递给 iframe 时不更改原点

Question

假设我有 2 页： foo.com 和 bar.com 我使用 Tapermonkey 在它们每个上都有一个脚本运行。我想 foo.com 上的脚本将数据传递给 bar.com 上的脚本。因为 foo 和 bar 在不同的域我不能直接传递数据 (GM_setValue, localStorage, webSQL).

但我找到了这个教程： https://jcubic.wordpress.com/2014/06/20/cross-domain-localstorage/

诀窍是将带bar.com的iframe附加到foo.com，通过postMessage发送数据，在iframe中接收数据并将其保存到本地存储。然后 foo.com 上的第二个脚本将能够从本地存储读取数据。

这是第一个脚本：

var name = "John";
var div = document.createElement('div');
div.id = "result";
document.body.appendChild(div);   
var barPage = 'http://bar.com/';
document.getElementById("result").innerHTML = "<iframe src='"+ barPage +"' width='100%' height='100px' id='bariframe' />";

$(document).ready(function() {
    var win = div.children[0].contentWindow;

    var script = "window.addEventListener('message',function(e){if(e.origin!=='http://bar.com/'){console.log('wrong origin: '+e.origin);return}alert(e.data);var payload=JSON.parse(e.data);localStorage.setItem(payload.key,JSON.stringify(payload.data))});";

    var scriptObj = win.document.createElement("script");
    scriptObj.type = "text/javascript";
    scriptObj.id = "barscript";
    scriptObj.innerHTML = script;
    win.document.body.appendChild(scriptObj);        

    var obj = {
        "name": name
    };
    var json = JSON.stringify({key: 'storage', data: obj});
    win.postMessage(json, "*");
    console.log("Sent: " + json);
});

脚本的作用：

1) 创建空 div 并将其添加到 foo.com

的底部

2) 文档加载后，我将 javascript 注入 iframe 并通过 postMessage

向其发送数据

3) 注入的脚本应该接收数据并将其保存到 localStorage。

但问题是我仍然在该脚本中获取 foo.com 来源。它应该是 bar.com，不是吗？

因为当我真正打开 foo.com 脚本时，这里不会有这些数据。

为什么不起作用？

Answer 1

由于 "same origin policy"，您无法访问您正在创建的跨源 iframe 以这种方式向其附加任何内容。

您需要来自 bar.com 的 html 页面，其中包含 postMessage 侦听器才能使您的方法生效

通过消息将数据传递给 iframe 时不更改原点

Not changing origin when passing data to iframe via message

javascript

jquery

iframe

greasemonkey

tampermonkey