API HTML5 window.postMessage

L’API window.postMessage consente l’invio di messaggi testuali tra due finestre / frame a livello di dominio. Diamo uno sguardo a come funziona window.postMessage e come si può usare oggi in Firefox, IE8 +, Opera, Safari e Chrome.

Il sender ( chi invia il messaggio)

La prima parte del processo è la creazione di una “sorgente”. Da questa si aprirà una nuova finestra (o IFrame, se si preferisce), che invierà il messaggio alla finestra riceventi ogni 6 secondi. Creeremo poi un listener di eventi in grado di ricevere qualsiasi risposta che riceviamo dalla finestra di destinazione.


//create popup window
var domain = 'http://scriptandstyle.com';
var myPopup = window.open(domain + '/windowPostMessageListener.html','myWindow');

//periodical message sender
setInterval(function(){
	var message = 'Hello!  The time is: ' + (new Date().getTime());
	console.log('blog.local:  sending message:  ' + message);
	myPopup.postMessage(message,domain); //send the message and target URI
},6000);

//listen to holla back
window.addEventListener('message',function(event) {
	if(event.origin !== 'http://scriptandstyle.com') return;
	console.log('received response:  ',event.data);
},false);

Nota:  window.addEventListener non funziona correttamente con Internet Explorer (IE usa window.attachEvent). Per normalizzare la cosa dovremmo fare uso di MooTools/jQuery/Dojo.

Aperta la finestra, inviamo il messaggio specificando la URI corretta della finestra in ascolto (protocollo, hostname, e porta) . Se la destinazione cambia indirizzo, il messaggio chiaramente non sarà consegnato.

L’altro handler ha il compito di ricevere il messaggio. E’ estremamente importante che l’origine sia validata, ogni qual volta si riceve un messaggio, in quanto più mittenti potrebbero inviare messaggi a questa finestra.

Effettuata la validazione, possiamo fare del messaggio ciò che vogliamo.

Ecco il nostro codice mediante l’uso di IFrame:


//create popup window
var domain = 'http://scriptandstyle.com';
var iframe = document.getElementById('myIFrame').contentWindow;

//periodical message sender
setInterval(function(){
	var message = 'Hello!  The time is: ' + (new Date().getTime());
	console.log('blog.local:  sending message:  ' + message);
	iframe.postMessage(message,domain); //send the message and target URI
},6000);

Receiver (chi riceve il messaggio inviato da Sender)

La seconda parte del processo consiste nel creare la finestra di ricezione. Qui va istanziato un listener per il messaggio, che dovrà ovviamente essere prima validato controllandone l’origine.


//respond to events
/*source - The source window/frame the message was sent from.
origin - The URI (protocol, domain, and port, if provided) match the message was sent from.
data - The actual message sent from the source.*/

window.addEventListener('message',function(event) {
if(event.origin !== 'http://davidwalsh.name') return;
console.log('message received: ' + event.data,event);
event.source.postMessage('holla back youngin!',event.origin);
},false);

Questo esempio invia un messaggio di risposta, per confermare la corretta ricezione.

window.postMessage

Come ogni altra tecnologia web, esiste un pericolo derivato dall’uso improprio del componente. Se la sorgente non è validata correttamente si ottiene infatti un applicazione insicura!

Michele Pierri

Sviluppatore android/web/desktop, blogger, nonchè sostenitore incallito dell'universo Cloud Computing, nel tempo libero amo fare sport e praticare arti marziali.