Cuando una subasta de Protected Audience muestra un candidato de anuncio, se puede mostrar 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 marco vallado.
En esta guía, se explicará qué es un marco vallado y por qué es necesario, además de cómo renderizar un anuncio con cualquiera de los métodos. Para obtener información más detallada sobre los fotogramas vallados, obtén más información en esta guía o en la propuesta.
¿Qué son los marcos vallados?
Un marco vallado (<fencedframe>) es un elemento HTML para contenido incorporado, similar a iframe. A diferencia de los objetos 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 en el contexto de incorporación no se pueden compartir con el marco vallado.
Por ejemplo, supongamos que news.example (el contexto de incorporación) incorpora un anuncio de shoes.example en un marco vallado. news.example no puede robar datos del anuncio shoes.example, y shoes.example no puede aprender datos de origen de news.example.
¿Cómo funcionan los marcos vallados?
Los marcos vallados usan el objeto FencedFrameConfig para la navegación. Este objeto se puede mostrar desde una subasta de Protected Audience. Luego, se configura el objeto de configuración como el atributo config en el elemento de marco vallado. 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, como los casos prácticos actuales requieren que se oculte la URL real del recurso interno, esta propiedad muestra la string opaca cuando se lee.
Un marco vallado no puede usar postMessage para comunicarse con su incorporado.
Sin embargo, un marco vallado puede usar postMessage con iframe dentro del marco vallado.
Los marcos vallados se aislarán del publicador de otras maneras. El editor no tendrá acceso al DOM dentro de un marco vallado, y este no podrá acceder al DOM del publicador. Además, los atributos como name, que se pueden establecer en cualquier valor y que el publicador puede observar, no están disponibles en marcos vallados.
Los marcos vallados se comportan como un contexto de navegación de nivel superior (como una pestaña del navegador). Aunque un marco vallado 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 marco no puede acceder al almacenamiento no particionado ni a las cookies. Un marco vallado opaque-ads puede acceder a una partición de almacenamiento y cookies única basada en nonce.
Las características de los marcos vallados se detallan con más detalle en la explicación.
Renderiza un anuncio en un marco vallado
Se muestra una FencedFrameConfig desde una subasta de Protected Audience, siempre que el parámetro resolveToConfig de AuctionConfig se haya configurado como verdadero:
const frameConfig = await navigator.runAdAuction({
// ...auction configuration
resolveToConfig: true
});
Una vez que hayas obtenido la configuración, puedes asignarla a un atributo config de un marco vallado para navegar por 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;
}
Renderiza un anuncio en un iframe
Si AuctionConfig no establece resolveToConfig de forma explícita o si se configura como falso, runAdAuction() muestra un URN opaco. Este URN se puede configurar como un src de iframe para renderizar el anuncio.