JavaScript
.postMessage () och MessageEvent

Syntax

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

parametrar

Komma igång

Vad är .postMessage () , när och varför använder vi det

.postMessage() -metoden är ett sätt att säkert tillåta kommunikation mellan skript med ursprungskors.

Vanligtvis kan två olika sidor bara direkt kommunicera med varandra med JavaScript när de är under samma ursprung, även om en av dem är inbäddad i en annan (t.ex. iframes ) eller en öppnas inifrån den andra (t.ex. window.open() ). Med .postMessage() kan du .postMessage() denna begränsning medan du fortfarande håller dig säker.

Du kan bara använda .postMessage() när du har tillgång till båda sidornas JavaScript-kod. Eftersom mottagaren måste validera avsändaren och bearbeta meddelandet i enlighet därmed kan du bara använda den här metoden för att kommunicera mellan två skript du har tillgång till.

Vi kommer att bygga ett exempel för att skicka meddelanden till ett barnfönster och att meddelandena ska visas i barnfönstret. Förälders / avsändarsidan antas vara http://sender.com och sidan för barn / mottagare antas vara http://receiver.com för exemplet.

Skickar meddelanden

För att skicka meddelanden till ett annat fönster måste du ha en referens till dess window . window.open() returnerar referensobjektet för det nyöppnade fönstret. För andra metoder för att få en referens till ett fönsterobjekt, se förklaringen under otherWindow parameter här .

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

Lägg till ett textarea och en send button som kommer att användas för att skicka meddelanden till barnfönstret.

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

Skicka texten till textarea med .postMessage(message, targetOrigin) när du .postMessage(message, targetOrigin) på 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');
}

För att skicka och ta emot JSON-objekt istället för en enkel sträng kan JSON.stringify() och JSON.parse() -metoder användas. Ett Transfarable Object kan ges som den tredje valfria parametern för .postMessage(message, targetOrigin, transfer) , men webbläsarsupport saknas fortfarande även i moderna webbläsare.

För detta exempel, eftersom vår mottagare antas vara http://receiver.com //receiver.com-sida, anger vi dess url som targetOrigin . Värdet på denna parameter bör matcha origin till childWindow objektet för meddelandet som ska skickas. Det är möjligt att använda * som ett wildcard men rekommenderas starkt för att undvika att använda jokertecken och alltid ställa in denna parameter på mottagarens specifika ursprung av säkerhetsskäl .

Ta emot, validera och behandla meddelanden

Koden under denna del ska läggas på mottagarsidan, som är http://receiver.com för vårt exempel.

För att ta emot meddelanden bör window message event lyssnas.

window.addEventListener("message", receiveMessage);

När ett meddelande tas emot finns det ett par steg som bör följas för att säkerställa säkerheten så mycket som möjligt .

• Validera avsändaren
• Validera meddelandet
• Behandla meddelandet

Avsändaren ska alltid valideras för att se till att meddelandet tas emot från en betrodd avsändare. Därefter bör meddelandet själva valideras för att se till att inget skadligt tas emot. Efter dessa två valideringar kan meddelandet behandlas.

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

Klicka här för en JS Fiddle som visar hur den används.