【问题标题】:Facebook and Cross domain messaging clarification?Facebook 和跨域消息传递澄清?
【发布时间】:2013-05-27 13:34:24
【问题描述】:

我想调查 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 创建 another iframe,其中包含来自查询字符串的 SRC 值(该值实际上是首页 url),然后,在两个页面上都使用 JS + URL =&gt; JS触发函数,我们可以这样做:

top.sendData({...})

我错过了什么?

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

【问题讨论】:

    标签: javascript facebook cross-domain facebook-javascript-sdk


    【解决方案1】:

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

    这个设置对某些人来说可能看起来有点不正统和困惑,但如果我自己这么说的话,它真的很优雅:)


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

    这些资源,即代理,通过片段传递一些信息,为它们提供动态功能,但在其他方面是 100% 静态并由您的浏览器缓存 - 所以这些资源的加载速度非常快。

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

    这个链接如何跨浏览器工作是一个更复杂的问题,但它都被抽象成一个频道,就像你在easyXDM 看到的那样。


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

    当需要向主机页面发送消息时,这些将使用(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) api,它如果我们实施的原产地检查允许,将“神奇地”在另一端结束。

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


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

    【讨论】:

    • 我的感激之情无法用言语形容。不过我还有一个问题。两个 FB 的 I 框架都可以通过 window.opener.frames[...] 连接(由于 document.domain=... 而相互连接)但是在他们这样做之后,他们如何传输信息到 host 页面?它的起源不同!
    • 我的意思是,这些 iframe 是使用 hidden Iframe technique(就像我的问题一样),还是使用 postMessage 或....什么?他们如何对主机 PAge 说:"Hey hoster , this is the user information :..."
    • 我已经坐了一整天了。并设法做到这一点:i.stack.imgur.com/zVS3M.jpg 如果相同,请回复...
    • 肖恩,你能回答我的cmets吗?
    • @Ben,对此无需采取任何措施 - 最坏的情况是工具方面的错误分类。
    【解决方案2】:

    我认为这个概念可以很简单,具体取决于您的代码是否为 ie8+。

    CORS 可用于跨域通信。确保在您的主机上设置了正确的标题并且您很好。

    或者,创建一个 iframe,将其 src 设置为将信息传递给动态脚本的东西。处理信息。将JS代码返回给使用postMessage与外部窗口通信的iframe。

    【讨论】:

      猜你喜欢
      • 2017-09-10
      • 1970-01-01
      • 1970-01-01
      • 2016-12-04
      • 1970-01-01
      • 2012-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多