Как Google/Facebook выполняет Cross-origin Javascript?

Question

Google и Facebook позволяют пользователям «Войти с _____». Обычно разработчик веб-сайта должен включать Javascript и предоставлять обратный вызов для обработки ответа на вход. Из моего понимания безопасности JavaScript в браузерах это не должно быть возможным.

Я прочитал несколько методов передачи JavaScript с перекрестным кодом, например Porthole или easyXDM. В каждом из этих методов разработчик должен размещать небольшой статический HTML-файл, чтобы либо Facebook, либо Google (т. Е. Контент «включено») мог связываться с родительским фреймом. Примером может служить приложение (app.example.com), в которое включен iframe из Google (google.com), который снова включает iframe из приложения (app.example.com). Самый внутренний JavaScript iframe может связываться с самым верхним окном, поскольку они находятся в одном домене (через 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

Простейший способ сделать CORS - это использовать http-запрос вместо запроса ajax. В этом методе передается имя функции обратного вызова, которое будет выполняться после завершения HTTP-вызова. Этот метод называется JSONP. т.е. JSON с дополнением.

Answer 2

Позвольте мне сначала указать вас в правильном направлении, а затем кратко объяснить их. Волшебное слово, которое вы ищете, это 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 -> Создать элемент по идентификатору 'с'; Строка № 2 -> Исходный атрибут этого элемента сценария установлен на URL-адрес библиотеки JS-библиотеки FB;

Теперь URL уже в домене FB, так что не CORS участие. Он может создавать всплывающие окна в контексте текущей страницы, а также может связываться с объектом домена FB.

Это не то, что FB ли, но, чтобы дать вам простое объяснение: Представьте, у вас есть простая переменная PHP SESSION установить на сервере. Этот клиент JS отправляет запрос GET, очевидно, что PHP SESSION COOKIE будет включен в запрос без нарушения какой-либо безопасности JS, поскольку они находятся в одном домене FB. И этот запрос GET может быть легко проверен с возвратным ответом.

Bonanza Этот JS может открывать всплывающие окна в контексте вашей html-страницы. Подобно тому, как вы можете включить JQuery из Google в контекст html и использовать его как локальную библиотеку.

Я надеюсь, что ответит на ваш вопрос. Удачи!