Question

见下面的示例代码

如果我注释掉“沙盒”属性行，一切都运行得很好。
如果我取消注释“sandbox”属性行，在chrome open developer console中，我们会在“DOMWindow”上看到错误“无法执行'postMessage'：提供的目标源（'https://www.bing.com'）不会匹配收件人窗口的原点（'null'）。“

任何想法如何解决这个问题？

const iframeElement = document.createElement("iframe");
iframeElement.src = "https://www.bing.com"
//iframeElement.setAttribute("sandbox", "allow-forms allow-modals allow-popups allow-scripts");
iframeElement.onload = (e) => {
  iframeElement.contentWindow.postMessage("foo", "https://www.bing.com");
};

const containerElement = document.getElementById("place-holder-for-iframe");
containerElement.appendChild(iframeElement);

您可以使用此jsbin链接进行试用 http://jsbin.com/gafobulife/edit?js,output

打开chrome中的js bin链接
open chrome developer tool - ＆gt;转到控制台选项卡
取消注释沙箱行
点击jsbin

Answer 1

如果您未在沙盒属性中设置allow-same-origin，则会将内容视为来自唯一来源：请参阅https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#Attributes和https://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/。

令人困惑的是，allow-same-origin并不意味着iframe将能够访问其父级，就好像它们是相同的来源（除非它们是相同的来源），但它意味着它将被视为来自其正常来源（在这种情况下，https://www.bing.com）。

所以你可以改变：

iframeElement.setAttribute("sandbox", "allow-forms allow-modals allow-popups allow-scripts")'

到

iframeElement.setAttribute("sandbox", "allow-forms allow-modals allow-popups allow-scripts allow-same-origin");

或者如果您不希望自己的iframe保持其原点，请更改：

iframeElement.contentWindow.postMessage("foo", "https://www.bing.com");

到

iframeElement.contentWindow.postMessage("foo", "*");

对我而言，如果我不使用allow-same-origin，则会出现其他错误，很可能是bing.com的配置方式。

如何正确postMessage到启用了沙箱属性的iframe

1 个答案: