vagacode

Desde el principio del HTML, una de las formas más comunes de insertar contenido externo en una página web ha sido la etiqueta iframe. Durante mucho tiempo, fue una de esas etiquetas que tenían poco uso pero ha vuelto a renacer y se ha extendido debido a que muchos servicios la emplean para compartir contenido.

Imagino que esto se debe a que es simple, permite un control muy estricto por parte de quien brinda el servicio y hay una tendencia inevitable a que los navegadores sean auto-suficientes y no deban usarse plugins de terceros para interpretar determinados contenidos.

En su origen, la etiqueta podía contener muchos atributos que la hacían confusa pero que han sido depreciados y no deberíamos utilizarlos: frameborder, longdesc, marginheight, marginwidth, scrolling. En estos momentos, sólo hay un atributo obligatorio que es src donde pondremos la dirección url y dos opcionales como height y width que indican su alto y su ancho, algo que también puede hacerse con reglas de estilo.

La puesta a nuevo de iframe por parte del HTML5 también trajo consigo la depreciación de otras etiquetas que, si bien siguen siendo soportadas por los navegadores, por ahora han pasado al arcón de los recuerdos: iframe, iframeset y noframes.

Si bien usar iframes es sencillo porque nos facilita mucho la tarea de escribir códigos, puede generar problemas de seguridad. que siempre deben ser evaluados cuando se trata de insertar contenido ajeno. Como estamos creando un agujero dentro de nuestra página, el contenido que se nos mostrará está fuera de nuestro control. Si agregamos algo de un sitio que nos ofrece algún servicio pero, por alguna razón, ese sitio desaparece y es reemplazado por otro o bien cambia sus condiciones, un día, podemos encontrarnos con publicidad que no habíamos visto antes o enlaces a lugares poco recomendables o cualquier cosa.

Para evitar esto o mejor dicho para minimizar los problemas, es que el HTML5 incluye un nuevo atributo llamado sandbox que puede ser agregado sin incluir valor alguno en cuyo caso se establecen restricciones al contenido: no pueden ejecutarse plugins ni JavaScript, se deshabilitan los formularios, no funcionan los enlaces, deshabilita las APIs, etc; y esto es así aún cuando la url esté en nuestro propio dominio.

Probemos con un ejemplo:

<iframe src="http://www.youtube.com/embed/sD5K5XqaJME" style="width: 360px; height:240px;" sandbox></iframe>

Hemos incrustado correctamente el vídeo de YouTube pero no veremos nada salvo un rectángulo negro porque hemos bloqueado todo su contenido.

Obviamente, esto es algo extremo pero sandbox permite que incluyamos valores (que no están estandarizados en su totalidad) para permitir algunas acciones y que podemos combinar separándolos por comas:

<iframe sandbox="allow-forms allow-top-navigation allow-scripts" src="direccion_url"></iframe>

allow-forms habilita el envio de formularios
allow-scripts habilita la ejecución de JavaScript
allow-top-navigation permite que los enlaces puedan sustituir el contenido de la página
allow-pointer-lock habilita las APIs
allow-popups habilita la apertura de ventanas de tipo popups

¿Esto resuelve los problemas de seguridad? No, de ninguna manera y su uso es bastante limitado; si queremos aplicarlo a algún servicio que se nos ofrezca, el resultado será impredecible y lo más probable es que no funcione porque el bloqueo de sandobox si funciona.