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. Podría ser tan pequeño como un Tweet incorporado, que se muestra con el estilo y el 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 sigan siendo 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 preservar la privacidad cuando se incorpora contenido de terceros. - Se propone
<portal>para lograr transiciones de página más fluidas.
Sigue leyendo para obtener más información sobre cómo mejorar la seguridad de tu contenido incorporado.
Incorpora contenido 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 sesiones y documento. El contexto que incorpora el iframe se conoce como contexto de navegación principal.
El contenido de terceros que se muestra en un iframe puede interactuar con el sitio principal a través de postMessage(). Esto permite que los desarrolladores envíen 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 formularios).
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 el entorno de pruebas deje de estar disponibles algunas APIs que son importantes para tu contenido incorporado. Para permitir una API inhabilitada, puedes agregar explícitamente un argumento al atributo de zona de pruebas.
<iframe sandbox="allow-forms" src="https://example.com"></iframe>
Hay varios 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 todas ellas. Se puede aplicar una política de permisos a un sitio principal y al contenido de un iframe. Los permisos otorgados a un sitio principal también se pueden otorgar al iframe con el atributo allow.
<iframe src="https://example.com" allow="fullscreen"></iframe>
Incorporación con marcos vallados
Un fenced frame (<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 entre sitios sin compartirlos con el contexto de incorporación. Del mismo modo, los datos de origen de la página principal no se pueden compartir con el iframe delimitado.
<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 ciertos documentos se rendericen dentro de un marco protegido.
Por ejemplo, se creará un iframe delimitado 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 iframe delimitado. 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 fenced frames no reemplazarán a los iframes. No tendrás que usarlos. Los marcos cercados se proponen como un marco más privado para su uso cuando se deben mostrar datos de diferentes particiones de nivel superior en la misma página.
Incorporación con portales
Portal (<portal>) es un elemento HTML propuesto con un contexto de navegación independiente, 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 pueden ser animadas 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 que se usan para las 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, fue común crear sitios con varios elementos <frame> y un elemento <frameset>. Los sitios con varios elementos <frameset> mostraban la URL de la página principal en la barra de direcciones, independientemente de la fuente de los muchos marcos individuales. Esto dificultaba compartir vínculos a contenido dentro del sitio. Estas APIs ya son obsoletas.
También hubo un momento en que se usaron tecnologías de complementos, como el elemento <applet> de Java, para cubrir otros casos de uso. Más adelante, 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 (de forma similar a los iframes).
Otros elementos, como <canvas>, <audio>, <video> y <svg>, hicieron que los elementos <object> y <applet> quedaran obsoletos.
Si bien <object> y <embed> aún no están oficialmente obsoletos, es mejor evitarlos, sobre todo 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 Fenced Frames a medida que avance.