Cross domain postMessage, identificar iFrame

Uso postMessage para enviar eventos de un iframe a su documento principal. Tengo control sobre ambos lados, pero el contenido proviene de dos dominios diferentes.

enter image description here

Mi problema simple es que no puedo identificar el iFrame dentro de su método de callback padre. La implementación se ve así:

En el iFrame:

 parent.postMessage(JSON.stringify({action: "closeView" }),'*'); 

En la ventana principal:

 window.addEventListener('message',function(event) { if(event.origin !== 'https://example.com') return; // Parse message back to json var messageObject = JSON.parse(event.data); var source = event.source; /* this is returning: Window -URL- */ console.log( source ); /* This will throw Permission denied, although this code is inside of "parent" */ console.log(source.parentNode); },false); 

Quiero identificar un determinado elemento principal del iframe, que está (lógicamente) dentro del documento principal.

Cuando trato de usar event.source.parentNode o alguna jQuery en dicho objeto, Firefox dice, no puedo hacer esto para evitar XSS, error: Error: Permission denied to access property 'parentNode'

¿Cómo puedo obtener el elemento principal del iFrame, que desencadenó el postMessage escucha del evento postMessage ?

puede usar nombres de ventana para esto, ya que pasan de la etiqueta iframe al contexto iframe.

doc. padre:

    

iframe doc:

    

que alerta “fr2”, luego “fr3”. A continuación, puede usar fácilmente el nombre attrib para buscar el iframe en el DOM principal utilizando los selectores de attrib CSS.

demostración ilustrativa del concepto window.name + iframe: http://pagedemos.com/namingframes/

este enfoque dolorosamente simple también es inmune a los problemas que surgen de iframes de la misma URL.

Según mi comprensión, esto puede intentarlo aquí supongamos que la URL de su ventana principal es http://www.abc.com \ home.php

     

getOtherDomainContent.php en este archivo necesita escribir una llamada ajax que obtenga contenido de URL cruzada e insertar ese contenido en la parte del cuerpo de iframe window (getOtherDomainContent.php) actual.

código getOtherDomainContent.php:

    //import jqry lib or other you use.    

Como se ve en este hilo: postMessage Source IFrame es posible comparar cada iframes contentWindow con event.source como este:

 /*each(iframe...){ */ frames[i].contentWindow === event.source 

Sugerencia: cuando se trata de uso de dominios cruzados e iFrames, no tiene acceso al id o al atributo de name del iFrame dentro del iFrame, por lo que no podemos obtenerlos.

Pero no me gusta esto demasiado. Mi solución por ahora se ve así:

En el iFrame:

 parent.postMessage(JSON.stringify({action: "closeView", viewUrl: document.URL}),'*'); 

Actualización: docuent.URL puede convertirse en un problema cuando usas consultas o enlaces con la ubicación (#anchor) ya que tu URL actual será diferente de la de la fuente del iframe. Entonces, en lugar de document.URL , es mejor usar [location.protocol, '//', location.host, location.pathname].join('') ( ¿hay algún método para obtener url sin cadena de consulta en el script java )?

En el documento principal:

 window.addEventListener('message',function(event) { if(event.origin !== 'https://example.com') return; // Parse message back to json var messageObject = JSON.parse(event.data); // Get event triggering iFrame var triggerFrame = $('iframe[src="'+messageObject.viewUrl+'"]'); },false); 

Cada evento tendrá que enviar la URL de iFrame actual al documento principal. Ahora podemos escanear nuestros documentos para el iFrame con la URL dada y trabajar con ella.

Si algunos de ustedes conocen una mejor manera, publiquen sus respuestas.