如何将消息正确发布到启用了沙箱属性的 iframe 中

Question

请参阅下面的示例代码

• 如果我注释掉“沙箱”属性行，一切都会运行得很好。
• 如果我取消注释“沙箱”属性行，在 chrome 打开的开发者控制台中，我们将看到错误“无法在 '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链接
• 打开 chrome 开发者工具 --> 转到控制台选项卡
• 取消注释沙箱行
• 单击 jsbin 中的“使用 js 运行”

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配置方式。