HTML
Diferencias entre iframe, embed y object para integrar documentos y recursos externos, con límites de seguridad, accesibilidad y compatibilidad.
, y incorporan recursos externos o documentos completos. También crean fronteras de seguridad, permisos, rendimiento y accesibilidad.
iframeembedobject<iframe
src="https://example.com/widget"
title="Mapa de ubicación"
loading="lazy"
></iframe>Representa un nested browsing context con su propio documento, navegación e historial.
Puede cargar:
<iframe
src="https://maps.example.com/location"
title="Mapa de la oficina en Bogotá"
></iframe>El atributo ayuda a identificar el frame. Debe describir su propósito, no repetir “iframe”.
Si existen varios frames similares, los títulos deben distinguirlos.
<iframe src="..." title="..." loading="lazy"></iframe>Puede diferir frames fuera del viewport. No hagas lazy load de contenido crítico visible inicialmente si perjudica experiencia.
<iframe
src="https://external.example/widget"
title="Widget externo"
sandbox
></iframe>Sin tokens, aplica restricciones fuertes a scripts, forms, navegación, origen y otras capacidades.
Se habilitan capacidades específicas:
sandbox="allow-scripts allow-forms"Usa el mínimo necesario.
En contenido del mismo origen, combinar ambos puede permitir que el documento elimine o escape algunas restricciones del sandbox según el escenario.
No copies una lista amplia de tokens sin analizar origen y amenaza.
<iframe
src="https://video.example.com/embed/123"
title="Demostración del proyecto"
allow="fullscreen; picture-in-picture"
></iframe>Configura permisos para features bajo Permissions Policy. El origen y headers también influyen.
<iframe
src="https://external.example"
title="Contenido externo"
referrerpolicy="no-referrer"
></iframe>Controla información de referrer enviada al recurso.
<iframe
title="Vista previa"
srcdoc="<p>Contenido de ejemplo</p>"
></iframe>Inserta un documento HTML directamente. No coloques entrada no confiable sin sanitización; puede ejecutar contenido según sandbox y CSP.
<iframe name="preview" title="Vista previa"></iframe>
<a href="/preview" target="preview">Abrir en vista previa</a>Permite usar el frame como contexto de navegación nombrado. Puede ser útil, pero crea interacciones e historial que deben ser comprensibles.
Un parent no puede leer libremente el DOM de un iframe cross-origin.
Para comunicación controlada se utiliza postMessage, validando origin y estructura del mensaje. Esa API pertenece a JavaScript, pero la frontera nace del documento embebido.
El servidor embebido puede impedir que otros sitios lo carguen mediante headers como CSP frame-ancestors o X-Frame-Options heredado.
No puedes forzar desde HTML que una página externa acepte embedding.
Un atacante puede intentar colocar una página sensible dentro de un frame transparente para engañar al usuario.
Protege páginas propias con headers frame-ancestors adecuados. Sandbox del embedder no sustituye esa defensa del recurso.
Cada iframe puede crear:
Un widget de terceros puede afectar Core Web Vitals y privacidad.
Algunos proveedores ofrecen dominios o modos que reducen cookies antes de interacción. Verifica qué datos se transmiten realmente; el nombre comercial no es garantía completa.
El contenido dentro de iframe ya no funciona como fallback general moderno de la misma forma que otros elementos. Ofrece un enlace externo visible cuando el recurso es importante:
<p>
<a href="https://maps.example.com/location">
Abrir mapa en una página nueva
</a>
</p><embed
src="document.pdf"
type="application/pdf"
width="800"
height="600"
>Integra contenido manejado por el navegador o plugin. No tiene fallback rico ni un mecanismo de nombre tan claro como iframe.
Para documentos, suele ser mejor ofrecer un link y quizá iframe/object según soporte.
<object
data="document.pdf"
type="application/pdf"
width="800"
height="600"
>
<p><a href="document.pdf">Descargar el documento PDF</a>.</p>
</object>Puede contener fallback si el recurso no se carga o soporta.
Históricamente se utilizó para plugins; evita tecnologías obsoletas como Flash.
La experiencia de PDF varía por navegador y asistencia. Ofrece:
<figure>
<iframe
src="https://www.youtube-nocookie.com/embed/example"
title="Demostración de DomiSys"
loading="lazy"
allow="accelerometer; autoplay; encrypted-media; picture-in-picture"
allowfullscreen
></iframe>
<figcaption>Recorrido por los flujos principales.</figcaption>
</figure>Revisa que los permisos listados sean realmente necesarios.
¿Por qué sandbox="allow-scripts allow-same-origin" merece revisión especial?
Porque en algunos escenarios permite que contenido con scripts conserve su origen y pueda reducir o escapar restricciones, especialmente si comparte origen con el parent.
canvas, SVG y MathML integra gráficos, vectores y fórmulas dentro del documento.