El contenido incorporado es la mejor manera de mantener a los usuarios en tu sitio y, al mismo tiempo, compartir contenido de otras páginas o sitios. Puede ser tan pequeño como un Tweet incorporado, que se muestra en el estilo y formato de Twitter. Puede ser tan grande como un sitio completamente independiente incorporado en el tuyo, como una tienda de Shopify incorporada en la que los visitantes pueden realizar una compra sin salir de tu sitio.
Ahora más que nunca, es importante que nuestros sitios permanezcan seguros cuando incorporamos contenido.
Los desarrolladores pueden incorporar contenido en un sitio web de varias maneras. La técnica más común es usar un <iframe>, que te permite incorporar cualquier contenido en tu sitio con solo una URL. Ya es posible agregar el atributo sandbox para que un iframe sea más seguro.
Como alternativa, puedes usar un elemento HTML propuesto:
- Se propone
<fencedframe>como una forma de incorporar contenido de terceros que preserva la privacidad. - Se propone
<portal>para lograr transiciones de página más fluidas.
Sigue leyendo para descubrir cómo mejorar la seguridad de tu contenido incorporado.
Incorporar con iframes
Los iframes se pueden usar para todo tipo de casos de uso, como agregar mapas o formularios a una página de contacto y mostrar anuncios.
<iframe src="https://example.com/maps"></iframe>
Cada iframe tiene su propio contexto de navegación, con su propio historial de sesión y documento. El contexto que incorpora el iframe se conoce como el contexto de navegación superior.
El contenido de terceros que se muestra en un iframe puede interactuar con el sitio superior a través de postMessage(). Esto permite a los desarrolladores enviar valores arbitrarios entre los contextos de navegación. El receptor de mensajes puede usar el objeto de escucha de eventos onmessage para recibir los valores.
// inside iframe
window.parent.postMessage("ping", "https://example.com");
// window
window.addEventListener("message", (event) => {
console.log(event.data);
})
Se agregó seguridad con el atributo sandbox
Si se implementa contenido malicioso en un iframe, es posible que se ejecuten acciones no deseadas (como una ejecución de JavaScript o el envío de un formulario).
Para evitar esto, el atributo sandbox restringe las APIs ejecutables en el iframe y, además, inhabilita las funciones potencialmente dañinas.
<iframe src="https://example.com" sandbox></iframe>
Es posible que Sandbox haga que ciertas APIs que son importantes para tu contenido incorporado no estén disponibles. Para permitir una API inhabilitada, puedes agregar explícitamente un argumento al atributo de la zona de pruebas.
<iframe sandbox="allow-forms" src="https://example.com"></iframe>
Hay una serie de valores posibles para la especificación sandbox, incluidos allow-forms, allow-same-origin, allow-popups y muchos más.
Política de Permisos
A medida que se desarrollaron funciones cada vez más potentes para la Web, se crearon políticas de permisos para administrar los permisos de todos ellos. Se puede aplicar una política de permisos a un sitio superior y al contenido de iframe. Los permisos otorgados a un sitio superior también se pueden otorgar al iframe mediante el atributo allow.
<iframe src="https://example.com" allow="fullscreen"></iframe>
Cómo incorporar con marcos vallados
Un marco con cerca (<fencedframe>) es un elemento HTML propuesto para el contenido incorporado, similar a un iframe. A diferencia de un iframe, un marco vallado restringe la comunicación con su contexto de incorporación para permitir que el marco acceda a datos entre sitios sin compartirlos con el contexto de incorporación. Del mismo modo, los datos de origen de la página superior no se pueden compartir con el marco vallado.
<fencedframe src="https://3rd.party.example"></fencedframe>
Los marcos delimitados son una propuesta de Privacy Sandbox que sugiere que los sitios de nivel superior deben particionar los datos. Muchas de las propuestas de Privacy Sandbox tienen como objetivo satisfacer los casos de uso entre sitios, sin cookies de terceros ni otros mecanismos de seguimiento. Es posible que algunas APIs de Privacy Sandbox requieran que algunos documentos se rendericen dentro de un marco protegido.
Por ejemplo, se creará un marco cercado para el ganador de la subasta de anuncios de la API de FLEDGE. La API de FLEDGE proporcionará una fuente opaca, un esquema de URN independiente de la ubicación, que se puede renderizar dentro de un marco cercado. Las fuentes opacas permiten que los sitios muestren contenido en sus sitios sin revelar la URL de la fuente del anuncio al propietario del sitio.
<fencedframe src="urn:uuid:c36973b5-e5d9-de59-e4c4-364f137b3c7a"></fencedframe>
En última instancia, los marcos vallados no reemplazarán a los iframes. No tendrás que usarlos. Se proponen marcos delimitados para un marco más privado para usar cuando se deben mostrar datos de diferentes particiones de nivel superior en la misma página.
Incorporar con portales
Portal (<portal>) es un elemento HTML propuesto con un contexto de navegación independiente, lo que podría mejorar la experiencia de transición de páginas. Los portales incorporan contenido como iframe, pero el usuario no puede acceder al código del portal. Un portal es de solo lectura y los usuarios no pueden interactuar con él.
Los portales ofrecen la baja complejidad de una aplicación de varias páginas con las transiciones fluidas de una aplicación de una sola página. Estas transiciones se pueden animar y reemplazar rápidamente el contenido de la ventana del navegador.
<portal src="https://example.com/"></portal>
La especificación del portal aún se encuentra en las primeras etapas de desarrollo.
Otros elementos HTML que se usan para incorporaciones
A lo largo de la historia de la Web, se propusieron varios elementos HTML y se crearon APIs para incorporar contenido. Durante un tiempo, era común crear sitios con varios elementos <frame> y <frameset>. Los sitios con varios elementos <frameset> mostraban la URL de la página superior en la barra de direcciones, independientemente de la fuente de los muchos marcos individuales. Esto hacía que fuera difícil compartir vínculos a contenido dentro del sitio. Estas APIs dejaron de estar disponibles.
También hubo un tiempo en el que las tecnologías de complementos, como el elemento <applet> de Java, se usaban para cubrir otros casos de uso. Más tarde, se reemplazó por el elemento <object>. Ambos elementos se usaban comúnmente para mostrar complementos Flash, pero también se usaban para mostrar otros elementos HTML (similares a los iframes).
Otros elementos, como <canvas>, <audio>, <video> y <svg>, hacen que los elementos <object> y <applet> dejen de estar disponibles.
Si bien <object> y <embed> aún no están oficialmente obsoletos, es mejor evitarlos, en especial porque tienen algunos comportamientos extraños.
<applet> se quitó de la especificación HTML en 2017.
Conclusión
Puedes incorporar contenido de forma segura en cualquier sitio web con la especificación de iframe existente. Se propusieron más elementos HTML, incluidos <fencedframe> y <portal>, para mejorar la seguridad y el estilo. Seguiremos compartiendo el progreso de la propuesta de marcos vallados a medida que avance.