javascript - 如何跨域使用window.postMessage?

标签 javascript html google-chrome xss

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

场景如下:

  1. 在域 A 的页面中嵌入一个 <iframe>(在域 B 上有一个 src*)
  2. <iframe> 最终主要是一个 <script> 标记,在执行结束时...
  3. 我调用 window.postMessage( some_data, page_on_A )

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

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

Unable to post message to A. Recipient has origin B.

下面是在A上的页面中注册一个消息事件监听器的代码:

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

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

我只是错过了这里的重点,window.postMessage(...) 不是这个意思吗?还是我只是做错了?

*Mime 类型的文本/html,它必须保留。

最佳答案

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

页面 B(iframe 内容):

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

注意这里使用的是 top.postMessageparent.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.example

来自 another question ,看起来域(这里是 A 和 B)必须有一个 / 才能使 postMessage 正常工作。

关于javascript - 如何跨域使用window.postMessage?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3457391/

相关文章:

javascript - 如何使用javascript制作动态变化的下载链接?

javascript - 如何使用 SoundCloud API 按流派过滤

android - 移动版 Chrome HTML Canvas 宽度限制

google-chrome - SSL 证书 "err_cert_authority_invalid"仅适用于移动版 chrome

css - Chrome 在 <picture> HTML5 中加载 2 张图片

javascript - Twitter Bootstrap 旋转木马共享水平行

javascript - Highcharts 小尺寸 div 不显示minorTickInterval

javascript - 在 IOS 上固定位置和倾斜

javascript - 将模型引用直接传递给 HTML 元素是否正确?

jquery - HTML5 视频重叠——带有可点击的按钮