Кроссдоменный AJAX

На вопрос, как сделать AJAX запрос к другому домену, я всегда отвечал, что никак, и предлагал в качестве альтернативы jsonp, прокси, флеш, фреймы. Но, оказывается, большинство современных браузеров (IE8+, FF3.5+, Chrome 6+ и Safari 4+) вполне поддерживает кроссдоменный XMLHTTPRequest.

С клиентской стороны все остается без изменений. Только теперь браузер не блокирует запрос при отправке, а добавляет к нему заголовок с именем домена, откуда делается запрос: Origin: example.com

Ответ от сервера он так просто назад не пропускает, сервер должен добавить специальный заголовок: Access-Control-Allow-Origin: *
Вместо звездочки сервер может указать конкретный домен, которому разрешено получить ответ.

Вот такое элегантное решение. Без лишних HTTP запросов, без изменения клиентского API, без нарушения безопасности существующих приложений (ведь подгрузить картинку с другого домена или отправить форму в ифрейм можно было и раньше), и наконец, в отличие от Флеша, с гибкой настройкой прав доступа к индивидуальным страницам.

Спецификация CORS (англ.)
Поддержка в браузерах (англ.)
Соображения безопасности (англ.)
easyXDM — альтернативное решение, работает без Флеша во всех браузерах

В чем проблематичность кроссдоменных запросов? Все браузеры ограничивают нашу свободу в угоду безопасности. Посему, запросы из «недоверенных» источников пресекаются на корню. А что делать, если мы источникам доверяем? Правильно, использовать «костыли» (многие из которых являются общепринятой практикой).

В рамках юзерскриптов следует учитывать ограничения, накладываемые окружением, в котором запускаются скрипты (подробности в этой статье) плюс дополнительное важное условие: наличие доступа к серверной части (наличие (или возможность создать) серверного API для реализации конкретного метода запроса)!

Ниже приведена таблица, в которой представлены некоторые «костыли» и их применимость для юзерскриптов.

Название метода + ссылка Краткое описание Требует доступ к серверу Можно использовать в юзерскриптах
JSONPСтатья на Хабре Только GET-запросы.
Информация запрашивается посредством вставки в тело документа тега <script>. Ответ сервера попадает в тело скрипта и исполняется браузером.
При этом, в скрипте должна быть определена функция-«обёртка», которая передаётся с сервера и содержится в ответе.
Требуется доступ или JSONP API IE7+
Opera
Firefox
XHR + CORSСтатья на Хабре
Статья на Mozilla Hacks
Запрос осуществляется посредством XMLHttpRequest (XHR) с указанием специальных заголовков запроса. Требуется доступ или XHR CORS API IE8+
Firefox
Chrome (extension)
iframe транспорт Запрос осуществляется через размещение в документе невидимого айфрейма, который возвращает ответ в родительское окно. Довольно запутанный способ. Требуется доступ. Удобнее всего использовать библиотеку easyXDM (нужна небольшая модификация для Chrome и Firefox). IE7+
Firefox
Opera
Chrome (extension)
Родные возможности юзерскриптов Специфичны для каждого браузера. В IE отсутствуют как класс.
Firefox + GreaseMonkey предоставляют GM_xmlHttpRequest (аналог XMLHttpRequest), GET+POST запросы.
Chrome предоставляет полноценный кроссдоменный XMLHttpRequest, но только для расширений, GET+POST запросы.
У Opera есть событие beforeScript, при помощи которого можно осуществить GET-запрос через <script> (не JSONP, следовательно, доступ к серверу не нужен).
Не требуется доступ к серверу. Firefox
Opera
Chrome (extension)

 

Реклама

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

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход / Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход / Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход / Изменить )

Google+ photo

Для комментария используется ваша учётная запись Google+. Выход / Изменить )

Connecting to %s