JavaScript
.postMessage () e MessageEvent

Sintassi

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

Parametri

Iniziare

Che cos'è .postMessage () , quando e perché lo usiamo

.postMessage() metodo .postMessage() è un modo per consentire in modo sicuro la comunicazione tra gli script di origine incrociata.

Normalmente, due pagine diverse possono solo comunicare direttamente tra loro utilizzando JavaScript quando sono sotto la stessa origine, anche se una di esse è incorporata in un'altra (ad es. iframes ) o una è aperta dall'altra (es. window.open() ). Con .postMessage() , puoi aggirare questa restrizione rimanendo al sicuro.

Puoi utilizzare .postMessage() quando hai accesso al codice JavaScript di entrambe le pagine. Poiché il destinatario deve convalidare il mittente ed elaborare il messaggio di conseguenza, è possibile utilizzare questo metodo solo per comunicare tra due script a cui si ha accesso.

Creeremo un esempio per inviare messaggi a una finestra secondaria e far visualizzare i messaggi sulla finestra secondaria. Si presuppone che la pagina padre / mittente sia http://sender.com e che la pagina figlio / destinatario sia considerata http://receiver.com per l'esempio.

Invio di messaggi

Per inviare messaggi ad un'altra finestra, è necessario avere un riferimento al suo oggetto window . window.open() restituisce l'oggetto di riferimento della finestra appena aperta. Per altri metodi per ottenere un riferimento a un oggetto finestra, vedere la spiegazione sotto il parametro otherWindow qui .

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

Aggiungere una textarea e un send button che verrà utilizzato per inviare messaggi a finestra secondaria.

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

Invia il testo di textarea usando .postMessage(message, targetOrigin) quando si fa clic sul 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');
}

Per inviare e ricevere oggetti JSON anziché una stringa semplice, è possibile utilizzare i metodi JSON.stringify() e JSON.parse() . A Transfarable Object può essere dato come terzo parametro facoltativo del .postMessage(message, targetOrigin, transfer) , ma il supporto del browser è ancora carente anche nei browser moderni.

Per questo esempio, dal momento che il nostro ricevitore è presumibilmente la pagina http://receiver.com , inseriamo l'url come targetOrigin . Il valore di questo parametro deve corrispondere origin dell'oggetto childWindow per il messaggio da inviare. È possibile utilizzare * come carattere wildcard ma si consiglia vivamente di evitare l'uso del carattere jolly e di impostare sempre questo parametro sull'origine specifica del destinatario per motivi di sicurezza .

Ricezione, convalida ed elaborazione dei messaggi

Il codice sotto questa parte dovrebbe essere inserito nella pagina del destinatario, che è http://receiver.com per il nostro esempio.

Per ricevere messaggi, l' message event del message event della window dovrebbe essere ascoltato.

window.addEventListener("message", receiveMessage);

Quando viene ricevuto un messaggio, è necessario seguire un paio di passaggi per garantire il più possibile la sicurezza .

• Convalidare il mittente
• Convalida il messaggio
• Elabora il messaggio

Il mittente dovrebbe sempre essere convalidato per assicurarsi che il messaggio sia ricevuto da un mittente fidato. Successivamente, il messaggio stesso dovrebbe essere convalidato per assicurarsi che non venga ricevuto alcun messaggio dannoso. Dopo queste due convalide, il messaggio può essere elaborato.

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

Clicca qui per un JS Fiddle in mostra il suo utilizzo.