Google / Facebook如何执行跨源Javascript？

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

我已经阅读了几种跨域JavaScript通信的方法,例如Porthole或easyXDM.在每种方法中,开发人员都必须托管一个小的静态HTML文件,以便Facebook或Google(即“内容)可以与父框架进行通讯.例如,一个应用程序(app.example.com)包含来自Google(google.com)的iframe,该应用程序又包含该应用程序(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.

解决方法:

首先让我指出正确的方向,然后简要说明.
您正在寻找的魔术字是OAuth.

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

关于使用____登录,实际上是两个实体在这里工作.一个是OAuth提供者,另一个是OAuth用户.因此,假设您有一个使用“使用Facebook登录”按钮的网站.现在,您要做的就是在应用程序中包含JS SDK.首先,使用在应用程序的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行->通过ID“ s”创建一个元素；
第2行->该脚本元素的source属性设置为FB connect JS Library URL；

现在该URL已经在FB域中,因此不涉及CORS.它可以在当前页面上下文中创建一个弹出窗口,并且可以与FB域对象进行通信.

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

Bonanza
该JS也可以在您的html页面上下文中打开弹出窗口.就像您可以在HTML上下文中包含Google的JQuery一样,将其用作本地库.

我希望能回答您的问题.
祝好运！

标签：security,facebook,cross-domain,iframe,javascript
来源： https://codeday.me/bug/20191028/1956275.html