使用postMessage在两个iframe孩子之间进行通信

Question

我有一些用户可以放在他们网站上的嵌入代码.它会在页面上创建两个子iframe.我想让这些孩子能够沟通.

我正在使用javascript的window.postMessage https://developer.mozilla.org/en-US/docs/DOM/window.postMessage

由于两个iframe孩子无法直接通信,我使用父亲作为消息的中继.但是,父级可以位于不同的域中,因为它是可嵌入的代码.

当所有三个(父项和两个孩子)都在同一个域上时,它非常简单,我使用安全检查检查 e.origin我自己的网站

# coffeescript
# host = "http://www.mysite.com"
host = "http://localhost"

receive_message = (e) ->
  console.log("received message from " + e.origin + ": " + e.data)
  return if e.origin != host

  if e.data == "show"
    ...
  else if e.data == "hide"
    ...

window.addEventListener("message", receive_message, false)

当父级可以在任何域上时,检查原点的优雅方法是什么？

允许调试源可以是localhost的脚本的好方法是什么？

如果传递非破坏性/变化的消息,只检查数据参数是否足够？

谢谢!

Answer 1

为什么你说儿童iframe不能直接沟通？实际上,他们可以.您可以在子iframe中执行的操作是使用该window.parent属性来获取对父窗口的引用,然后使用parent的frames属性来获取对所有子iframe的引用(该frames属性为您提供了此类引用的数组).之后,您可以postMessage在每个引用上使用,并在postMessage调用中设置所需的origin restricttoin,这样您就可以确保只有正确的iframe获取消息.

请注意,即使所有三个窗口(iframe1,父窗口和iframe2)都位于不同的域上,因为iframe1没有对父窗口执行任何操作(这会违反SOP),这也会起作用,它只提取对嵌套iframe的引用.

链接:

https://developer.mozilla.org/en-US/docs/DOM/window.parent

https://developer.mozilla.org/en-US/docs/DOM/window.frames