¿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 .

  • Cómo resolver el error 'Error al ejecutar' postMessage 'en' DOMWindow '' desde una inserción de YouTube
  • ¿Android WebKit es compatible con postMessage () para la comunicación entre cuadros?
  • comunicación entre dos niños iframe usando postMessage
  • PostMessage con múltiples funciones o devoluciones de llamadas personalizadas
  • Comunicación de origen cruzado del iframe de padre a hijo
  • postMessage () genera el error "undefined no es una function"
  • ¿Algún buen depurador para HTML5 Javascript postMessage API?
  • postMessage aún roto en IE11?
  • Alternativa a la window emergente de postría continua con postMessage () para controlar el estado
  • JS: cómo usar de forma segura window.postMessage cuando el dominio del remitente es desconocido
  • error de origen top.postMessage no atrapado
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.