如何跨域使用 window.postMessage？

IT技术 javascript html google-chrome xss
2021-01-18 12:36:41

似乎window.postMessage 的重点是允许托管在不同域上的窗口/框架之间进行安全通信，但它实际上似乎不允许在 Chrome 中进行。

这是场景：

  1. 在域 A 的页面中嵌入 <iframe>（src域 B *上有一个）
  2. <iframe> 最终主要是一个 <script> 标签，在其结束时执行......
  3. 我打电话给 window.postMessage( some_data , page_on_A )

<iframe> 绝对是在域 B 的上下文中，我已经确认 <iframe> 中嵌入的 javascript 可以正确执行并postMessage使用正确的值调用。

我在 Chrome 中收到此错误消息：

无法向A发布消息。收件人有来源B。

这是在 A 上的页面中注册消息事件侦听器的代码：

window.addEventListener(
  "message",
  function (event) {
    // Do something
  },
  false);

我也试过调用window.postMessage(some_data, '*')，但所做的只是抑制错误。

我是否只是错过了这一点， window.postMessage(...) 不是为了这个吗？还是我只是做错了可怕的事？

* Mime-type text/html，它必须保留。

3个回答

这是一个适用于 Chrome 5.0.375.125 的示例。

页面B（iframe内容）：

<html>
    <head></head>
    <body>
        <script>
            top.postMessage('hello', 'A');
        </script>
    </body>
</html>

注意使用top.postMessage或parent.postMessage不window.postMessage这里

页面A：

<html>
<head></head>
<body>
    <iframe src="B"></iframe>
    <script>
        window.addEventListener( "message",
          function (e) {
                if(e.origin !== 'B'){ return; } 
                alert(e.data);
          },
          false);
    </script>
</body>
</html>

A 和 B 必须是这样的 http://domain.com

编辑：

从另一个问题来看，域（此处/为A 和 B）必须具有一个postMessage才能正常工作。

@stackular，不完全是。A 和 B 可以是任何域。这是拥有的主要原因postMessage
2021-03-21 12:36:41
+1。我们想确认此解决方案适用于我们的案例。我们有一个包含来自不同域的 iframe 的页面。请注意，这只适用于 Chrome 浏览器，因为在 firefox 中我们需要使用window.parent.postMessage而不是top。虽然我们不知道这是否可以应用于任何其他浏览器。
2021-03-23 12:36:41
这个答案让我有点困惑，仍在寻找答案。 blog.teamtreehouse.com/cross-domain-messaging-with-postmessage包含对 postMessage 的非常好的解释。重要的是消息发送者知道接收者的域。在上面的示例中，A 和 B 不必是相同的域，但 B 必须确切知道 A 使用的是哪个域。
2021-03-25 12:36:41
当页面 A 检查消息的来源时，来源将不包含尾随的“/”。页面 B 是否指定尾随 '/' 似乎无关紧要。另一件要注意的事情是 URL 应该是绝对 URL。
2021-03-31 12:36:41
问题是关于跨域的。接受的答案是关于同一个域。
2021-04-09 12:36:41

加载后，您应该从框架向父级发布消息。

框架脚本：

$(document).ready(function() {
    window.parent.postMessage("I'm loaded", "*");
});

并在父母中收听：

function listenMessage(msg) {
    alert(msg);
}

if (window.addEventListener) {
    window.addEventListener("message", listenMessage, false);
} else {
    window.attachEvent("onmessage", listenMessage);
}

使用此链接了解更多信息：http : //en.wikipedia.org/wiki/Web_Messaging

可能您尝试将数据从 mydomain.com 发送到 www.mydomain.com 或反向发送，注意您错过了“www”。http://mydomain.com和http://www.mydomain.com是与 javascript 不同的域。

在我正在做的一个项目中，我正在使用file:/// 仅从本地文件系统中提取内容时是否可能出现域错误？
2021-03-23 12:36:41
其它你可能感兴趣的问题
上一篇合并和缩小多个 CSS / JS 文件 下一篇如何使用 Javascript/HTML 进行简单的图片上传