Javascript.RU

Обмен данными между доменами. Часть 2.

Update: Более новый материал по этой теме находится по адресу https://learn.javascript.ru/xhr-crossdomain.

Эта статья является продолжением статьи Обмен данными для документов с разных доменов и рассматривает новые способы обмена данными между доменами, которые, однако, уже поддерживаются основными современными браузерами.

В стандарте HTML5 предусмотрена отсылка javascript-сообщения из одного окна в другое при помощи специального вызова window.postMessage.

При этом окна могут быть с любых доменов, не важно. Например, один iframe с yandex.ru , а другой - с vaysapupkin.info. Чтобы получать кросс-доменные сообщения, принимающее окно регистрирует специальный обработчик onmessage, в котором, кроме всего прочего, может проверить, с какого домена пришло сообщение.

В примере ниже используется iframe с домена javascript.ru, исходник которого приведен ниже, и iframe с домена ilyakantor.ru.

Как вы можете видеть, сообщение прекрасно пересылается. Пример работает в браузерах Firefox 3.5, Opera 10, Safari 4.0/Chrome 3.0+, Internet Explorer 8.0.

Исходник окна, отправляющего сообщение:

<html>
<body>
<iframe src="http://ilyakantor.ru/receive.html" id="iframe"></iframe>
<form id="form">
  <input type="text" id="msg" value="Ваше сообщение"/>
  <input type="submit"/>
</form>
<script>
var win = document.getElementById("iframe").contentWindow;

document.getElementById("form").onsubmit = function(){
	win.postMessage(
		document.getElementById("msg").value,
		"http://ilyakantor.ru" // target domain
	);
	return false
}
</script>
</body>
</html>

Как видите, для передачи сообщения достаточно вызвать метод postMessage(message, targetOrigin) принимающего окна.

message
Сообщение - javascript-объект
targetOrigin
Целевой домен, с которого должно быть окно, получающее сообщение. Если вы не хотите ограничить целевой домен - поставьте вместо него звездочку "*".

Исходный код принимающего окна (в ифрейме):

<html>
<body>
<b>iframe с домена http://ilyakantor.ru</b>
<div id="test">Пришли мне сообщение!</div>
<script>
function listener(event){
	if ( event.origin !== "http://javascript.ru" )
		return;

	document.getElementById("test").innerHTML = event.origin + " прислал: " + event.data;
}

if (window.addEventListener){
	window.addEventListener("message", listener,false);
} else {
	window.attachEvent("onmessage", listener);
}


</script>

</body>
</html>

Обработчик события onmessage проверяет исходный домен, который находится в свойстве event.origin, и, если все нормально, выводит на экран сообщение event.data.

Все прозрачно и удобно.

Реализация postMessage браузерами использует внутренний механизм передачи сообщений, поэтому можно передавать любые объекты, а сам факт передачи никак не отслеживается снифферами пакетов.

Интерфейс поддерживается основными современными браузерами.

Уже давно в W3C вызревает второй стандарт XMLHTTPRequest 2. А пока суть да дело - Firefox 3.5, Safari 4/Chrome 3 и IE8 уже реализовали ряд фич.

Например, кросс-доменные запросы.

Следующий пример отправляет запрос с текущего домена (javascript.ru) на домен ilyakantor.ru.

Он не работает в старых браузерах и... в Opera.

Кросс-доменный запрос отсылается точно так же, как и обычный XMLHttpRequest, но браузер посылает на сервер дополнительный заголовок Origin.

Сервер в ответе указывает заголовком Access-Control-Allow-Origin, для каких доменов доступны данные. Ответ сервера:

Если вдруг домен, на который приходит ответ, не совпадает с Access-Control-Allow-Origin (можно указать звездочку "*" для любого домена), то браузер блокирует операцию из соображений безопасности.

В то время как Firefox/Safari расширили обычный объект XMLHTTPRequest, специалисты Microsoft завели для кросс-доменных запросов новый объект XDomainRequest.

Оба объекта имеют весьма схожие интерфейсы, но решение Firefox/Safari более полно реализует XMLHTTPRequest 2. В частности, поддерживаются другие методы, кроме GET/POST, работа с Cookie/HTTP Auth и расширены средства контроля доступа.

Исходный код отсылающего запрос ифрейма:

<html>
<head>

<script type="text/javascript">
    var url = 'http://ilyakantor.ru/xdr/receive.php';

    function doCallOtherDomain(){
        var XHR = window.XDomainRequest || window.XMLHttpRequest
        var xhr = new XHR();

        xhr.open('GET', url, true);

        // замена onreadystatechange
        xhr.onload = function() {
            document.getElementById('response').innerHTML = xhr.responseText
        }

        xhr.onerror = function() {
            alert("Error")
        }

        xhr.send()
    }

    function callOtherDomain() {
        try {
            doCallOtherDomain()
        } catch (e) {
            alert("В этом браузере данная фича не поддерживается.")
        }
    }

    </script>
</head>
<body>

<div id="response"></div>
    <input type="button" value="Нажмите для запроса к другому домену" onclick="callOtherDomain()" />

</body>
</html>

Принимающий код:

<?php
// можно ограничить домен, для которого доступен ответ
// header('Access-Control-Allow-Origin: http://javascript.ru');

header('Access-Control-Allow-Origin: *');
?>
http://ilyakantor.ru Ха-ха! Все получилось!

Как видно из примера, в обоих реализациях можно отказаться от onreadystatechange и использовать события onload/onerror/onabort.

Кроме того, начиная с Firefox 3.5/Safari 4/IE8 поддерживается событие onprogress, предназначенное для реализации progress bar.

Конечно, можно написать кросс-браузерную обертку, которая будет прозрачно отправлять запросы, используя эти новые методы в дополнение к уже существующим.

Мы разобрали основы новых способов кросс-доменной коммуникации. При практической реализации вам могут понадобиться детали.

Могу порекомендовать следующие статьи.


Автор: Гость (не зарегистрирован), дата: 12 ноября, 2009 - 13:45
#permalink

то есть получается, что с помощью этой фичи можно xss атаки проводить еще проще... например, передать куки с одного домена ну другой ?


Автор: subzey, дата: 20 ноября, 2009 - 11:40
#permalink

Если скрипт будет отдавать что попало кому попало, то да.


Автор: viglim (не зарегистрирован), дата: 5 февраля, 2010 - 14:01
#permalink

Именно этим разработчики оперы мотивируют категорическое нежелание делать возможность обычных кросс-браузерных запросов.


Автор: Гость (не зарегистрирован), дата: 22 июня, 2012 - 16:16
#permalink

Кросс-доменные запросы


Автор: Гость (не зарегистрирован), дата: 17 ноября, 2014 - 12:21
#permalink

Ты хотел сказать кроссайтовые т.е. крос доменные a.com b.com


Автор: Гость (не зарегистрирован), дата: 9 апреля, 2010 - 23:03
#permalink

Гость что отпостил выше и viglim:

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

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


Автор: Зайва Игорь Леонидович (не зарегистрирован), дата: 21 июля, 2010 - 09:17
#permalink

Прикольно полдня просидел в поисках решения передачи запроса с одного своего сайта на другой и вуаля... Автору спасибо. От себя замечу: простой скриптик всего в несколько строчек работает на Мозиле (3.6) у меня без всяких выкрутасов (в других браузерах пока не проверял), всё, что здесь написано - не заработало у меня, хотя примеры на этой странице работают, как и написано. Эх, лень копаться в глюках.

Для передачи параметров на другой сайт всего лишь прописал строку, указанную в статье и всё:

header('Access-Control-Allow-Origin: *');


Автор: matfor2013, дата: 7 декабря, 2013 - 22:49
#permalink

Для передачи параметров на другой сайт всего лишь прописал строку, указанную в статье и всё:

header('Access-Control-Allow-Origin: *');

А куда прописал? У меня похожая ситуация, получаю от сервера Origin "null" и пустой ответ. Подскажите.


Автор: Snipe, дата: 13 ноября, 2010 - 17:55
#permalink

ИЕ 7 и ИЕ 6 еще долго будут портить кровь программистам, не давая возможности использовать эти фишки, а это чуть больше 10% по статистики li


Автор: Armen, дата: 28 февраля, 2011 - 15:35
#permalink

То есть таким способом, можно читать xml файлы с других доменов ?


Автор: Boo (не зарегистрирован), дата: 2 мая, 2011 - 23:11
#permalink

XMLHTTPRequest 2 если не ошибаюсь, если делает запрос на другой домен, перед этим сначало запрашивает ту же страницу с методом OPTION. а уже потом идет запрос либо GET либо POST либо что то еще.


Автор: Гость (не зарегистрирован), дата: 6 марта, 2012 - 15:57
#permalink

Здесь, при нажатии Отправить, сообщение посылается во фрейм. Если добавить второй фрейм с каким-либо сайтом, как послать в первый фрейм вместо сообщения адрес из второго фрейма?


Автор: Tester1199357 (не зарегистрирован), дата: 28 марта, 2012 - 15:41
#permalink

С локального файла не работает - надо обязательно загрузить на реальный сервер
То есть убогий костыль!

Интересно что через яховский прокси работает отвосюду в том числе и с локального файла.


Автор: Sanya_Zol, дата: 23 июня, 2012 - 00:55
#permalink

XMLHTTPRequest 2 / XDomainRequest
В недавно вышедшей опере 12.00 сделали


Автор: Гость (не зарегистрирован), дата: 5 июля, 2012 - 00:52
#permalink

подскажите пожалуйста очень нужно. А как правильно формировать обращение к окну, если нам надо наоборот отправить обращение из ифрейма к перент окну? или как правильно обратиться к не вложенному, а соседнему ифрейму? (вопрос по способу postMessage)


Автор: Vovumba, дата: 20 июля, 2012 - 13:03
#permalink

Для отправления сообщения родительскому окну используйте конструкцию вида top.postMessage. А вот к соседнему фрейму, насколько я представляю себе модель безопасности при кросдоменных запросах, можно только через родительское окно.

Но лучше не изобретать велосипеды, а использовать библиотеку типа easyXDM (так же есть плагин для jQuery для работы с postMessage). Там все это реализовано довольно удобно, в том числе механизм удаленного вызова процедур, который является надстройкой над вот таким транспортом (или другим, если браузер не поддерживает его).


Автор: Гость (не зарегистрирован), дата: 10 октября, 2013 - 17:25
#permalink

Ребят... Curl вам в помощь... Отправляете запрос на php на своем домене, Curl отправляет запрос на другой и возвращает ответ Вам... Если бы опера еще работала с этим, то было бы норм. А так через фреймы или отправлять Ajaxом. Ну нафиг. На php это 5 строчек и полная кроссбраузерность))


Автор: SkyLight, дата: 11 октября, 2013 - 12:35
#permalink

Это далеко не всегда и не всем подходит. Иногда нужно использовать именно клиентский вариант.


Автор: Гость: Ермолаев Андрей (не зарегистрирован), дата: 12 августа, 2016 - 04:25
#permalink

Curl, wget и любые другие серверные качалки для разовых задач, при этом нагрузка на сервер, что облегчается и ускоряется Ajax-ом.


Автор: Гость (не зарегистрирован), дата: 28 января, 2014 - 16:53
#permalink

Помогите, пожалуйста, разобраться с такой вот проблемой.
Делается кроссдоменный POST-запрос по отправке файла, в ответе идет строка с идентификатором добавленного объекта (Content-type: text/plain).
Все браузеры адекватно эту строку вынимают при помощи xhr.responseText, а вот у IE10 в xhr.responseText всегда пусто.
Что там может быть такое?


Автор: Гость (не зарегистрирован), дата: 19 мая, 2014 - 10:07
#permalink

IE11, FR29.0.1
В этом браузере данная фича не поддерживается.

CR34.0
Всё ok


Автор: nimo (не зарегистрирован), дата: 3 февраля, 2020 - 10:40
#permalink

A very nice blog, I like the way you share very honestly and interestingly, through my blog I learned a lot of things. enable flash in chrome


Автор: alternatives to cable tv (не зарегистрирован), дата: 22 марта, 2020 - 09:42
#permalink

If you set out to make me think today; mission accomplished! I really like your writing style and how you express your ideas. Thank you. alternatives to cable tv


Автор: lago de Atitlan (не зарегистрирован), дата: 2 мая, 2020 - 18:42
#permalink

I wanted to thank you for this great read!! I definitely enjoying every little bit of it I have you bookmarked to check out new stuff you post.


Автор: kaelanna (не зарегистрирован), дата: 18 мая, 2020 - 09:19
#permalink

It was a great suggestion for me, thank you for sharing run 3


Автор: johnas (не зарегистрирован), дата: 10 августа, 2020 - 13:52
#permalink

hi was just seeing if you minded a comment. I like your website and the them you picked are super. I will be back.


Автор: john bond (не зарегистрирован), дата: 10 августа, 2020 - 14:50
#permalink

This article was written by a real thinking writer. I agree many of the with the solid points made by the writer. I’ll be back.
go here


Автор: Michael Almeida (не зарегистрирован), дата: 25 октября, 2020 - 11:30
#permalink

Эта информация, которую вы даете, очень ценна для меня, я не всегда могу найти эти кодировки, спасибо. basketball legends 2020


Автор: osama shk (не зарегистрирован), дата: 27 декабря, 2020 - 15:25
#permalink

I have read a few of the articles on your website now, and I really like your style of blogging. I added it to my favorites blog site list and will be checking back soon. Please check out my site as well and let me know what you think.
click this site


Автор: Гость (не зарегистрирован), дата: 30 декабря, 2020 - 08:53
#permalink

Very good points you wrote here..Great stuff...I think you've made some truly interesting points.Keep up the good work.
Click here


Автор: lopika (не зарегистрирован), дата: 4 января, 2021 - 06:36
#permalink

I do not know what to say really what you share very well and useful to the community, I feel that it makes our community much more developed, thanks basketball legends


Автор: osama shk (не зарегистрирован), дата: 6 января, 2021 - 15:16
#permalink

I can see that you are an expert at your field! I am launching a website soon, and your information will be very useful for me.. Thanks for all your help and wishing you all the success in your business.
binary options


Автор: osama shk (не зарегистрирован), дата: 7 января, 2021 - 15:48
#permalink

I can see that you are an expert at your field! I am launching a website soon, and your information will be very useful for me.. Thanks for all your help and wishing you all the success in your business.
covid cozumel


Автор: osama shk (не зарегистрирован), дата: 10 января, 2021 - 15:02
#permalink

I can see that you are an expert at your field! I am launching a website soon, and your information will be very useful for me.. Thanks for all your help and wishing you all the success in your business.
pousada no rio araguaia


Автор: osama shk (не зарегистрирован), дата: 13 января, 2021 - 11:21
#permalink

I can see that you are an expert at your field! I am launching a website soon, and your information will be very useful for me.. Thanks for all your help and wishing you all the success in your business.
online marketing


Автор: osama shk (не зарегистрирован), дата: 13 января, 2021 - 15:27
#permalink

Thanks for taking the time to discuss this, I feel strongly about it and love learning more on this topic.
bridgend house clearance


Автор: osama shk (не зарегистрирован), дата: 14 января, 2021 - 15:12
#permalink

I can see that you are an expert at your field! I am launching a website soon, and your information will be very useful for me.. Thanks for all your help and wishing you all the success in your business.
taco bar


Автор: osama shk (не зарегистрирован), дата: 16 января, 2021 - 16:58
#permalink

I can see that you are an expert at your field! I am launching a website soon, and your information will be very useful for me.. Thanks for all your help and wishing you all the success in your business.
okos ügyvéd Debrecen


Автор: osama shk (не зарегистрирован), дата: 16 января, 2021 - 17:58
#permalink

Great write-up, I am a big believer in commenting on blogs to inform the blog writers know that they’ve added something worthwhile to the world wide web!..
nemzetközi szállítmányozás nagyobb biztonság


Автор: osama shk (не зарегистрирован), дата: 17 января, 2021 - 11:34
#permalink

Great write-up, I am a big believer in commenting on blogs to inform the blog writers know that they’ve added something worthwhile to the world wide web!..
Buy Website Traffic


Автор: osama shk (не зарегистрирован), дата: 18 января, 2021 - 19:25
#permalink

Interesting post. I Have Been wondering about this issue, so thanks for posting. Pretty cool post.It 's really very nice and Useful post.Thanks
Curcumin vs Turmeric


Автор: osama shk (не зарегистрирован), дата: 19 января, 2021 - 12:46
#permalink

I can see that you are an expert at your field! I am launching a website soon, and your information will be very useful for me.. Thanks for all your help and wishing you all the success in your business.
p405


Автор: osama shk (не зарегистрирован), дата: 24 января, 2021 - 16:27
#permalink

Really a great addition. I have read this marvelous post. Thanks for sharing information about it. I really like that. Thanks so lot for your convene.
Gmail PVA Accounts


Автор: osama shk (не зарегистрирован), дата: 30 января, 2021 - 17:43
#permalink

Thanks for taking the time to discuss this, I feel strongly that love and read more on this topic. If possible, such as gain knowledge, would you mind updating your blog with additional information? It is very useful for me.
https://joo-petri.com/


Автор: osama shk (не зарегистрирован), дата: 1 февраля, 2021 - 13:04
#permalink

Your content is nothing short of brilliant in many ways. I think this is engaging and eye-opening material. Thank you so much for caring about your content and your readers.
tulum cenotes


Автор: osama shk (не зарегистрирован), дата: 3 февраля, 2021 - 11:07
#permalink

Great write-up, I am a big believer in commenting on blogs to inform the blog writers know that they’ve added something worthwhile to the world wide web!..
schluesseldienst köln


Автор: osama shk (не зарегистрирован), дата: 4 февраля, 2021 - 16:32
#permalink

Great write-up, I am a big believer in commenting on blogs to inform the blog writers know that they’ve added something worthwhile to the world wide web!..
آموزش سیستم هوشمند


Автор: osama shk (не зарегистрирован), дата: 9 февраля, 2021 - 13:54
#permalink

Superbly written article, if only all bloggers offered the same content as you, the internet would be a far better place..
water features coventry


Автор: osama shk (не зарегистрирован), дата: 13 февраля, 2021 - 14:36
#permalink

Great write-up, I am a big believer in commenting on blogs to inform the blog writers know that they’ve added something worthwhile to the world wide web!..
serralheria df


Автор: osama shk (не зарегистрирован), дата: 13 февраля, 2021 - 15:19
#permalink

Thanks for taking the time to discuss this, I feel strongly about it and love learning more on this topic. If possible, as you gain expertise, would you mind updating your blog with more information? It is extremely helpful for me.
reforma de sofa brasilia


Автор: osama shk (не зарегистрирован), дата: 13 февраля, 2021 - 16:45
#permalink

I can see that you are an expert at your field! I am launching a website soon, and your information will be very useful for me.. Thanks for all your help and wishing you all the success in your business.
cancun


Автор: osama shk (не зарегистрирован), дата: 17 февраля, 2021 - 19:36
#permalink

I really loved reading your blog. It was very well authored and easy to understand. Unlike other blogs I have read which are really not that good.Thanks alot!
építési pályázatírás Debrecen


Автор: Гостьsad (не зарегистрирован), дата: 21 февраля, 2021 - 18:32
#permalink

this is really nice to read..informative post is very good to read..thanks a lot!
youtube shares


Автор: Гостьsd (не зарегистрирован), дата: 22 февраля, 2021 - 07:32
#permalink

This is my first time visit here. From the tons of comments on your articles,I guess I am not only one having all the enjoyment right here!
cenote azul Tulum


Автор: osama shk (не зарегистрирован), дата: 24 февраля, 2021 - 14:53
#permalink

Thanks for sharing this information. I really like your blog post very much. You have really shared a informative and interesting blog post with people..
rumah pintar


Отправить комментарий

Приветствуются комментарии:
  • Полезные.
  • Дополняющие прочитанное.
  • Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
    Для остальных вопросов и обсуждений есть форум.
P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.
Содержание этого поля является приватным и не предназначено к показу.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешены HTML-таги: <strike> <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <u> <i> <b> <pre> <img> <abbr> <blockquote> <h1> <h2> <h3> <h4> <h5> <p> <div> <span> <sub> <sup>
  • Строки и параграфы переносятся автоматически.
  • Текстовые смайлы будут заменены на графические.

Подробнее о форматировании

CAPTCHA
Антиспам
5 + 14 =
Введите результат. Например, для 1+3, введите 4.
 
Текущий раздел
Поиск по сайту
Содержание

Учебник javascript

Основные элементы языка

Сундучок с инструментами

Интерфейсы

Все об AJAX

Оптимизация

Разное

Дерево всех статей

Последние комментарии
Последние темы на форуме
Forum