javascript Facebook 和跨域消息传递说明？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16862207/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Facebook and Cross domain messaging clarification?
提问by Royi Namir
I wanted to investigate how the facebook login transfer data to the main page ( mypage) - despite the cross domain boundary limitation.
我想调查 facebook 登录如何将数据传输到主页 (mypage) - 尽管存在跨域边界限制。
And so I created a new page with the FB js sdkcode :
所以我用FB js sdk代码创建了一个新页面：
FB.login(function (response)
{
if (response.authResponse)
{...
It does open the popup :
它确实打开了弹出窗口：
But when I investigated to see if I have any Iframes on my page( My code doesn't contain any iframes) :
但是当我调查我的页面上是否有任何 iframe时（我的代码不包含任何 iframe）：
I saw this :
我看到了这个 ：
>>$("iframe")
result :
结果 ：
[
<iframe name=?"fb_xdm_frame_http" frameborder=?"0" allowtransparency=?"true" scrolling=?"no" id=?"fb_xdm_frame_http" aria-hidden=?"true" title=?"Facebook Cross Domain Communication Frame" tab-index=?"-1" src=?"http:?/?/?static.ak.facebook.com/?connect/?xd_arbiter.php?version=24#channe…l_path=%2FWebSite2%2FHTMLPage3.htm%3Ffb_xd_fragment%23xd_sig%3Df5252874%26" style=?"border:? none;?">?…?</iframe>?
,
<iframe name=?"fb_xdm_frame_https" frameborder=?"0" allowtransparency=?"true" scrolling=?"no" id=?"fb_xdm_frame_https" aria-hidden=?"true" title=?"Facebook Cross Domain Communication Frame" tab-index=?"-1" src=?"https:?/?/?s-static.ak.facebook.com/?connect/?xd_arbiter.php?version=24#cha…l_path=%2FWebSite2%2FHTMLPage3.htm%3Ffb_xd_fragment%23xd_sig%3Df5252874%26" style=?"border:? none;?">?…?</iframe>?
]
I read that they are used for the cross domain.
我读到它们用于跨域。
But the question is why are they on MY PAGE?
但问题是他们为什么在我的页面上？
They should be somewhere on facebook internal pages!
他们应该在 facebook 内部页面的某个地方！
I'm saying it because I know that the Iframe techniqueworks like this :
我这么说是因为我知道Iframe 技术是这样工作的：
As you can see - the internal Iframe creates anotheriframe with the SRCvalue from query string (the value is the top page url actually) , and then , with JS on both pages + URL => JStrigger functions , we can do :
如您所见 - 内部iframe 使用查询字符串中的值创建另一个iframe SRC（该值实际上是首页 url），然后，在两个页面上使用 JS + URL => JS触发器函数，我们可以执行以下操作：
top.sendData({...})
top.sendData({...})
What am I missing ?
我错过了什么？
- How does the data is being passed from the FB login to my page ?
- 数据如何从 FB 登录传递到我的页面？
回答by Sean Kinsey
I'm the engineer who designed the current infrastructure for Cross-Domain Messaging in the Facebook JS SDK, so maybe I can shed some light on things here.
我是为 Facebook JS SDK 中的跨域消息传递设计当前基础架构的工程师，所以也许我可以在这里解释一些事情。
This setup might seem a bit unorthodox and confusing to some, but it's really quite elegant, if I might say so myself :)
这个设置对某些人来说可能看起来有点不正统和令人困惑，但它确实非常优雅，如果我自己可以这么说:)
Depending on whether the page is HTTP or HTTPS, the JS SDK will create two iframes, pointing to the xd_arbiter.php resource, which is served from a *.facebook.com domain. Since it sets document.domain = 'facebook.com', these can communicate with other resources on facebook.com that does the same.
根据页面是 HTTP 还是 HTTPS，JS SDK 将创建两个 iframe，指向 xd_arbiter.php 资源，该资源由 *.facebook.com 域提供。由于它设置了document.domain = 'facebook.com'，这些可以与 facebook.com 上的其他资源进行相同的通信。
These resources, the proxies, gets passes some information through the fragment, to give them dynamic capabilities, but are otherwise 100% static and cached by your browser - so these are really fast to load.
这些资源，即代理，通过片段传递一些信息，为它们提供动态功能，但在其他方面是 100% 静态的并由浏览器缓存 - 因此它们加载速度非常快。
What happens next is that a Cross-Domain Messaging link is established between the host page, and each of the iframes (the proxies). This means that from now on, the host page can communicate to a HTTPS page on facebook.com, and if the host page is HTTP, it can also communicate with a HTTP page on facebook.com.
接下来发生的是在主机页面和每个 iframe（代理）之间建立跨域消息传递链接。这意味着从现在开始，主机页面可以与 facebook.com 上的 HTTPS 页面通信，如果主机页面是 HTTP，它也可以与 facebook.com 上的 HTTP 页面通信。
How this link works across browsers is a more complex matter, but it's all abstracted into a channel, much like you can see with easyXDM.
这个链接如何跨浏览器工作是一个更复杂的问题，但它都被抽象成一个通道，就像你在easyXDM 中看到的一样。
Now, whenever the JS SDK creates a new window on facebook.com, either as a popup, or as an iframe, instead of having to set up a fresh communication channel between the host page and each window, the new windows can utilize the existing proxy, paying no cost in setup.
现在，每当 JS SDK 在 facebook.com 上创建一个新窗口时，无论是作为弹出窗口还是作为 iframe，都不必在主机页面和每个窗口之间设置新的通信通道，新窗口可以利用现有的代理，无需支付设置费用。
When needing to send messages to the host page, these will use (window.opener || window.parent).frames['fb_xdm_frame_' + location.protocol.replace(':', '')to get a handle to the proxy, and similarly, the proxy can use parent.frames[some_name]to get a handle to any sibling iframes on the page, as long as the right proxy (HTTP or HTTPS) was used.
当需要向主机页面发送消息时，这些将用于(window.opener || window.parent).frames['fb_xdm_frame_' + location.protocol.replace(':', '')获取代理的句柄，类似地，代理可以用于parent.frames[some_name]获取页面上任何兄弟 iframe 的句柄，只要正确的代理（HTTP 或 HTTPS ) 被使用。
For us, this basically means that the concern about how to communicate cross-domain is isolated to the JS SDK and its resources - any services we build on top of this can rely on a very simple api of send_this_message(message, origin)and it will 'magically' end up on the other end, if allowed by the origin checks we have in place.
对我们来说，这基本上意味着对如何跨域通信的关注与 JS SDK 及其资源隔离 - 我们在此基础上构建的任何服务都可以依赖于一个非常简单的 apisend_this_message(message, origin)并且它会“神奇地”结束另一方面，如果我们的原点检查允许的话。
I hope this answers your question!
我希望这回答了你的问题！
(xd_arbiter.php can also serve as a redirect target, where it will use it's sibling proxies to relay the message).
（xd_arbiter.php 也可以用作重定向目标，它将使用它的兄弟代理来中继消息）。
回答by majestiq
I think the concept can be simple based on if you're ie8+ in your code.
我认为这个概念可以很简单，如果你在你的代码中使用 ie8+。
CORS can be used to communicate cross domain. Make sure the right headers are set at your host and you're good.
CORS 可用于跨域通信。确保在您的主机上设置了正确的标题并且您很好。
Or, create an iframe, set its src as something that passes information to a dynamic script. Process the information. Return JS code to the iframe that uses postMessage to communicate with the outside window.
或者，创建一个 iframe，将其 src 设置为将信息传递给动态脚本的内容。处理信息。将 JS 代码返回给使用 postMessage 与外部窗口通信的 iframe。
