Кросдоменная передача данных

11/16/2012, автор admin, категории Web-разработка

Некоторое время назад написал статью Межсайтовая авторизация – JSONP
Как вы помните объект JavaScript XmlHttpRequest, который реализует AJAX, не поддерживает кроссдоменные запросы по соображениям безопасности. Но иногда очень нужно через JS запросить какую-нибудь страничку или данные с другого сайта (например для автоматичексой регистрации и авторизации). В той статье мы рассматривали пример кросдоменной передачи данных с помощью тега script (то есть с помощью JSONP). Это довольно хороший способ, но существуют еще несколько способов передачи данных с одного сайта на другой.
Для решения этой задачи необходимо как минимум, чтобы вы как разработчик имели доступ к файлам на обоих серверах (с которого идет запрос и тот, где нужный файл), так как отдаваемые с удаленного сервера файлы должны быть в особом (для каждого отдельного решения) формате.

1) использование скриптов как прокси
Самы простой вариант — использовать собственный сервер как прокси. То есть вы из своего js-приложения обращаетесь к скриптам на этом же сервере и указываете ему адрес и формат возвращаемой информации (JSON, XML, HTML).

2) Flash как посредник
Flash может делать кроссдоменные запросы, при условии, если сам сервер позволяет флешу к нему обращаться. Для этого существует, опять же, своя политика безопасности, но она, в отличии от XmlHttpRequest-ой довольно гибкая — для разрешения запроса к серверу в его корне необходимо создать файл crossdomain.xml , в котором указать, какие сервера имеют право доступа. Простейший пример такого файла:

<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
<allow-access-from domain="*" />
</cross-domain-policy>

Ну а далее Flash-скрипт получает запрос от JS, делает кроссдоменный запрос, получает данные и отдает их обратно в JS-скрипт

3) создание тега link
Это, пожалуй, самый необычный способ. Принцип работы тот же, что и у JSONP, только подключаемые файлы должны быть формата CSS. Вот тут у вас должен быть резонный вопрос: «Мне же данные нужны, нафига мне стили-то?». На этом этапе начинается самое интересное ;-) Смотрим пример возвращаемого файла:

#c0 { background: url(data:,Hello%20World!); }
#c1 { background: url(data:,I’m%20text%20encoded%20in%20CSS!); }
#c2 { background: url(data:,I%20like%20arts%20and%20crafts.); }

Ваши данные содержаться внутри dara:uri. Вроде и CSS правильный, и данные есть.
Такой способ работы использует скрипт CSSHttpRequest или, как его еще называют — AJACSS.

4) использование XhrIframeProxy
Это смесь из XmlHttpRequest и iframe. Способ основан на том, что ифреймы с разных доменов могут общаться друг с другом по средством изменения хэша из их адресов (хеш — это то, что идет после # в адресе). Этот способ отлично описан на сайте JavaScript.ru.

Читать похожие статьи:

1 комментарий » “Кросдоменная передача данных”