JavaScript
.postMessage () en MessageEvent

Syntaxis

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

parameters

Ermee beginnen

Wat is .postMessage () , wanneer en waarom gebruiken we het

.postMessage() methode is een manier om communicatie tussen scripts van verschillende oorsprong veilig toe te staan.

Normaal gesproken kunnen twee verschillende pagina's alleen rechtstreeks met elkaar communiceren via JavaScript als ze van dezelfde oorsprong zijn, zelfs als een van de pagina's in een andere is ingesloten (bijvoorbeeld iframes ) of de ene vanuit de andere is geopend (bijvoorbeeld window.open() ). Met .postMessage() kunt u deze beperking omzeilen en toch veilig blijven.

U kunt .postMessage() alleen gebruiken als u toegang hebt tot de JavaScript-code van beide pagina's. Aangezien de ontvanger de afzender moet valideren en het bericht dienovereenkomstig moet verwerken, kunt u deze methode alleen gebruiken om te communiceren tussen twee scripts waartoe u toegang hebt.

We zullen een voorbeeld bouwen om berichten naar een kindvenster te sturen en de berichten op het kindvenster te laten verschijnen. De ouder- / afzenderpagina wordt verondersteld http://sender.com en de kind / ontvanger-pagina wordt verondersteld http://receiver.com voor het voorbeeld.

Berichten versturen

Om berichten naar een ander venster te verzenden, moet u een verwijzing naar het window . window.open() retourneert het referentieobject van het nieuw geopende venster. Zie de uitleg onder parameter andere otherWindow hier voor andere methoden om een verwijzing naar een vensterobject te verkrijgen.

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

Voeg een textarea en een send button die zal worden gebruikt om berichten naar onderliggend venster te sturen.

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

Verzend de tekst van textarea met .postMessage(message, targetOrigin) wanneer op de button wordt geklikt.

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

Om JSON-objecten te verzenden en ontvangen in plaats van een eenvoudige tekenreeks, kunnen de JSON.stringify() en JSON.parse() worden gebruikt. Een Transfarable Object kan worden gegeven als de derde optionele parameter van de .postMessage(message, targetOrigin, transfer) methode, maar browserondersteuning ontbreekt nog steeds, zelfs in moderne browsers.

Omdat in dit voorbeeld wordt aangenomen dat onze ontvanger de pagina http://receiver.com , voeren we de URL in als targetOrigin . De waarde van deze parameter moet overeenkomen met de origin van het childWindow object voor het te verzenden bericht. Het is mogelijk om * als wildcard maar wordt ten zeerste aanbevolen om het jokerteken te vermijden en om veiligheidsredenen deze parameter altijd in te stellen op de specifieke oorsprong van de ontvanger.

Berichten ontvangen, valideren en verwerken

De code onder dit deel moet op de ontvangerpagina worden geplaatst, bijvoorbeeld http://receiver.com .

Om berichten te ontvangen, moet de message event van het window worden beluisterd.

window.addEventListener("message", receiveMessage);

Wanneer een bericht wordt ontvangen, zijn er een aantal stappen die moeten worden gevolgd om de beveiliging zoveel mogelijk te waarborgen .

• Valideer de afzender
• Valideer het bericht
• Verwerk het bericht

De afzender moet altijd worden gevalideerd om te controleren of het bericht is ontvangen van een vertrouwde afzender. Daarna moet het bericht zelf worden gevalideerd om ervoor te zorgen dat er niets kwaadaardig wordt ontvangen. Na deze twee validaties kan het bericht worden verwerkt.

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

Klik hier voor een JS Fiddle die het gebruik ervan demonstreert.