javascript - Facebook 和跨域消息传递说明？

Question

我想研究 facebook 登录如何将数据传输到主页 (mypage) - 尽管存在跨域边界限制。

因此我使用 FB js sdk 代码创建了一个新页面:

FB.login(function (response)
    {
    if (response.authResponse)
        {...

它确实打开了弹出窗口:

但是当我调查我的页面上是否有任何 iframe 时(我的代码不包含任何 iframe):

我看到了这个:

>>$("iframe")

结果:

[
<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>​
]

我读到它们用于跨域。

但问题是为什么它们在我的页面上？

它们应该在 facebook 内部页面的某个地方!

我这么说是因为我知道 Iframe 技术是这样工作的:

如您所见 - 内部 iframe 使用查询字符串中的 SRC 值创建另一个 iframe(该值实际上是首页 url)，然后 ,两个页面上的 JS + URL => JS 触发函数，我们可以这样做:

top.sendData({...})

我错过了什么？

• 数据如何从 FB 登录传递到我的页面？

Answer 1

我是为 Facebook JS SDK 中的跨域消息传递设计当前基础架构的工程师，所以也许我可以在这里阐明一些事情。

这个设置对于某些人来说可能看起来有点不正统和令人困惑，但它确实非常优雅，如果我自己这么说的话:)

---

根据页面是 HTTP 还是 HTTPS，JS SDK 将创建两个 iframe，指向 xd_arbiter.php 资源，该资源由 *.facebook.com 域提供。由于它设置了 document.domain = 'facebook.com'，因此它们可以与 facebook.com 上执行相同操作的其他资源进行通信。

这些资源(代理)通过片段传递一些信息，以赋予它们动态功能，但在其他方面是 100% 静态的并由您的浏览器缓存 - 因此这些资源加载速度非常快。

接下来发生的是在主机页面和每个 iframe(代理)之间建立一个跨域消息传递链接。这意味着从现在开始，主机页面可以与 facebook.com 上的 HTTPS 页面通信，如果主机页面是 HTTP，它也可以与 facebook.com 上的 HTTP 页面通信。

这个链接如何跨浏览器工作是一个更复杂的问题，但它都被抽象到一个 channel 中，就像您在 easyXDM 中看到的一样。 .

---

现在，每当 JS SDK 在 facebook.com 上创建一个新窗口时，无论是作为弹出窗口还是作为 iframe，都不必在主机页面和每个窗口之间设置新的通信 channel ，新窗口可以利用现有代理，无需支付任何设置费用。

当需要向主机页面发送消息时，这些将使用 (window.opener || window.parent).frames['fb_xdm_frame_' + location.protocol.replace(':', '') 来获取代理的句柄，同样，代理可以使用 parent.frames[some_name] 来获取页面上任何同级 iframe 的句柄，只要正确的代理 (使用 HTTP 或 HTTPS)。

对我们来说，这基本上意味着关于如何跨域通信的问题与 JS SDK 及其资源隔离 - 我们在此之上构建的任何服务都可以依赖于 send_this_message( message, origin) 如果我们已进行的源检查允许，它将“神奇地”到达另一端。

我希望这能回答您的问题!

---

(xd_arbiter.php 也可以作为重定向目标，它将使用它的兄弟代理来中继消息)。