Google / Facebook如何执行跨源Javascript

Question

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

我已经阅读了几种跨源JavaScript通信的方法，例如Porthole或easyXDM。在每种方法中，开发人员都需要托管一个小的静态HTML文件，以便Facebook或Google（即"包含"内容）可以与父框架进行通信。例如，一个应用程序 （app.example.com） 包含来自 Google 的 iframe（google.com），该应用程序再次包含来自该应用程序的 iframe（app.example.com）。最里面的 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栏，然后将该数据传递到父窗口。然而，使用谷歌和Facebook的解决方案，不需要静态的HTML页面。那么，如果不是静态接收方页面，他们使用什么机制来传递数据备份？其框架中的 JavaScript 应该无法访问父 JavaScript。Window.PostMessage充其量似乎是可疑的，因为它的IE8，IE9和IE10实现要么是破碎的，要么是古怪的。

Answer 1

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

关于科思...从客户端的角度来看，它是一个请求属性，响应服务器可以或不能接受它。如果响应服务器接受它并决定允许 CORS 请求，则响应服务器必须在其响应中返回 CORS 标头。

关于Login with ____，发生的事情是，基本上有两个实体在这里工作。一个是 OAuth 提供程序，另一个是 OAuth 用户。因此，假设您有一个使用Login with Facebook按钮的网站。现在，您要做的是将 JS SDK 包含在您的应用程序中。首先，使用您在应用程序的FB页面中创建的凭据init应用程序。此 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 行 -> 通过 ID 为 's' 创建一个元素;第 2 行 -> 此脚本元素的源属性设置为 FB 连接 JS 库 URL;

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

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

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

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

Answer 2

执行 CORS 的最简单方法是使用 http 请求而不是 ajax 请求。在此方法中，传递一个回调函数名称，该名称将在 http 调用完成后执行。此方法称为 JSONP。即带有填充的 JSON。