如何将消息发布到同级 iFrame答案

【问题标题】：How do I postMessage to a sibling iFrame如何将消息发布到同级 iFrame
【发布时间】：2012-09-16 22:29:26
【问题描述】：

我正在寻找一种在父页面中没有任何 javascript 的情况下将消息发布到同级 iFrame 的方法。我遇到的困难是尝试从第一个 iFrame 获取另一个 iFrame 的窗口对象

页面的布局如下：

html body (http://host.com/)
  iFrame#a (http://me.com/a)
  iFrame#b (http://me.com/b)

来自iFrame#a我正在努力：

(iFrame#b window).postMessage(...)

问题是我不知道如何从iFrame#a 中获取iFrame#b 的窗口对象。 parent.getElementById()等功能受XSS限制。在上面的示例中，我只想向父页面上来自我的域 http://me.com/ 的所有其他 iFrame 发出 postMessage。

【问题讨论】：

标签： javascript iframe xss postmessage

【解决方案1】：

虽然不可能与另一个域上的另一个窗口/iframe 进行交互，但是可以获取对此类窗口/iframe 和所有嵌入的子 iframe 的引用进入该窗口/ iframe。这样做的方法是使用window.top.frames（访问顶层窗口对象）或window.parent.frames（访问直接父窗口对象，同时可能还有其他更高级别的祖先）。无需使用getElementById 或其他与DOM 相关的功能。有关更多信息，请参阅此内容：https://developer.mozilla.org/en-US/docs/DOM/window.frames

window.frames 属性返回一个类似数组的对象，然后您可以对其进行迭代并在每个 iframe 上执行 postMessage。这不会触发同源限制，因为除了在它们上使用 postMessage 之外，您不会以任何方式与任何窗口进行交互。由于您想对来自特定域的每个 iframe 执行 postMessage，您可以这样做：

var frames = window.parent.frames;
for (var i = 0; i < frames.length; i++) { 
  frames[i].postMessage("hello", targetDomain);
}

【讨论】：

【解决方案2】：

您将无法执行此操作，因为 iframe 无法与嵌入它的页面（也不是该页面中的任何内容）进行交互，除非父级位于同一域下（在您的示例中，它不是）。如果可以的话，它会带来 XSS 安全问题，正如您所指出的那样。

相反，您可以：

在 /a/ 中设置一个 cookie 并在 /b/ 中轮询它（这会很昂贵，因为 /b/ 必须以某种方式继续调用服务器）
使用“HTML5”持久数据存储机制，将数据从 /a/ 存储并在 /b/ 中轮询（也许可以使用 localStorage）
使用websocket 通过服务器链接您的所有兄弟姐妹
重新考虑您想要做什么：您想要实现的目标听起来很奇怪 - 您确定没有比使用这样的 iframe 更好的方法了吗？

【讨论】：