📤 postMessage in JavaScript: cos'è e come può salvarti in situazione estreme

Quando si sviluppano applicazioni web moderne, capita spesso di dover far comunicare tra loro finestre, iframe o web worker.

In questi casi, il metodo postMessage si rivela uno strumento fondamentale. In questo articolo vedremo cos’è postMessage, a cosa serve e come si utilizza, con esempi pratici.

🔗 Ti piace Techelopment? Dai un'occhiata al sito per tutti i dettagli!

Cos’è `postMessage`?

postMessage è un metodo fornito dagli oggetti window e worker in JavaScript, che consente la comunicazione cross-origin (tra contesti diversi), come ad esempio:

tra una finestra principale e un iframe;
tra due finestre o tab aperte;
tra una pagina web e un Web Worker.

A cosa serve?

Serve per inviare dati da un contesto all’altro in modo sicuro, anche se provengono da origini diverse. È utile quando:

si incorporano widget da altri siti (es. un iframe YouTube);
si usano Web Worker per eseguire operazioni pesanti in background;
si aprono finestre popup o si comunicano tab diverse della stessa applicazione.

Come si usa: la sintassi

window.postMessage(message, targetOrigin, [transfer]);

Parametri:

message: il dato da inviare (può essere stringa, oggetto, array, ecc.).
targetOrigin: la origine del destinatario (es: 'https://esempio.com' o '*').
transfer (opzionale): oggetti trasferibili (come ArrayBuffer).

Attenzione a `targetOrigin`: è obbligatorio

Il secondo parametro di postMessage, chiamato targetOrigin, è obbligatorio secondo le specifiche HTML. Serve a indicare l’origine (protocollo + dominio + porta) del destinatario che deve ricevere il messaggio.

Perché è importante?

Sicurezza: impedisce che i dati vengano intercettati da origini non autorizzate.
Controllo: garantisce che il messaggio arrivi solo alla finestra giusta.

Esempi:

// Corretto
iframe.contentWindow.postMessage({ tipo: 'ping' }, 'https://esempio.com');

// Sconsigliato in produzione
iframe.contentWindow.postMessage({ tipo: 'ping' }, '*');

Nota: Anche se in alcuni ambienti JavaScript il parametro può sembrare opzionale, le specifiche HTML richiedono esplicitamente di fornire sempre targetOrigin.

Come ricevere i messaggi: `window.addEventListener('message', ...)`

Per ricevere un messaggio inviato con postMessage, il ricevente si registra all'evento message che offre l’oggetto event:

window.addEventListener('message', function(event) {
  console.log('Dati:', event.data);
  console.log('Origine:', event.origin);
  console.log('Provenienza:', event.source);
});

Spiegazione dei campi:

event.data: il messaggio ricevuto.
event.origin: l’origine della finestra mittente (es: https://esempio.com).
event.source: un riferimento alla finestra che ha inviato il messaggio.

Esempi (semplici) di utilizzo

Vediamo ora scenari tipici di utilizzo di postMessage che possono dare spunto a nuove tecniche di implementazione più robuste e strutturate.

Comunicazione tra finestra principale e iframe

<iframe id="myFrame" src="https://altrouser.com/frame.html"></iframe>

// Finestra principale
const iframe = document.getElementById('myFrame');
iframe.contentWindow.postMessage({ type: 'SALUTO', testo: 'Ciao iframe!' }, 'https://altrouser.com');

// Nell’iframe (frame.html)
window.addEventListener('message', function(event) {
  if (event.origin !== 'https://tuosito.com') return;
  console.log('Messaggio ricevuto:', event.data);
});

Comunicazione tra finestre

// Apri nuova finestra
const popup = window.open('https://esempio.com/popup.html');

// Invia messaggio dopo 1 secondo
setTimeout(() => {
  popup.postMessage('Ciao dalla finestra principale!', 'https://esempio.com');
}, 1000);

// Ricevi risposta
window.addEventListener('message', (event) => {
  console.log('Risposta dalla popup:', event.data);
});

💘 Quando `postMessage` può salvarti nello sviluppo

postMessage può davvero salvarti da ore di frustrazione (o dall’impazzire) in molti scenari dello sviluppo web moderno. È una delle API più sottovalutate, ma estremamente utile quando hai a che fare con contesti multipli o sandboxing.

Ecco gli scenari principali dove postMessage diventa un'ancora di salvezza:

🧩 1. Comunicazione tra iframe e pagina principale

Problema: Hai un widget (chat, login, pagamento, etc.) incorporato in un <iframe>, ma non puoi accedere direttamente al suo contenuto (perché è su un dominio diverso).