Google / Facebook如何执行跨源Javascript？

2019-10-29 00:35:33 阅读：213 来源： 互联网

标签：security facebook cross-domain iframe 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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Google / Facebook如何执行跨源Javascript？