JavaScript
Та же политика происхождения и перекрестная связь

Вступление

Способы обхода политики одинакового происхождения

Что касается клиентских JavaScript-движков (те, которые работают внутри браузера), нет простого решения для запроса контента из других источников, кроме текущего домена. (Кстати, это ограничение не существует в JavaScript-серверных инструментах, таких как Node JS.)

Тем не менее, в некоторых ситуациях действительно возможно получить данные из других источников, используя следующие методы. Пожалуйста, обратите внимание, что некоторые из них могут представить хаки или обходные пути вместо системы, на которую должна опираться система решений.

Способ 1: CORS

Большинство публичных API сегодня позволяют разработчикам отправлять данные двунаправленно между клиентом и сервером, включив функцию CORS (совместное использование ресурсов Cross-Origin). Браузер проверяет, установлен ли определенный HTTP-заголовок ( Access-Control-Allow-Origin ) и что домен запрашивающего сайта указан в значении заголовка. Если это так, то браузер позволит установить соединения AJAX.

Однако, поскольку разработчики не могут изменять заголовки ответов других серверов, на этот метод не всегда можно положиться.

Метод 2: JSONP

JSON с добавлением P обычно обвиняют в обходном пути. Это не самый простой метод, но он все еще выполняет свою работу. Этот метод использует тот факт, что файлы сценариев могут быть загружены из любого домена. Тем не менее, очень важно отметить, что запрос кода JavaScript из внешних источников всегда является потенциальным риском для безопасности, и этого, как правило, следует избегать, если есть лучшее решение.

Данные, запрашиваемые с использованием JSONP, как правило, JSON , что соответствует синтаксису, используемому для определения объекта в JavaScript, что делает этот метод транспорта очень простым. Обычный способ позволить веб-сайтам использовать внешние данные, полученные через JSONP, - это обернуть его внутри функции обратного вызова, которая задается с помощью параметра GET в URL-адресе. После загрузки внешнего файла сценария функция будет вызываться с данными в качестве первого параметра.

<script>
function myfunc(obj){
    console.log(obj.example_field);
}
</script>
<script src="http://example.com/api/endpoint.js?callback=myfunc"></script>

Содержимое http://example.com/api/endpoint.js?callback=myfunc может выглядеть так:

myfunc({"example_field":true})

Функция всегда должна быть определена первой, иначе она не будет определяться при загрузке внешнего скрипта.

Безопасная перекрестная связь с сообщениями

Метод window.postMessage() вместе со своим относительным обработчиком событий window.onmessage можно безопасно использовать для включения window.postMessage() связи.

Метод postMessage() целевого window можно вызвать для отправки сообщения в другое window , которое сможет перехватить его с onmessage обработчика события onmessage , обработать его и, при необходимости, отправить ответ обратно в окно отправителя, используя postMessage() снова.

Пример окна, связанного с рамкой для детей

• Содержание http://main-site.com/index.html :

   <!-- ... -->
   <iframe id="frame-id" src="http://other-site.com/index.html"></iframe>
   <script src="main_site_script.js"></script>
   <!-- ... -->
  

• Содержание http://other-site.com/index.html :

   <!-- ... -->
   <script src="other_site_script.js"></src>
   <!-- ... -->
  

• Содержание main_site_script.js :

   // Get the <iframe>'s window
   var frameWindow = document.getElementById('frame-id').contentWindow;
  
   // Add a listener for a response
   window.addEventListener('message', function(evt) {
       
       // IMPORTANT: Check the origin of the data! 
       if (event.origin.indexOf('http://other-site.com') == 0) {
           
           // Check the response
           console.log(evt.data);
           /* ... */
       }
   });        
  
   // Send a message to the frame's window
   frameWindow.postMessage(/* any obj or var */, '*');
  

• Содержимое other_site_script.js :

   window.addEventListener('message', function(evt) { 
  
       // IMPORTANT: Check the origin of the data! 
       if (event.origin.indexOf('http://main-site.com') == 0) {
           
           // Read and elaborate the received data
           console.log(evt.data);
           /* ... */
  
           // Send a response back to the main window
           window.parent.postMessage(/* any obj or var */, '*');
       }
   });