Czy istnieje standardowy sposób rozpoznawania własnego postMessage w module obsługi zdarzenia onmessage?

Question

Mam widget oparty na element iframe, który korzysta z funkcji postMessage do komunikacji z rodzicem. Oznacza to, że wysyłam wiadomość z elementu iframe, aby zażądać zmiany rozmiaru samej siebie. Dane są json i obecnie zakłócają wiadomości wysyłane przez inne widżety/skrypty na stronie nadrzędnej.

Potrzebuję więc sposobu na rozróżnienie moich własnych wiadomości od innych.

Teraz myślę o dodaniu po prostu parametru { app: 'Poules.com', [...] } i sprawdzeniu tego parametru przed przetworzeniem komunikatu.

Ale zanim to zrobię: czy są już jakieś ustalone kontrakty?

Wysyłanie code:

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

Odbiór końcowy:

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

Po odebraniu zdarzenia message, ty musi check event.origin aby upewnić się, że pochodzący z pochodzenia chcesz otrzymywać wiadomości od. Zazwyczaj wystarcza to, aby odróżnić je od innych wiadomości.

Więc:

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

to z dwóch powodów:

1. Filtruje się wiadomości od okien niezwiązane z tego, co robisz, i

2. To odfiltrowuje złośliwy wiadomości próbujące podszyć się pod widżet i nakłonić stronę główną do robienia rzeczy, których nie powinno się robić

More about event.origin on MDN; oto notatkę o tym, jak powstaje ciąg:

pochodzenie

Pochodzenie okna, który wysłał wiadomość w momencie postMessage została wywołana. Ten ciąg jest połączeniem protokołu i ": //", nazwą hosta, jeśli istnieje, i ":", po którym następuje numer portu, jeśli port jest obecny i różni się od domyślnego portu dla danego protokołu. Przykładami typowych początków są: https://example.org (implikując port 443), http://example.net (sugerujący port 80) i http://example.com:8080. Zauważ, że to pochodzenie nie jest gwarantowane jako bieżące lub przyszłe pochodzenie tego okna, które mogło zostać przeniesione do innej lokalizacji, ponieważ zostało wywołane postMessage.