JavaScript
.postMessage () i MessageEvent

Składnia

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

Parametry

Pierwsze kroki

Co to jest .postMessage () , kiedy i dlaczego go używamy

.postMessage() jest sposobem na bezpieczną komunikację między skryptami pochodzącymi z różnych źródeł.

Zwykle dwie różne strony mogą komunikować się ze sobą za pomocą JavaScript tylko wtedy, gdy są tego samego pochodzenia, nawet jeśli jedna z nich jest osadzona w innej (np. iframes ) lub jedna jest otwarta od drugiej (np. window.open() ). Dzięki .postMessage() możesz obejść to ograniczenie, zachowując bezpieczeństwo.

Z funkcji .postMessage() można korzystać tylko wtedy, gdy masz dostęp do kodu JavaScript obu stron. Ponieważ odbiorca musi zweryfikować nadawcę i odpowiednio przetworzyć wiadomość, możesz użyć tej metody tylko do komunikacji między dwoma skryptami, do których masz dostęp.

Zbudujemy przykład wysyłania wiadomości do okna potomnego i wyświetlania wiadomości w oknie potomnym. Zakłada się, że strona nadrzędna / nadawca to http://sender.com a strona podrzędna / odbiorca będzie na przykład http://receiver.com

Wysyłanie wiadomości

Aby wysłać wiadomości do innego okna, musisz mieć odniesienie do jego obiektu window . window.open() zwraca obiekt referencyjny nowo otwartego okna. Aby poznać inne metody uzyskania odwołania do obiektu okna, zobacz objaśnienie pod parametrem otherWindow tutaj .

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

Dodaj obszar textarea i send button który będzie używany do wysyłania wiadomości do okna potomnego.

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

Wyślij tekst textarea przy użyciu .postMessage(message, targetOrigin) , gdy button zostanie kliknięty.

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');
}

Aby wysyłać i odbierać obiekty JSON zamiast prostego ciągu, można zastosować metody JSON.stringify() i JSON.parse() . Transfarable Object możliwy do Transfarable Object może być podany jako trzeci opcjonalny parametr metody .postMessage(message, targetOrigin, transfer) , ale obsługa przeglądarki wciąż jest .postMessage(message, targetOrigin, transfer) nawet w nowoczesnych przeglądarkach.

W tym przykładzie, ponieważ zakłada się, że naszym odbiorcą jest strona http://receiver.com , wpisujemy jego adres URL jako targetOrigin . Wartość tego parametru powinna być zgodna z origin obiektu childWindow aby wiadomość została wysłana. Możliwe jest użycie * jako wildcard ale zdecydowanie zaleca się unikanie używania symbolu wieloznacznego i ze względów bezpieczeństwa zawsze ustawiaj ten parametr na określone pochodzenie odbiornika.

Odbieranie, sprawdzanie poprawności i przetwarzanie wiadomości

Kod w tej części powinien zostać umieszczony na stronie odbiorcy, którą w naszym przykładzie jest http://receiver.com .

Aby odbierać wiadomości, należy odsłuchać message event w window .

window.addEventListener("message", receiveMessage);

Po otrzymaniu wiadomości należy wykonać kilka kroków, aby zapewnić bezpieczeństwo w jak największym stopniu .

• Sprawdź poprawność nadawcy
• Sprawdź poprawność wiadomości
• Przetwórz wiadomość

Nadawca powinien zawsze być sprawdzany, aby upewnić się, że wiadomość została odebrana od zaufanego nadawcy. Następnie sam komunikat powinien zostać zweryfikowany, aby upewnić się, że nie zostanie odebrany żaden złośliwy program. Po tych dwóch walidacjach wiadomość może zostać przetworzona.

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);
}

Kliknij tutaj, aby zobaczyć JS Fiddle pokazujące jego użycie.