javascript - Google/Facebook 如何执行跨源 Javascript？

Question

Google 和 Facebook 都允许用户“使用 _____ 登录”。网站开发人员通常只需要包含一个 Javascript 并提供一个回调来处理登录响应。根据我对浏览器中 JavaScript 安全性的理解，这应该是不可能的。

我看过几种跨域JavaScript通信的方法，比如Porthole或 easyXDM .在这些方法中的每一种中，开发人员都需要托管一个小的静态 HTML 文件，以便 Facebook 或 Google(即“包含的”内容)可以与父框架进行通信。一个例子是包含来自 Google (google.com) 的 iframe 的应用程序 (app.example.com)，它又包含来自应用程序 (app.example.com) 的 iframe。最里面的 iframe 的 JavaScript 可以与最顶层的窗口通信，因为它们在同一个域中(通过 this.parent.parent)。

+-------------------------------------------------------------+
| https://app.example.com                                     |
+-------------------------------------------------------------+
|                                                             |
|  +------------(hidden iframe)-----------------------------+ |
|  | https://whatever.google.com                            | |
|  +--------------------------------------------------------+ |
|  |                                                        | |
|  |  +---------(hidden iframe)--------------------------+  | |
|  |  | https://app.example.com/receiver                 |  | |
|  |  +--------------------------------------------------+  | |
|  |  |                                                  |  | |
|  |  | (script that calls this.parent.parent.callback)  |  | |
|  |  |                                                  |  | |
|  |  +--------------------------------------------------+  | |
|  |                                                        | |
|  +--------------------------------------------------------+ |
|                                                             |
+-------------------------------------------------------------+

但是，这要求最里面的 iframe 在 app.example.com 域中包含一个“接收者”页面。它的唯一目的是读取它的 URL 栏，然后将该数据传递给父窗口。随着Google和 Facebook然而，解决方案不需要静态 HTML 页面。 那么，如果不是静态接收页面，他们使用什么机制来传回数据？他们框架中的 JavaScript 不应该访问父 JavaScript。 Window.PostMessage 似乎是 dubious at best ，因为它的 IE8、IE9 和 IE10 实现是 either broken or quirky .

Answer 1

让我先为您指出正确的方向，然后再简要解释一下。您正在寻找的魔法词是 OAuth。

关于CORS...从客户端的 Angular 来看，它是一个请求属性，响应服务器可以接受也可以不接受。如果响应服务器确实接受它并决定允许 CORS 请求，则响应服务器必须在其响应中返回 CORS header 。

关于 Login with ____，基本上有两个实体在这里工作。一个是 OAuth 提供者，另一个是 OAuth 用户。因此，假设您有一个使用 Login with Facebook 按钮的网站。现在，您要做的是在您的应用程序中包含 JS SDK。您首先使用您在应用程序的 FB 页面中创建的您的凭据初始化-ing 应用程序。这段JS代码如下:

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'your-app-id',
      xfbml      : true,
      version    : 'v2.1'
    });
  };

  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

解释:

1. js = d.createElement(s); 
2. js.src = "//connect.facebook.net/en_US/sdk.js";

第1行->根据's'的ID创建一个元素；第2行->这个script元素的source属性设置为FB connect JS Library URL；

现在 URL 已经在 FB 域中，因此不涉及 CORS。它可以在您当前的页面上下文中创建一个弹出窗口，也可以与 FB 域对象进行通信。

这不是 FB 所做的，但为了给您一个简单的解释:想象一下，您在服务器中设置了一个简单的 PHP SESSION 变量。此客户端 JS 发送 GET 请求，显然 PHP SESSION COOKIE 将包含在请求中而不会违反任何 JS 安全性，因为它们位于同一 FB 域中。并且 GET 请求也可以通过返回响应轻松验证。

富矿此 JS 也可以在您的 html 页面上下文中打开弹出窗口。就像您可以在 html 上下文中包含来自 Google 的 JQuery 并将其用作本地库一样。

我希望这能回答您的问题。祝你好运!