Как использовать заполнение JSON (и другие параметры), чтобы обойти политику того же происхождения

1656570013 kak ispolzovat zapolnenie json i drugie parametry chtoby obojti politiku

автор Энтони Нг

1*BMgLq8aOgfzz9Sp95-LjFQ
Фото Ed 259 на Unsplash

В этой статье мы рассмотрим, что такое JSONP, его недостатки и некоторые альтернативы JSONP.

Возможно, вы сталкивались с ситуациями, когда вы совершаете вызов API от одного источника к другому. Например, у нас есть страница, обслуживаемая из localhost:3000, которая вызывает API из localhost:8000.

Примечание: Мы будем называть localhost:3000 нашим клиентским сервером Мы будем называть localhost:8000 нашим сервером API.

Но мы видим это страшное заблуждение.

1*Hr7T_kBgvnZwzSDdGF3E9w
Ошибка при попытке совершить вызов с клиентского сервера на сервер API

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

JSONP (JSON с отступами) обеспечивает обходное решение для этой проблемы политики самого происхождения. Давайте посмотрим, как появился JSONP.

Техническое погружение

Мы можем запускать код JavaScript в нашем HTML-файле с помощью <script> теги.

Мы можем переместить наш код JavaScript в отдельный файл JavaScript и ссылаться на него с помощью нашего тега script. Наша веб-страница теперь осуществляет внешний сетевой вызов для JavaScript. Но функционально все работает одинаково.

Javascript не обязательно должен иметь файл js расширение. Браузер будет интерпретировать содержимое как JavaScript, если Content-Type ответа является JavaScript. (text/javascript, application/javascript).
Большинство серверов позволяют установить тип содержимого. В Express вы бы сделали:

1*llfbidT6kG5hfSNdfc2nlw
Настройка заголовка Content-Type для ответа

Ваш <script> может ссылаться на URL-адрес, который не соответствует havea js расширение.

Теги сценария не ограничиваются Политикой того же происхождения. Есть и другие теги, например <img>; and &теги lt;video>, которые не ограничиваются Политикой того же происхождения. Итак, наш JavaScript может жить по другому происхождению.

Код в файле JavaScript имеет доступ ко всему, что находится в области действия. Вы можете использовать функции, определенные ранее в HTML-файле.

Вы можете передавать доводы, как и для обычного вызова функции.

В приведенном выше примере мы передали жестко закодированную строчку. Но мы можем также передавать данные, поступающие из базы данных. Наш сервер API может создать JavaScript с этой динамической информацией.

Вот что такое JSONP. Вместо использования fetch или XMLHttpRequest чтобы совершить вызов API для получения данных, мы использовали a <script> тег. Потому что мы вsed a &lt;script>, мы смогли обойти политику самого происхождения.

Как я упоминал выше, JSONP означает JSON с отступлениями. Что означает прокладка? Обычные ответы API возвращают JSON. В ответах JSONP мы возвращаем ответ JSON в окружении (или дополненной) функцией JavaScript.

1*zbemC10taSnmtxa1n2Tw0w
Исполнитель JSON с заполнением

Большинство серверов позволяют указать имя функции заполнения.

Сервер принимает имя функции заполнения как запрос. Он вызывает вашу функцию заполнения с данными JSON в качестве аргумента.

Вы не ограничены передачей имен функций в качестве обратного вызова. Вы можете передать встроенный JavaScript в своем запросе.

Я не придумал причины для этого.

Альтернативы использования JSONP

Официальных спецификаций для JSONP нет. Я считаю JSONP больше, чем хак.

<scriТеги pt> могут выполнять только запросы GET. Таким образом, JSONP может производить только запросы GET.

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

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

1*CdIror6QvF0F1e82W1WbPA

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

Иногда вы не можете контролировать код сервера. Вы бы не смогли включить Access-Control-Allow-Origin заголовок. Альтернативное решение – сделать так, чтобы ваш собственный прокси-сервер выполнял запросы между источниками для вас. Same-Origin применяется только к браузеру. Серверы могут свободно задавать запросы между источниками.

Вопрос? Комментарии? Оставьте сообщение ниже.

Ресурсы

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *