Что такое JSONP?

Что такое JSONP?

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

Основная проблема и принцип обхода

Браузерная безопасность запрещает выполнение XMLHttpRequest (или fetch) к доменам, отличным от текущего (исключая случаи, когда сервер явно разрешает это через CORS-заголовки). Однако тег <script> не подвержен этому ограничению — браузер может загружать и выполнять JavaScript-код с любого внешнего источника.

JSONP использует эту лазейку:

• Клиент создает динамический тег <script>, src которого указывает на URL API другого домена с добавлением специального параметра (обычно callback).
• Сервер, вместо возвращения "чистого" JSON, оборачивает данные в вызов функции, имя которой передано в параметре callback.
• Браузер загружает скрипт и выполняет его, тем самым вызывая указанную функцию на стороне клиента и передавая ей данные.

Пример реализации

Клиентская часть (JavaScript):

// 1. Определяем функцию-обработчик, которая будет вызвана сервером
function handleUserData(data) {
    console.log('Получены данные:', data);
    document.getElementById('result').innerHTML = `Пользователь: ${data.name}, Email: ${data.email}`;
}

// 2. Динамически создаем и добавляем тег <script>
const script = document.createElement('script');
const callbackName = 'handleUserData';
const userId = 123;
// URL включает параметр callback с именем нашей функции
script.src = `https://api.external-domain.com/user/${userId}?callback=${callbackName}`;
document.head.appendChild(script);

Серверная часть (ответ):

Сервер, получив запрос на https://api.external-domain.com/user/123?callback=handleUserData, формирует ответ:

// Не JSON, а JavaScript, вызывающий функцию!
handleUserData({
    "id": 123,
    "name": "Иван Иванов",
    "email": "ivan@example.com"
});

Когда этот код загрузится браузером, он автоматически вызовет функцию handleUserData, определенную ранее на нашей странице, и передаст ей объект с данными.

Ключевые характеристики и ограничения JSONP

• Только GET-запросы: Поскольку используется тег <script>, передать данные можно только через URL (метод GET). Отправка POST, PUT или больших объемов данных невозможна.
• Безопасность: Основной недостаток — потенциальная уязвимость. Вы доверяете выполнение произвольного кода с внешнего сервера. Если сервер скомпрометирован и вернет вредоносный скрипт, он получит полный контроль в контексте вашей страницы. Всегда используйте JSONP только с доверенными источниками.
• Обработка ошибок: С тегом <script> сложно обрабатывать ошибки сетевого уровня (404, 500) стандартными способами. Часто используются таймауты.
• Устаревание: С появлением и массовой поддержкой CORS (примерно с 2014 года) необходимость в JSONP практически отпала. CORS предоставляет более безопасный, гибкий и стандартизированный способ выполнения кросс-доменных запросов, поддерживая все HTTP-методы и заголовки.

Краткое сравнение с CORS

Вывод

JSONP — это важный исторический хак, который на годы стал стандартным решением проблемы кросс-доменных запросов в эпоху, когда CORS еще не поддерживался браузерами. Однако сегодня его использование крайне не рекомендуется для новых проектов. Все современные браузеры и серверные API поддерживают CORS, который является безопасной, мощной и стандартизированной альтернативой. JSONP следует рассматривать только в контексте поддержки очень старых систем, где внедрение CORS невозможно.