Cálculo automático de altura de un IFRAME alojado en otro dominio

Uno de los principales usos del elemento IFRAME en HTML es la integración de aplicaciones web alojadas en dominios diferentes. De esta manera es posible reutilizar un portal web dentro de otro y conseguir una experiencia de usuario más o menos homogénea. Sin embargo, con frecuencia, es necesario acceder a las propiedades del objeto IFRAME desde la página anfitriona para, por ejemplo, calcular su altura y poder dimensionar el marco de manera que se evite la doble barra de desplazamiento (una para la página anfitriona y otra para el propio IFRAME).

Sin embargo, cuando la página anfitriona y el IFRAME se encuentran alojados en dominios diferentes, las restricciones de los navegadores basadas en la “same origin policy” complican este tipo de operaciones. La lectura de atributos de los elementos HTML del IFRAME desde la página anfitriona será prohibida por el navegador en caso de que el nombre del servidor, el tipo de protocolo o el puerto sean diferentes. En estas situaciones existen un conjunto de técnicas que pueden aplicarse para habilitar la comunicación requerida:

  • Establecer el mismo valor para la propiedad document.domain en ambas ventanas mediante JavaScript. Esta técnica es solo factible si los sitios se encuentran en el mismo dominio, pero en subdominios diferentes. Por ejemplo, para una página en angelborroy.wordpress.com y otra página en theme.wordpress.com puede establecerse en ambas a wordpress.com.
  • Empleando mecanismos de Cross-Origin Resource Sharing (CORS) para construir una comunicación asíncrona entre las páginas mediante peticiones XMLHttpRequest. Puede consultarse un completo ejemplo sobre la aplicación de este mecanismo en HTML5 Rocks.
  • Empleando la función postMessage de la API de mensajería de HTML5 para Cross-document Messaging para el envío de mensajes y la recepción de eventos entre las ventanas a través de JavaScript.
  • Configurando un proxy web en la aplicación anfitriona que resuelva las peticiones a la máquina del IFRAME como locales. Aunque esta es la solución más trivial, implica una modificación en la configuración del servidor web que puede afectar a otros sistemas.

No obstante, no todas las técnicas pueden aplicarse a cualquier situación. Y no todos los mecanismos son soportados por todos los navegadores. En este sentido, es importante notar que Internet Explorer ofrece muy poca cobertura para HTML5, incluso en la versión 10, por lo que es conveniente evaluar técnicas alternativas en caso de que se desee dar servicio a este navegador. A continuación incluyo algunos enlaces que pueden ayudarnos a determinar cual es la mejor técnica en función del soporte ofrecido por los diferentes navegadores:

Un análisis exhaustivo de muchas de las técnicas existentes puede encontrarse en la presentación Cross Domain and Browser Security de Erlend Oftedal.

Conclusiones

Resulta evidente que la seguridad del usuario debe ser protegida, por lo que las restricciones descritas son necesarias. Sin embargo, parece un poco desproporcionado que la lectura de atributos HTML como la altura de un IFRAME se vea penalizada tanto en tiempo de ejecución como en tiempo de desarrollo por este motivo.

Un comentario en “Cálculo automático de altura de un IFRAME alojado en otro dominio

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s