Esiste un modo standard per riconoscere il tuo messaggio post nel gestore eventi onmessage?

Question

Ho un widget basato su iframe che utilizza postMessage per comunicare al genitore. Ciò significa che io mando un messaggio dall'iframe per richiedere un ridimensionamento di se stesso. I dati sono json e al momento interferiscono con i messaggi inviati da altri widget/script nella pagina padre.

Quindi ho bisogno di un modo per distinguere i miei messaggi dagli altri.

Ora sto pensando di aggiungere semplicemente un parametro { app: 'Poules.com', [...] } e controllare tale parametro prima di elaborare il messaggio.

Ma prima di fare: ci sono già contratti stabiliti per questo?

codice di invio:

parent.postMessage(JSON.stringify(data), page.widgetOrigin); 

fine di ricezione:

poules.sdk.receiveMessage = function(event) 
{ 
    var data = JSON.parse(event.data); 

    switch (data.message) 
    { 
     case 'requestResize': poules.sdk.requestResize(data); break; 
     case 'loginSuccess': poules.sdk.triggerLoginEvent(data); break; 
     default: throw "poules.sdk: can't parse message: " + event.data; 
    }; 
} 

Answer 1

Quando si riceve l'evento message, si deve controllo event.origin per assicurarsi che proviene da un'origine che si desidera ricevere messaggi a partire dal. Di solito è sufficiente per differenziarli da altri messaggi.

Quindi:

poules.sdk.receiveMessage = function(event) 
{ 
    if (event.origin != "http://poules.com") { // or whatever 
     return; 
    } 

    var data = JSON.parse(event.data); 

    switch (data.message) 
    { 
     case 'requestResize': poules.sdk.requestResize(data); break; 
     case 'loginSuccess': poules.sdk.triggerLoginEvent(data); break; 
     default: throw "poules.sdk: can't parse message: " + event.data; 
    }; 
} 

Questo per due motivi:

1. Si filtra i messaggi di finestre estranei a quello che stai facendo, e

2. filtra fuori dannoso messaggi che cercano di impersonare il tuo widget e ingannano la pagina principale nel fare cose che non dovrebbero fare

More about event.origin on MDN; ecco una nota su come si forma la stringa:

origine

L'origine della finestra che ha inviato il messaggio al momento postMessage è stato chiamato. Questa stringa è la concatenazione del protocollo e ": //", il nome host se ne esiste uno e ":" seguito da un numero di porta se una porta è presente e differisce dalla porta predefinita per il protocollo specificato. Esempi di origini tipiche sono https://example.org (che implica la porta 443), http://example.net (che implica la porta 80) e http://example.com:8080. Si noti che questa origine non è garantita come origine attuale o futura di quella finestra, che potrebbe essere stata spostata in un'altra posizione da quando è stato chiamato il numero postMessage.