¿Existe una forma estándar para reconocer tu propio postMessage en el controller de events onmessage?

Tengo un widget basado en iframe que usa postMessage para comunicarse con el padre. Eso significa, es decir, que envío un post desde el iframe para solicitar un cambio de tamaño de sí mismo. La información es json, y en este momento está interfiriendo con los posts enviados por otros widgets / scripts en la página principal.

Entonces necesito una forma de distinguir mis propios posts de los demás.

Ahora estoy pensando en simplemente agregar un parámetro { app: 'Poules.com', [...] } y verificar ese parámetro antes de procesar el post.

Pero antes que yo, ¿ya hay contratos establecidos para esto?

Código de envío:

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

Extremo de recepción:

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

One Solution collect form web for “¿Existe una forma estándar para reconocer tu propio postMessage en el controller de events onmessage?”

Cuando reciba el evento de message , debe verificar event.origin para asegurarse de que proviene de un origen del que desea recibir posts. Esto suele ser suficiente para diferenciarlos de otros posts.

Asi que:

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

Esto es por dos razones:

  1. Filtra los posts de Windows que no están relacionados con lo que estás haciendo, y

  2. Filtra los posts maliciosos que intentan suplantar a tu widget y engaña a la página principal para que haga cosas que no debería hacer

Más sobre event.origin en MDN ; Aquí hay una nota sobre cómo se forma la string:

origen

El origen de la window que envió el post en el momento en que se llamó a postMessage . Esta cadena es la concatenación del protocolo y ": //", el nombre de host, si existe, y ":" seguido de un número de puerto si hay un puerto presente y difiere del puerto pnetworkingeterminado para el protocolo dado. Ejemplos de orígenes típicos son https://example.org (implicando el puerto 443), http://example.net (implicando el puerto 80) y http://example.com:8080 . Tenga en count que no se garantiza que este origen sea el origen actual o futuro de esa window, que podría haberse navegado a una location diferente desde que se postMessage .

  • ¿Window.postMessage garantiza el order de los events?
  • Comunicación entre diferentes windows en el mismo dominio
  • Cómo ejecutar una function a través de postMessage
  • ¿Por qué la secuencia de commands postMessage no funciona en IE8?
  • ¿Se puede usar la API de PostMessage para comunicarse con un Android WebView?
  • PostMessage desde un iFrame de espacio aislado a la window principal, el origen siempre es nulo
  • Untaught SyntaxError: no se pudo ejecutar 'postMessage' en 'Window': origen de destino no válido 'my_page' en una llamada a 'postMessage'
  • Location.hash está vacío solo en Safari 7
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.