Cómo renderizar un anuncio

Cuando una subasta de Protected Audience devuelve un candidato a anuncio, este se puede devolver como un URN opaco, que se usa para renderizar un anuncio en un iframe, o un FencedFrameConfig, que se usa para renderizar el anuncio en un iframe delimitado.

En esta guía, se explicará qué es un iframe delimitado y por qué es necesario, además de cómo renderizar un anuncio con cualquiera de los métodos. Para obtener una visión más detallada de los fenced frames, consulta esta guía o la propuesta.

¿Qué son los marcos vallados?

Un fenced frame (<fencedframe>) es un elemento HTML para contenido incorporado, similar a un iframe. A diferencia de los iframe, un fenced frame restringe la comunicación con su contexto de incorporación para permitir que el frame acceda a datos entre sitios sin compartirlos con el contexto de incorporación. Del mismo modo, no se pueden compartir con el marco delimitado los datos de origen que se encuentren en el contexto de la incorporación.

Por ejemplo, supongamos que news.example (el contexto de la incorporación) incorpora un anuncio de shoes.example en un iframe cercado. news.example no puede exfiltrar datos del anuncio de shoes.example, y shoes.example no puede obtener datos de origen de news.example.

¿Cómo funcionan los fenced frames?

Los marcos cercados usan el objeto FencedFrameConfig para la navegación. Este objeto se puede devolver desde una subasta de Protected Audience. Luego, el objeto de configuración se establece como el atributo config en el elemento de marco delimitado. Esto difiere de un iframe, en el que se asigna una URL o un URN opaco al atributo src. El objeto FencedFrameConfig tiene una propiedad url de solo lectura. Sin embargo, dado que los casos de uso actuales requieren que se oculte la URL real del recurso interno, esta propiedad devuelve la cadena opaca cuando se lee.

Un marco vallado no puede usar postMessage para comunicarse con su incorporador. Sin embargo, un iframe delimitado puede usar postMessage con iframes dentro del iframe delimitado.

Los marcos delimitados se aislarán del publicador de otras maneras. El publicador no tendrá acceso al DOM dentro de un iframe delimitado, y el iframe delimitado no podrá acceder al DOM del publicador. Además, los atributos como name, que el publicador puede establecer en cualquier valor y observar, no están disponibles en los fenced frames.

Los marcos delimitados se comportan como un contexto de navegación de nivel superior (como una pestaña del navegador). Si bien un elemento iframe cercado en ciertos casos de uso (como opaque-ads) puede contener datos entre sitios (como un grupo de interés de la API de Protected Audience), el iframe no puede acceder al almacenamiento ni a las cookies sin particionar. Un opaque-ads iframe delimitado puede acceder a una partición de almacenamiento y cookies única basada en nonce.

Las características de los fenced frames se detallan más en el explicador.

Renderiza un anuncio en un iframe cercado

Se devuelve un FencedFrameConfig de una subasta de Protected Audience, siempre que el parámetro resolveToConfig de AuctionConfigs se haya establecido como verdadero:

const frameConfig = await navigator.runAdAuction({
  // ...auction configuration
  resolveToConfig: true
});

Una vez que obtengas la configuración, puedes asignarla al atributo config de un marco delimitado para navegar el marco al recurso representado por la configuración. Las versiones anteriores de Chrome no admiten la propiedad resolveToConfig, por lo que debes confirmar que la promesa se resolvió en un FencedFrameConfig antes de navegar:

if (window.FencedFrameConfig && frameConfig instanceof FencedFrameConfig) {
  const frame = document.createElement('fencedframe');
  frame.config = frameConfig;
}