我有一些用户可以放在他们网站上的嵌入代码。它会在页面上创建两个子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的脚本的好方法是什么?
如果传递非破坏性/更改消息,只检查数据参数是否足够?
谢谢!
答案 0 :(得分:17)
为什么你说儿童iframe不能直接沟通?实际上,他们可以。您可以在子iframe中执行的操作是使用window.parent
属性来获取对父窗口的引用,然后使用父的frames
属性来获取对所有子iframe的引用({{1} } property为您提供此类引用的数组)。之后,您可以在每个引用上使用frames
,并在postMessage调用中设置所需的origin restricttoin,以确保只有正确的iframe获取消息。
请注意,即使所有三个窗口(iframe1,父窗口和iframe2)都在不同的域上,这也会起作用,因为iframe1没有对父窗口做任何事情(这会违反SOP),它只提取对嵌套iframe的引用
链接: