从沙盒 iFrame 到主 window 的 PostMessage，来源始终为 null

Question

关于 javascript postMessage 事件的事件起源，我有些不明白。

这是我的主页：

<html>
<body>

<h1>Test</h1>
<h2>Outside</h2>

<iframe src="iframe-include.html" 
    width="100%" height="100" 
    sandbox="allow-scripts"></iframe>

<script type="text/javascript">
window.addEventListener('message', function (event) {
    console.log(event);
}, false);
</script>

</body>
</html>

还有我的 iFrame 内容

<html>
<body>

<h3>Inside</h3>

<script type="text/javascript">
var counter = 1,
    domain = window.location.protocol + '//' + window.location.host,
    send = function () {
        window.setTimeout(function () {
            console.log('iframe says:', domain);
            window.parent.postMessage(counter, domain);
            counter += 1;
            send();
        }, 3000);
    };

send();
</script>

</body>
</html>

查看控制台，事件对象的来源属性始终为null，即使iFrame中的域变量是正确的。

我的控制台显示：

iframe-include.html:11 iframe says: http://127.0.0.1:8181
iframe.html:11 MessageEvent {isTrusted: true, data: 2, origin: "null", lastEventId: "", source: Window…}

在每个文档中，它都说在 "message" 事件侦听器中检查 event.origin 很重要。但是，如果它始终为 null 怎么办？

感谢您的帮助

Answer 1

由于 iframe 被沙盒化，因此无法访问其原始数据。

将 allow-same-origin 添加到 iframe 沙箱属性将使其再次运行。

Answer 2

正如 here 所指出的，在那种情况下有一个非常好的方法来确定发件人，而无需给予 allow-same-origin 许可：

  // Sandboxed iframes which lack the 'allow-same-origin'
  // header have "null" rather than a valid origin. This means you still
  // have to be careful about accepting data via the messaging API you
  // create. Check that source, and validate those inputs!
  var frame = document.getElementById('sandboxed');
  if (e.origin === "null" && e.source === frame.contentWindow)
    alert('Result: ' + e.data);

请注意，原点不是 null，而是 "null"。

从沙盒 iFrame 到主 window 的 PostMessage，来源始终为 null

PostMessage from a sandboxed iFrame to the main window, origin is always null

html

javascript

postmessage