Lección 20. Iframes.
La etiqueta iframe permite insertar contenido externo directamente dentro de tu sitio web. Es como una "ventana" incrustada que muestra otra página, aplicación, mapa o video, sin necesidad de que el usuario salga de tu sitio.
Se usa mucho para mapas, videos, formularios externos, dashboards, widgets y contenido de servicios de terceros.
<iframe src="https://example.com" width="500" height="300"></iframe>Algunos de los atributos más comunes a utilizar en la etiqueta iframe son:
src: URL del contenido que se mostrará.
width y height: tamaño del iframe (puede colocarse con CSS).
frameborder: borde del iframe (0 = sin borde).
loading="lazy": carga diferida para optimizar rendimiento.
Google Maps y YouTube._
Las plataformas como YouTube y Google Maps ofrecen códigos de inserción (embed) que ya vienen configurados para funcionar dentro de un iframe.
<iframe src="https://www.youtube.com/embed/VIDEO_ID"
width="560"
height="315"
allowfullscreen>
</iframe>Para Google Maps es similar: basta con copiar el "Código HTML" desde la opción de compartir mapa.
<iframe
src="https://www.google.com/maps/embed?pb=XXXX"
width="600"
height="450"
loading="lazy">
</iframe>Seguridad: sandbox y allow._
Cuando insertas contenido externo, es importante controlar qué permisos tendrá ese contenido para evitar comportamientos inseguros o acceso no deseado.
El atributo sandbox restringe capacidades del iframe.
<iframe src="page.html" sandbox></iframe>Nota: Sin sandbox, el contenido puede ejecutar scripts, abrir ventanas nuevas, etc.
Puedes habilitar permisos específicos:
allow-scripts: permite JavaScript.
allow-forms: permite formularios.
allow-same-origin: el iframe se comporta como si fuera del mismo dominio.
<iframe
src="page.html"
sandbox="allow-scripts allow-forms"
allow="camera; microphone">
</iframe>La propiedad allow controla permisos más modernos como:
Acceso a cámara.
Micrófono.
GPS.
Acelerómetro.
Autoplay de video.
Usar iframes de forma correcta mejora la seguridad y evita vulnerabilidades de terceros.