javascript - Facebook AppRunner 如何运作？

Question

我们正在为我们的服务实现 OAuth API，并将支持应用程序。

我想做的第一件事 - 允许应用 iframe 自动调整大小。

卡住了。

• 在父文档中，如果 iframe 在其他域上，我无法获取 iframe 内容的大小。
• 我无法通过我的 iframe 与父文档/脚本交互，因为 iframe 在其他域上。

但 Facebook 以某种方式做到了？？

我试图破解他们的应用加载流程，但没有成功。

他们在 iframe 中加载 page_proxy.php，然后以某种方式将来自应用程序的代码放入该 iframe 中。

当然，他们可能只是从应用程序中获取 html 内容，然后将所有 url 路径转换为绝对路径.. 但是。那么 Ajax 调用是如何工作的(如果它们只是加载我们的 html 内容——那么任何 ajax 调用都会变成跨域调用)？但它在 FB 上确实有效，就好像我的应用程序作为真正的 iframe 加载并且没有任何跨域调用..!但话又说回来.. 调整大小是如何工作的，为什么我在 Facebook 上看不到我的 iframe 而只看到 pageproxy？？

这里真的需要一些光。

谢谢。

Answer 1

终于找到了 FB 是怎么做到的:)

• page_proxy.php#frameName - 加载一个表单，然后使用 POST 方法加载带有签名请求的 iframe。

为什么没有直接调用app加载iframe？防止第 3 方脚本获得签名请求(其中包含所有用户信息)。

fb 是怎么做的(我采用的代码):

<form method="post" id="proxy_form"><input type="hidden" autocomplete="off" id="signed_request" name="signed_request" /></form>
<script>
  var frameName = window.location.href.split('#')[1];
  function submitForm(appTabUrl, signedRequest) {
    var proxyForm = document.getElementById("proxy_form");
    proxyForm.setAttribute("action", appTabUrl);
    proxyForm.setAttribute("target", frameName);
    var input = document.getElementById("signed_request");
    input.setAttribute("value", signedRequest);
    proxyForm.submit();
  }
  function waitForParams() {
    submitForm('$url_with_app', 'signed_request_goes_here');
  }
  waitForParams();</script>

• iFrame 中的应用程序正常加载，但我们在 DOM 浏览器中看不到我们的应用程序的 iframe，因为它是使用 POST 请求加载的。

• 我们在我们的应用程序中初始化 facebook 并告诉我们的应用程序自动增长。

• Facebook 完成初始化，等待 DOM 准备好并计算应用程序的高度。

• 现在是扩大我们的 iframe 的时候了。这是他们使用的技巧:

Source from FB

_sendMessageToFacebook: function(message) {
    var url = FB._domain.staticfb + 'connect/canvas_proxy.php#' +
      FB.QS.encode({method: message.method,
                    params: FB.JSON.stringify(message.params)});

     var root = FB.Content.appendHidden('');
     FB.Content.insertIframe({
       url: url,
       root: root,
       width: 1,
       height: 1,
       onload: function() {
         setTimeout(function() {
           root.parentNode.removeChild(root);
         }, 10);
       }
     });
  }

他们在我们的应用程序中加载了另一个 iframe，但该 iframe 已经属于 facebook 并且可以与 FB 父级(顶部窗口)交互并向父级发送所有必需的信息!

• This is how it looks internally (check source code)