Question

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

我已经阅读了几种跨源JavaScript通信方法，例如Porthole或easyXDM。在这些方法中的每一种中，开发者都需要托管一个小的静态HTML文件，以便Facebook或Google（即包含的内容）可以与父帧进行通信。一个示例是包含来自Google（google.com）的iframe的应用程序（app.example.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包含一个＆＃39;接收器＆＃39; 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 ...它是客户视点的请求属性，响应服务器可以或不能接受它。如果响应服务器确实接受它并决定允许CORS请求，则响应服务器必须在其响应中返回CORS标头。

关于Login with ____，会发生什么，基本上两个实体在这里工作。一个是OAuth提供商，另一个是OAuth用户。因此，假设您有一个使用Login with Facebook按钮的网站。现在，您所做的是在您的应用程序中包含JS SDK。您从init开始使用您的凭据启动应用程序，这是您在应用程序的FB页面中创建的。这个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号线 - ＆gt;按ID＆＃39;创建元素; 第2行 - ＆gt;此脚本元素的source属性设置为FB connect JS Library URL;

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

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

<强>富矿这个JS也可以在你的html页面上下文中打开弹出窗口。就像你可以在你的html上下文中包含来自Google的JQuery一样，并像使用本地库一样使用它。

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

Answer 2

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

Google / Facebook如何执行跨域Javascript？

2 个答案: