El contenido incorporado es la mejor manera de mantener a los usuarios en tu sitio mientras se comparte contenido de otras páginas o sitios. Puede ser tan pequeño como un tweet incorporado, que se muestre con 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 sean seguros cuando incorporamos contenido.
Existen varias formas en que los desarrolladores pueden incorporar contenido en un sitio web. 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 hacer que un iframe sea más seguro.
Como alternativa, puedes utilizar un elemento HTML propuesto:
<fencedframe>se propone como una forma de incorporar contenido de terceros que preserva la privacidad.- Se propone
<portal>para 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 utilizar 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 sesiones y documento. El contexto que incorpora el iframe se conoce como contexto de navegación parent.
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 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);
})
Seguridad adicional con el atributo sandbox
Si se implementa contenido malicioso en un iframe, es posible que se ejecuten acciones no deseadas (como la 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>
Sandbox puede hacer que ciertas APIs no estén disponibles que son importantes para el contenido incorporado. Para permitir una API inhabilitada, puedes agregar de forma explícita 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 de 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 con el fin de 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>
Incorporar con marcos vallados
Un marco vallado (<fencedframe>) es un elemento HTML propuesto para 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 de varios 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>
La función Fenced Frames es 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 casos de uso entre sitios, sin cookies de terceros ni otros mecanismos de seguimiento. Es posible que algunas APIs de Privacy Sandbox requieran documentos seleccionados para renderizarlos dentro de un marco vallado.
Por ejemplo, se creará un marco vallado 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 vallado. Las fuentes opacas permiten que los sitios muestren contenido 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 usarlas. Se proponen marcos vallados para que su uso sea más privado cuando los datos de distintas particiones de nivel superior deben mostrarse en la misma página.
Incorporar con portales
El portal (<portal>) es un elemento HTML propuesto con un contexto de navegación independiente, que podría mejorar la experiencia de transición de la página. 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 en 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 utilizados para incorporaciones
A lo largo del historial web, se han propuesto una serie de elementos HTML y APIs creadas para incorporar contenido. Durante un tiempo, era común crear sitios con varios elementos <frame> y <frameset>. Los sitios con varios elementos <frameset> muestran la URL de la página superior en la barra de direcciones, independientemente de la fuente de los distintos marcos individuales. Esto dificultaba el uso compartido de vínculos a contenido dentro del sitio. Estas APIs dejaron de estar disponibles.
En una época, también se usaban las tecnologías de complementos, como el elemento <applet> de Java, para abarcar otros casos de uso. Más tarde, se reemplazó por el elemento <object>. Ambos elementos se usaban comúnmente para mostrar complementos de Flash, pero también se usaban para mostrar otros elementos HTML (similares a iframes).
Otros elementos, como <canvas>, <audio>, <video> y <svg>, renderizaron los elementos <object> y <applet>.
Aunque <object> y <embed> aún no están obsoletos oficialmente, es mejor evitarlos, en especial porque tienen algunos comportamientos extraños.
En 2017, se quitó <applet> de la especificación HTML.
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 protegidos a medida que avance.
Hero image de Jackson So.