JavaScript
.postMessage () и MessageEvent

Синтаксис

• windowObject.postMessage(message, targetOrigin, [transfer]);
• window.addEventListener("message", receiveMessage);

параметры

Начиная

Что такое .postMessage () , когда и почему мы его используем

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

Обычно две разные страницы могут напрямую взаимодействовать друг с другом с использованием JavaScript, когда они находятся под одним и тем же источником, даже если один из них встроен в другой (например, iframes ) или один из них открывается из другого (например, window.open() ). С .postMessage() вы можете обойти это ограничение, оставаясь в безопасности.

Вы можете использовать .postMessage() когда у вас есть доступ к JavaScript-коду обоих страниц. Поскольку получателю необходимо проверить отправителя и обработать сообщение соответствующим образом, вы можете использовать этот метод только для связи между двумя имеющимися у вас сценариями.

Мы построим пример для отправки сообщений дочернему окну и отображения сообщений в дочернем окне. Предполагается, что страница родителя / отправителя будет http://sender.com а страница ребенка / получателя будет считаться http://receiver.com для примера.

Отправка сообщений

Чтобы отправлять сообщения в другое окно, вам нужно иметь ссылку на его window объект. window.open() возвращает ссылочный объект только что открытого окна. Для других методов , чтобы получить ссылку на объект окна, увидеть объяснение под otherWindow параметром здесь .

var childWindow = window.open("http://receiver.com", "_blank");

Добавьте textarea и send button которые будут использоваться для отправки сообщений дочернему окну.

<textarea id="text"></textarea>
<button id="btn">Send Message</button>

Отправьте текст textarea с помощью .postMessage(message, targetOrigin) когда button .

var btn = document.getElementById("btn"),
    text = document.getElementById("text");

btn.addEventListener("click", function () {
    sendMessage(text.value);
    text.value = "";
});

function sendMessage(message) {
    if (!message || !message.length) return;
    childWindow.postMessage(JSON.stringify({
        message: message,
        time: new Date()
    }), 'http://receiver.com');
}

Чтобы отправлять и получать объекты JSON вместо простой строки, могут использоваться методы JSON.stringify() и JSON.parse() . Transfarable Object может быть предоставлен в качестве третьего необязательного параметра метода .postMessage(message, targetOrigin, transfer) , но поддержка браузера по-прежнему отсутствует даже в современных браузерах.

В этом примере, поскольку наш приемник считается http://receiver.com page, мы вводим его url как targetOrigin . Значение этого параметра должно соответствовать origin от childWindow объекта для сообщения , которое требуется отправить. Можно использовать * в качестве wildcard но настоятельно рекомендуется избегать использования подстановочного знака и всегда устанавливать этот параметр для конкретного источника получателя по соображениям безопасности .

Получение, проверка и обработка сообщений

Код в этой части должен быть помещен на страницу получателя, которая для нашего примера - http://receiver.com .

Чтобы получать сообщения, необходимо прослушать message event в window .

window.addEventListener("message", receiveMessage);

Когда сообщение получено, необходимо выполнить несколько шагов, чтобы обеспечить максимальную безопасность .

• Проверить отправителя
• Подтвердить сообщение
• Обработать сообщение

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

function receiveMessage(ev) {
    //Check event.origin to see if it is a trusted sender.
    //If you have a reference to the sender, validate event.source
    //We only want to receive messages from http://sender.com, our trusted sender page.
    if (ev.origin !== "http://sender.com" || ev.source !== window.opener)
        return;

    //Validate the message
    //We want to make sure it's a valid json object and it does not contain anything malicious 
    var data;
    try {
        data = JSON.parse(ev.data);
        //data.message = cleanseText(data.message) 
    } catch (ex) {
        return;
    }

    //Do whatever you want with the received message
    //We want to append the message into our #console div
    var p = document.createElement("p");
    p.innerText = (new Date(data.time)).toLocaleTimeString() + " | " + data.message;
    document.getElementById("console").appendChild(p);
}

Нажмите здесь, чтобы увидеть JS Fiddle, демонстрирующий его использование.