你如何跨域使用window.postMessage？

Question

你如何跨域使用window.postMessage？

Kev*_*ose 81 javascript xss html5 google-chrome

看起来像window.postMessage的目的是允许在不同域上托管的窗口/框架之间进行安全通信,但实际上它似乎并不允许在Chrome中使用.

这是场景:

在域A的页面中嵌入<iframe>(带有src域B ^*)
<iframe>最终主要是一个<script>标签,最后执行...
我调用window.postMessage(some_data,page_on_A)

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

无法发布消息到一个.收件人有产地乙.

这是在A页面上注册消息事件监听器的代码:

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

Run Code Online (Sandbox Code Playgroud)

我也尝试过调用window.postMessage(some_data, '*'),但所有这一切都是为了抑制错误.

我只是忽略了这一点,是window.postMessage(...)不是为了这个吗？或者我只是做得非常糟糕？

_{*Mime-type text/html,它必须保留.}

Answer 1

Mic*_*Mic 76

以下是适用于Chrome 5.0.375.125的示例.

页面B(iframe内容):

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

Run Code Online (Sandbox Code Playgroud)

注意使用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>

Run Code Online (Sandbox Code Playgroud)

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

编辑:

从另一个问题,它看起来域(A和B在这里),必须有一个/为postMessage正常工作.

问题是关于跨域.接受的答案是关于同一个域名. (5认同)
当页面A检查消息的来源时,原点将不包含尾随的"/".如果页面B指定尾随'/'似乎并不重要.另一件需要注意的是,URL应该是绝对URL. (3认同)
+1。我们想确认这个解决方案适用于我们的案例。我们有一个页面，其中包含 **来自不同域**的 iframe。请注意，这仅适用于 Chrome 浏览器，因为在 Firefox 中我们需要使用 **window.parent.postMessage** 而不是 **top**。尽管我们不知道这是否可以应用于任何其他浏览器。 (2认同)

Answer 2

小智 21

您应该在加载后将消息从帧发布到父级.

框架脚本:

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

Run Code Online (Sandbox Code Playgroud)

在父母那里听:

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

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

Run Code Online (Sandbox Code Playgroud)

使用此链接获取更多信息:http://en.wikipedia.org/wiki/Web_Messaging

归档时间：	15 年，2 月前
查看次数：	128734 次
最近记录：	10 年，8 月前