个人中心
gpt4 book ai didi

javascript - 从沙盒 iFrame 到主窗口的 PostMessage，origin 始终为 null

转载 作者：技术小花猫 更新时间：2023-10-29 12:43:10 26 4
gpt4 key购买 nike

关于 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>

查看控制台，事件对象的 origin 属性始终为 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…}

在每个文档中，它都说检查“消息”事件监听器中的 event.origin 很重要。但是，如果它始终为 null，该怎么做呢？

感谢帮助

最佳答案

正如指出的那样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"。

关于javascript - 从沙盒 iFrame 到主窗口的 PostMessage，origin 始终为 null，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37838875/

26 4 0
文章推荐： html - 水平居中时，li 被切断
文章推荐： javascript - navigator.contacts.find 不工作(cordova/phonegap)
文章推荐： android - MvxListView 不水平显示
文章推荐： linux - 进程在收到 SIGTERM 后应该多快退出？
技术小花猫
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com