← Назад ко всем вопросам

Что такое JSONP

1️⃣ Как кратко ответить

JSONP (JSON with Padding) — это метод для обхода ограничений политики одного источника (Same-Origin Policy) в веб-браузерах, позволяющий выполнять кросс-доменные HTTP-запросы для получения данных в формате JSON. Он работает путем динамического добавления <script> тега в документ, что позволяет загружать данные с другого домена.

2️⃣ Подробное объяснение темы

JSONP, или JSON with Padding, — это техника, используемая для выполнения кросс-доменных запросов в веб-приложениях. Веб-браузеры по умолчанию ограничивают выполнение запросов к ресурсам, находящимся на других доменах, из-за политики одного источника (Same-Origin Policy). JSONP позволяет обойти это ограничение, используя <script> теги, которые не подчиняются этой политике.

Как работает JSONP

  1. Создание <script> тега: В отличие от стандартных AJAX-запросов, JSONP использует <script> теги для загрузки данных. Браузеры позволяют загружать скрипты с других доменов без ограничений.

  2. Форматирование ответа: Сервер, поддерживающий JSONP, возвращает данные в формате JavaScript, обернутые в вызов функции. Например, если клиент запрашивает данные с использованием JSONP, сервер может ответить следующим образом:

    callbackFunction({"key": "value"});

  3. Динамическое добавление скрипта: Клиентское приложение создает <script> тег и добавляет его в DOM. URL этого тега включает имя функции обратного вызова (callback), которая будет вызвана с данными, полученными от сервера.

  4. Обработка данных: Когда скрипт загружается, функция обратного вызова вызывается с переданными данными, и приложение может их обработать.

Пример использования JSONP

Рассмотрим пример, где клиентское приложение получает данные с другого домена с использованием JSONP.

Клиентская часть

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSONP Example</title>
    <script>
        // Функция обратного вызова, которая будет вызвана с данными от сервера
        function handleResponse(data) {
            console.log("Received data:", data);
            // Обработка полученных данных
        }
​
        // Создание и добавление <script> тега для выполнения JSONP запроса
        function loadJSONP(url) {
            var script = document.createElement('script');
            script.src = url;
            document.body.appendChild(script);
        }
​
        // Выполнение JSONP запроса
        loadJSONP('https://example.com/data?callback=handleResponse');
    </script>
</head>
<body>
    <h1>JSONP Example</h1>
</body>
</html>
  • handleResponse: Функция, которая будет вызвана, когда данные будут получены. Она принимает один аргумент — объект данных.
  • loadJSONP: Функция, создающая <script> тег с указанным URL и добавляющая его в DOM. URL включает параметр callback, указывающий имя функции обратного вызова.
  • script.src: Устанавливает URL для загрузки данных. Сервер должен вернуть данные в формате, который вызывает функцию handleResponse.

Серверная часть

Сервер должен поддерживать JSONP, возвращая данные в формате JavaScript. Пример ответа сервера:

handleResponse({"key": "value"});
  • handleResponse: Имя функции, переданное в запросе как параметр callback. Сервер оборачивает данные в вызов этой функции.

Применение и ограничения

JSONP широко использовался до появления CORS (Cross-Origin Resource Sharing), который предоставляет более безопасный и гибкий способ выполнения кросс-доменных запросов. Однако JSONP имеет ограничения:

  • Безопасность: JSONP может быть уязвим для XSS (Cross-Site Scripting) атак, так как загружаемый скрипт выполняется в контексте страницы.
  • Только GET-запросы: JSONP поддерживает только GET-запросы, что ограничивает его использование для операций, требующих других HTTP-методов (POST, PUT, DELETE).

JSONP остается полезным в ситуациях, где CORS не поддерживается, но его использование должно быть ограничено из-за потенциальных рисков безопасности.

Тема: HTTP, REST
Стадия: Tech

🔒 Подпишись на бусти автора и стань Алигатором, чтобы получить полный доступ к функционалу сайта и отслеживать свой прогресс!

Твои заметки