Esta etiqueta se utiliza para incorporar documentos web en el documento actual, esto es bueno para poder incluir contenido de terceros sobre el cual no se tenga el control web dentro de la nuestra, por ejemplo de esto está el siguiente video el cual pese a visualizarse en esta página realmente ningún elemento de este se encuentra en la página, en su lugar se tomó una sección directamente de la página de youtube y se insertó aquí de la siguiente manera:
Primero que nada recordemos que youtube brinda la opción de incrustar videos en otras páginas web muy fácilmente a través de los siguientes pasos:
Primero nos dirigimos al video que deseamos incorporar
Luego hacemos clic en el botón "Compartir"
Seleccionamos la opción de "insertar", y se nos brindará un código HTML con la etiqueta "iframe" ya incorporada (podemos configurar algunas cosas sobre cómo queremos que se visualice el video en nuestra página)
Copiamos el código y lo incrustamos en el archivo HTML deseado
El resultado es el siguiente
Google Maps también permite hacer algo muy similar, de la siguiente forma:
Vamos a Google Maps y buscamos el mapa que deseamos incorporar
Hacemos clic en el menú de la esquina superior izquierda de la página
Seleccionamos "Compartir o insertar mapa"
Seleccionamos la opción de "insertar", la cual nos dará un código HTML ya estructurado
Copiamos el código y lo insertamos en nuestro archivo HTML para incorporarlo
Nota: Es muy importante tener en cuenta el tema de los derechos de autor al usar un "iframe", lo mejor es nunca mostrar contenido del que no se sea el propietario o el dueño brindando un consentimiento por escrito, en el caso de que el contenido sea licenciado se deben obtener y cumplir los términos de la licencia.
Atributos:
allowfullscreen: Si está configurado, el "iframe" se puede colocar en modo pantalla completa usando el Full Screen API
Frameborder: Al asignarle un valor de "1" añade un borde alrededor de todo el elemento incrustado, su valor mínimo es "0", actualmente no es recomendable su uso ya que se obtiene el mismo o mejores resultados con CSS
Src: Al igual que en los elementos "video", "audio", "img" contiene la ruta que apunta al documento a incrustar
Contenido de reserva: Al igual que un elemento "audio" o "video" el "iframe" incluye un texto que se mostrará en caso de que el navegador no soporte esta etiquetas (actualmente es poco probable que se encuentre un navegador que no lo ejecute), se incorpora mediante un elemento "p" dentro de la etiqueta de apertura y de cierre del "iframe" (Suele contener un enlace al documento que se pretendía insertar)
width: Define la anchura del elemento
height: Define la altura del elemento
sandbox: Este atributo solicita una mayor configuración de seguridad en el "iframe" (Requiere versiones de navegadores más recientes)
Nota: Es recomendable establecer el atributo "src" con JavaScript luego de que se cargue el contenido principal para que de esa forma la página se pueda usar antes y cargue de forma más rápida.
Seguridad
Los "iframe" son "Vectores de ataque", es decir, objetivos de ataque de crackers, por lo tanto pudiesen llegar a ser vulnerabilidades en una página web, para esto se han desarrollado varios mecanismos y buenas prácticas para hacerlos más seguros.
Configurar el Servidor: Una de estas prácticas consiste en incluir en el servidor en el que albergue la página una configuración para evitar que la página sea incrustada en "iframe" ya que de esta forma se evita que se robe el contenido de la página y otros lo reclamen como propio o que inserten el sitio web en una página maliciosa para robar información del usuario, sin mencionar que el costo del ancho de banda consumido por ejecutar el "iframe" correría por parte de la página que está siendo insertada.
Aplicarlo solo si es necesario: Ya que los "iframes" representan un cierto riesgo siempre es bueno limitar su uso a solo aquellos casos en los que sea necesario su implementación.
Usar HTTPS: HTTPS es la versión encriptada de HTTP, pese a su costo se debería de incorporar a la página web siempre que sea posible, ya que brinda dos grandes ventajas:
- Reduce las posibilidades de que el contenido remoto sea manipulado mientras se encuentra en tránsito
- Impide que el contenido manipulado acceda al contenido padre y viceversa
Nunca se debería de insertar contenido de terceros mediante el HTTP, debido al gran peligro que conlleva, una buena solución es GitHub pages el cual permite usar HTTPS por defecto, por lo tanto no es necesario tramitar el certificado de seguridad
Siempre usar el atributo "sandbox": Básicamente consiste en brindarle al elemento y su contenido únicamente los permisos necesarios para hacer su trabajo, un contenido sin restricciones puede hacer muchas cosas como por ejemplo ejecutar JavaScript, es por eso que se restringe la funcionalidad del elemento y su contenido para reducir las opciones de un cracker. El atributo "sandbox" por defecto aplica todas las restricciones posibles al elemento "iframe" pero de ser necesario se pueden volver a conceder permisos uno por uno. Un recordatorio de seguridad importante es nunca conceder el permiso de allow-scripts junto con allow-same-origin ya que estos eventos pudiesen saltarse las medidas de seguridad y ejecutar Scripts para desactivar el "sandbox" por completo
Nota: sandbox no evita que un usuario pueda ser engañado por contenido malicioso, si existe alguna posibilidad de que el contenido pudiese ser malicioso lo mejor es publicarlo desde un dominio diferente al principal
Configurar directivas CSP: Esto es con exactitud la configuración de servidor que se nombró con anterioridad, consisten en programar un envío de encabezados HTTP (metadatos) para evitar que la página web se presente en un iframe
Nota: Una buena regla de oro para la seguridad web es "Nunca puedes ser demasiado cauteloso. Si lo hizo, verifíquelo de todos modos. Si alguien más lo hizo, asuma que es peligroso hasta que se demuestre lo contrario".