Использование JavaScript и window.postMessage()

Использование JavaScript и window.postMessage()

От автора: кросс-доменная связь (также называемая Cross-origin) может представлять угрозу безопасности. Однако в HTML5 есть полезная и часто упускаемая возможность window.postMessage(), которая при правильном использовании безопасна.

Как указано в MDN, — Метод window.postMessage() безопасно обеспечивает перекрестную связь между объектами Window; например, между страницей и всплывающим окном или между страницей и встроенным в нее фреймом.

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

Два обязательных компонента и их синтаксис

Два обязательных компонента:

window.postMessage() — отправляет сообщение

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

window.addEventListener(« message », callback ) — для получения и обработки сообщения

Синтаксис для метода postMessage():

Существует необязательный третий параметр [transfer], который мы не будем использовать. Вы можете прочитать больше о нем на MDN.

targetWindow — это обработчик для окна, в которое вы хотите отправить сообщение.

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

targetOrigin — очень важная часть. Это URI страницы получателя. В момент отправки (postMessage), если targetOrigin действительно совпадает с именем хоста страницы targetWindow, он не сможет отправить сообщение.
Можно использовать «*» в качестве целевого идентификатора, но делайте это только для простого тестирования (как мы будем делать здесь).

Хочу особо подчеркнуть, в процессе производства на принимающей стороне вам нужно проверить домен получателей по отношению к targetOrigin. Если они не совпадают, не принимайте сообщение.

Предостережение: если в качестве targetOrigin используется «*», сообщение может быть откуда угодно. Имейте в виду, что мы обычно отправляем сообщение из одного домена в другой, поэтому targetOrigin должен соответствовать домену получателя targetWindow.

Другими словами, мы можем захотеть отправить сообщение с https://abcd.com на https://defg.com.Таким образом, targetOrigin будет https://defg.com, а домен получателя будет https://defg.com.

Пример

Мы создадим две веб-страницы с именами Page1.html и Page2.html. Page2.html будет всплывающим окном, что не обязательно, это просто мой выбор. Page1.html отправит сообщение на страницу Page2.html.

Создайте следующие файлы. Page1.html (обратите внимание на функцию sendMessage)

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Page2.html (обратите внимание на функцию обратного вызова в addEventListener)

Тестовый прогон

Откройте Page1.html и нажмите кнопку «Open child». Она открывает всплывающее окно.

Всплывающее окно

Нажмите кнопку «Send Message». Сообщение получено во всплывающем окне.

Результат childwin.postMessage()

Что происходит?

При нажатии «Send Message» объект отправляется на страницу получателя с использованием ссылки на это окно childwin, созданной во время window.open().

childwind.postMessage(msg,”*”)

Опять же, НЕ используйте «*» для других случаев, кроме тестирования. TargetOrigin должен быть доменом, в котором находится страница получателя.

Прослушиватель событий окна получателя получает сообщение в параметре с именем «event». Функция обратного вызова, в нашем случае функция Arrow, обрабатывает сообщение.

Сообщение содержится в event.data

TargetOrigin содержится в event.origin

Заключение

window.postMessage() — это безопасный способ отправки сообщений между окнами в разных доменах или источниках. Их можно также публиковать в IFrame.

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

Существует также postMessage(), его можно использовать, когда контекст браузера одинаков. Это связано с каналом.
channel.postMessage() будет рассмотрен в другой статье. Спасибо за чтение и удачного кодирования!

Автор: gravity well

Источник: https://medium.com

Редакция: Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook: