Cómo intercambiar información entre páginas de diferentes dominios con Javascript

Última modificación por Administrator el 2014/01/16 12:46

Si el contenedor y el contenido del iframe están alojados bajo un mismo dominio es posible la comunicación directa por javascript (accediendo directamente al DOM) entre ambos. Bajo distintos dominios, por razones de seguridad, los navegadores web aplican la política "Same Origin Policy (SOP)" restringiendo así la comunicación directa entre ambos.

La solución corporativa a esta restricción de seguridad es Cross-document messaging. Cross-document messaging es una API introducida en el borrador de la especificación HTML5 que permite a los documentos HTML comunicarse con otros bajo diferentes dominios. La comunicación se realiza con javascript. Si por ejemplo, se desea hacer una llamada desde un documento A "embebido" en un iframe de un documento B, el primero (A) debería invocar a la función postMessage() del "padre" (B)


    <html>  
        <head>  
            <script>  
            function resize(altura) {  
                parent.postMessage('resize(' +  altura +')', 'http://dominioB/');  
            }  
            </script>  
        </head>  
        <body>          
            <form>  
            Introduce la altura del iframe:  
            <input type="text" name="altura">       
            <input type="button" onclick="javascript:resize(this.form.altura.value);">  
            </form>  
        </body>  
    </html>  


En el documento "padre" (B) se deberá registrar un manejador de eventos con el fin de evaluar los mensajes enviados desde A. Una vez comprobado el origen del mensaje, el receptor ejecutará una u otra acción según corresponda.


        <html>  
        <head>  
            <script>  
            function receiver(event) {  
                    if (event.origin == 'http://dominioA') {  
                            eval(event.data);  
                    }  
            }  
            window.addEventListener('message', receiver, false);  
              
            function resize(altura) {  
                document.getElementById('iframe').height = altura;  
            }  
            </script>  
        </head>  
        <body>  
            <iframe src="http://dominioA/iframe.html" id="iframe"></iframe>   
        </body>  
    </html>  


Por razones de seguridad se debe comprobar siempre el origen de los mensajes.

Esta API esta disponible "de serie" en los navegadores corporativos e incluso por Internet Explorer 8 o superior si se aplica a comunicaciones con iframes/frame

© 2014 GOBIERNO DE CANTABRIA - AVISO LEGAL Y PROTECCIÓN DE DATOS