JavaScript
.postMessage () und MessageEvent

Syntax

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

Parameter

Fertig machen

Was ist .postMessage () , wann und warum verwenden wir es

.postMessage() -Methode ist eine Möglichkeit, die Kommunikation zwischen Ursprungsskripts sicher zuzulassen.

Normalerweise können zwei verschiedene Seiten mit JavaScript nur dann direkt miteinander kommunizieren, wenn sie unter demselben Ursprung liegen, selbst wenn eine von ihnen in eine andere eingebettet ist (z. B. iframes ) oder eine von innen aus geöffnet ist (z. B. window.open() ). Mit .postMessage() können Sie diese Einschränkung .postMessage() und trotzdem sicher bleiben.

Sie können .postMessage() nur verwenden, wenn Sie auf den JavaScript-Code beider Seiten zugreifen können. Da der Empfänger den Absender überprüfen und die Nachricht entsprechend bearbeiten muss, können Sie diese Methode nur für die Kommunikation zwischen zwei Skripts verwenden, auf die Sie zugreifen können.

Wir werden ein Beispiel erstellen, um Nachrichten an ein untergeordnetes Fenster zu senden und die Nachrichten im untergeordneten Fenster anzuzeigen. Die übergeordnete / sendende Seite wird als http://sender.com und die untergeordnete / Empfängerseite für das Beispiel als http://receiver.com angenommen.

Nachrichten senden

Um Nachrichten an ein anderes Fenster zu senden, benötigen Sie einen Verweis auf das window . window.open() gibt das Referenzobjekt des neu geöffneten Fensters zurück. otherWindow anderen Methoden, um einen Verweis auf ein Fensterobjekt zu erhalten, finden Sie in der Erläuterung unter otherWindow -Parameter hier .

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

Fügen Sie einen textarea und eine send button zum Senden hinzu, mit der Nachrichten an das untergeordnete Fenster gesendet werden.

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

Senden Sie den Text des textarea mit .postMessage(message, targetOrigin) wenn Sie auf die button .postMessage(message, targetOrigin) .

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

Um JSON-Objekte anstelle eines einfachen Strings zu senden und zu empfangen, können die Methoden JSON.stringify() und JSON.parse() verwendet werden. Ein Transfarable Object kann als dritter optionaler Parameter der Methode .postMessage(message, targetOrigin, transfer) werden, doch die Unterstützung für Browser fehlt selbst in modernen Browsern noch immer.

Für dieses Beispiel, da unser Empfänger angenommen wird sein http://receiver.com Seite, geben wir die URL als targetOrigin . Der Wert dieses Parameters sollte mit dem origin des childWindow Objekts für die zu childWindow Nachricht childWindow . Es ist möglich, * als wildcard , es wird jedoch dringend empfohlen , den Platzhalter zu vermeiden, und dieser Parameter sollte aus Sicherheitsgründen immer auf den spezifischen Ursprung des Empfängers eingestellt werden .

Empfangen, Überprüfen und Verarbeiten von Nachrichten

Der Code unter diesem Teil sollte auf der Empfängerseite abgelegt werden, in unserem Beispiel http://receiver.com .

Um Nachrichten empfangen zu können, sollte das message event des window abgehört werden.

window.addEventListener("message", receiveMessage);

Wenn eine Nachricht empfangen wird, müssen einige Schritte befolgt werden, um die Sicherheit so gut wie möglich zu gewährleisten .

• Bestätigen Sie den Absender
• Bestätigen Sie die Nachricht
• Verarbeiten Sie die Nachricht

Der Absender sollte immer überprüft werden, um sicherzustellen, dass die Nachricht von einem vertrauenswürdigen Absender empfangen wird. Danach sollte die Nachricht selbst überprüft werden, um sicherzustellen, dass keine schädlichen Personen empfangen werden. Nach diesen beiden Validierungen kann die Nachricht verarbeitet werden.

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

Klicken Sie hier, um eine JS-Fiddle zu sehen, die ihre Verwendung zeigt.