El elemento iframe: src y sandbox

El elemento <iframe> incrusta otro documento HTML dentro de la página actual. Cada iframe tiene su propio contexto de navegación, DOM y ámbito de JavaScript. El contenido de un iframe no puede acceder al DOM de la página principal sin permiso explícito.

Establezca el atributo src con la URL que desea incrustar: <iframe src="https://example.com" width="800" height="600">. El iframe crea un nuevo contexto de navegación. El atributo title es obligatorio por motivos de accesibilidad: title="Embedded map".

sandbox aplica restricciones al contenido del iframe: desactiva de forma predeterminada los scripts, los formularios, las ventanas emergentes y los plugins. Añada permisos específicos para restaurar capacidades: sandbox="allow-scripts allow-same-origin".

allow-scripts: habilita JavaScript. allow-same-origin: permite tratar el iframe como si fuera del mismo origen (necesario para acceder a localStorage). allow-forms: habilita el envío de formularios. allow-popups: permite window.open(). Conceda únicamente los permisos mínimos necesarios.

Los iframes cross-origin no pueden acceder al DOM principal; parent.document produce un error de seguridad. La comunicación entre marcos de distinto origen utiliza postMessage: iframe.contentWindow.postMessage(data, origin).

Envíe mensajes desde la página principal al iframe: iframe.contentWindow.postMessage({ type: "update", data: {} }, "https://embed.example.com"). En el iframe, escuche los mensajes: window.addEventListener("message", handler). Verifique siempre event.origin antes de procesar el mensaje.

loading="lazy" en los iframes retrasa la carga hasta que el iframe está cerca del viewport, lo que reduce la carga inicial de la página. Resulta útil para mapas, vídeos incrustados y widgets de redes sociales situados por debajo del área visible y que no se muestran inmediatamente.

Cada iframe carga un documento HTML independiente, CSS, JavaScript y recursos, lo que supone un coste considerable de recursos. Evite usar iframe para contenido que podría incrustarse como un fragmento. Cargue de forma diferida los iframe que estén por debajo del pliegue. Considere utilizar patrones facade (muestre un marcador de posición y cargue al hacer clic).

Controle el comportamiento de desplazamiento del iframe: scrolling="no" desactiva las barras de desplazamiento (está obsoleto; utilice overflow: hidden de CSS en el iframe). El enfoque moderno consiste en establecer la altura del iframe para que coincida con la altura del contenido, eliminando la necesidad de barras de desplazamiento internas.

El atributo allow concede funciones de Permissions Policy al iframe: allow="camera; microphone; fullscreen". Esto permite que el iframe solicite acceso a la cámara, al micrófono y a la API de pantalla completa, incluso cuando el origen principal no utiliza estas funciones.

YouTube y Google Maps proporcionan códigos de incrustación para iframe. Estos incluyen atributos allow para la pantalla completa y la reproducción automática. Añada siempre title="Video title" para facilitar la accesibilidad de los lectores de pantalla. El atributo sandbox normalmente no se añade a los códigos de incrustación de terceros; consulte su documentación para obtener recomendaciones de seguridad.

¿Qué efecto tiene el atributo sandbox en un iframe de forma predeterminada cuando no contiene valores?

Los iframe incrustan documentos externos en contextos de navegación aislados. El atributo sandbox restringe las capacidades del iframe; conceda únicamente los permisos mínimos necesarios. postMessage permite la comunicación segura entre orígenes. La carga diferida pospone el coste de recursos de los iframe que están por debajo del pliegue. El atributo allow concede funciones de Permissions Policy a incrustaciones de terceros de confianza.