cómo comprobar desde qué iframe de dominios cruzados llegó el mensaje (postMessage)?

Question

Sé que el MessageEvent tiene la propiedad source que es el objeto de la ventana que envía el mensaje. Ahora, ¿cómo hacer que esta información compruebe qué iframe en el documento principal (y, por supuesto, dentro del documento principal sobre la llegada del mensaje) fue la fuente de ese mensaje en particular? ¿Solo está disponible la opción para marcar location.href en el objeto ventana event.source y luego recorrer todos los marcos flotantes para verificar cuál coincide? ¿Qué sucede si hay iframes con la misma URL de origen en el documento principal?

Answer 1

Si intenta leer la propiedad location.href de un iframe/ventana entre dominios, esto generará una excepción ya que infringe la política de origen idéntico. Puede escribir en esa propiedad, pero no puede leer. E incluso si eso funcionara, tendrías el problema con múltiples iframes con el mismo problema de URL, como habrás adivinado.

De todos modos, lo que puede hacer es establecer un protocolo para algún tipo de confirmación de envío de mensajes. En otras palabras, en el iframe que recibe un mensaje X iterarás sobre todos los iframes en el documento principal y enviarás un mensaje a cada iframe preguntando "¿Me has enviado el mensaje X?" y usted programaría todos los iframes para responder a tales preguntas. Por supuesto, tendría que adjuntar identificadores únicos a todos los mensajes para que sepa qué iframe reconoció que envió qué mensaje.

Creo que debe pensar por qué el destinatario del mensaje necesita saber quién fue el remitente, y por qué no es suficiente que usted solo conozca la referencia a ese remitente (event.source)? Si el remitente conoce alguna información, entonces el remitente puede enviar esta información en primer lugar al mensaje.

Answer 2

una manera más eficiente es pasar a los iframes cada uno una ID única en la iniciación, y hacer que utilicen esa identificación al publicar de nuevo en el marco principal.

Answer 3

Lo que estoy haciendo que parece funcionar hasta ahora en Chrome es iterar sobre todos los iframes en una página y hacer una comparación de identidad en sus objetos window.

window.addEventListener('message', function(e) { 
    if(e.origin === 'https://www.example.com') { 
     var iframes = document.getElementsByTagName('iframe'); 

     for(var i = 0; i < iframes.length; i++) { 
      if(e.source === iframes[i].contentWindow) { 
       // Do stuff with iframes[i] 
      } 
     } 
    } 
} 

Esto no ha sido probado en varios navegadores, por lo que su kilometraje puede variar.