Incorpora contenido en una página de forma segura, sin compartir datos entre sitios.
Estado de implementación
En este documento, se describe un nuevo elemento HTML: <fencedframe>.
- La propuesta Marcos protegidos ahora está disponible de forma general.
- Estado de la plataforma Chrome
| Propuesta | Estado |
|---|---|
| Cambios en la API web de urn a la configuración Explicación |
Disponible en Chrome a partir del 1er trimestre de 2023. |
| Macros de creatividades en marcos cercados para los informes de anuncios (FFAR) Problema de GitHub |
Disponible en Chrome a partir del 3er trimestre de 2023. |
| Envía pixeles contadores automáticos una vez Problema de GitHub |
Disponible en Chrome a partir del 3er trimestre de 2023. |
| Opciones de configuración de marcos cercados serializables Problema de GitHub |
Disponible en Chrome a partir del 3er trimestre de 2023. |
| Opción de formato adicional para macros de tamaño de anuncio de Protected Audience Problema de GitHub |
Disponible en Chrome a partir del 4° trimestre de 2023. |
| Píxeles contadores automáticos que se envían a todas las URLs registradas Problema de GitHub | Problema con GitHub |
Disponible en Chrome a partir del 4° trimestre de 2023. |
| Habilitar la opción para dejar grupos de interés en los anuncios de iFrames de Urn y de marcos de componentes de anuncios
Problema de GitHub |
Disponible en Chrome a partir del primer trimestre de 2024 |
| Presentación Reserve.top_navigation_start/commit
Problema de GitHub, problema de GitHub |
Disponible en Chrome a partir del primer trimestre de 2024 |
| No inhabilitar la configuración de cookies en ReportEvent hasta 3PCD
Problema de GitHub |
Disponible en Chrome a partir del primer trimestre de 2024 |
| Se agregó compatibilidad con píxeles contadores automáticos en submarcos de origen cruzado
Problema de GitHub |
Disponible en Chrome a partir del primer trimestre de 2024 |
¿Por qué necesitamos marcos vallados?
Un marco vallado (<fencedframe>) es un elemento HTML para contenido incorporado, similar a un iframe. A diferencia de los iframes, 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. Algunas APIs de Privacy Sandbox pueden requerir documentos seleccionados para renderizar en un marco vallado.
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.
Refuerza la privacidad entre sitios con la partición de almacenamiento
Cuando navegas por la Web, es probable que hayas visto productos en un sitio y, luego, hayas visto que volvieran a aparecer en un anuncio en un sitio completamente diferente.
En la actualidad, esta técnica de publicidad se logra principalmente a través de una tecnología de seguimiento que utiliza cookies de terceros para compartir información entre sitios. Esta es una tecnología que Chrome se comprometió a eliminar gradualmente y reemplazar por variantes que preservan la privacidad.
Chrome está trabajando en la partición de almacenamiento, que separa el almacenamiento del navegador por sitio. Actualmente, si un iframe de shoes.example está incorporado en news.example, y ese iframe almacena un valor en el almacenamiento, ese valor se puede leer desde el sitio shoes.example. Cuando el almacenamiento esté particionado, los iframes entre sitios ya no compartirán el almacenamiento, por lo que shoes.example no podrá acceder a la información almacenada por el iframe. Si el iframe se entrega desde *.shoes.example y se incorpora en *.shoes.example, el almacenamiento del navegador se compartirá, ya que se consideran del mismo sitio.
La partición de almacenamiento se aplicará a las APIs de almacenamiento estándar, incluidos LocalStorage, IndexedDB y cookies. En un mundo con particiones, la filtración de información en el almacenamiento propio se reducirá de forma significativa.
Trabajar con datos entre sitios
Los marcos vallados son una función de Privacy Sandbox que sugiere que los sitios de nivel superior deben particionar los datos. Muchas propuestas y APIs de Privacy Sandbox tienen como objetivo satisfacer casos de uso entre sitios sin cookies de terceros ni otros mecanismos de seguimiento. Por ejemplo:
- La API de Protected Audience permite la publicación de anuncios basados en intereses de una manera que preserva la privacidad.
- El almacenamiento compartido permite el acceso a datos entre sitios no particionados en un entorno seguro.
Veamos cómo podrían funcionar los fotogramas vallados con la API de Protected Audience. Con la API de Protected Audience, los intereses de un usuario se registran en el sitio de un anunciante en grupos de interés, junto con anuncios que pueden ser de su interés. Luego, en un sitio separado (conocido como "publicador"), los anuncios registrados en los grupos de intereses relevantes se subastan y el anuncio ganador se muestra en un marco cercado.
Si el publicador muestra el anuncio ganador en un iframe y la secuencia de comandos puede leer el atributo src del iframe, el publicador puede inferir información sobre los intereses del visitante a partir de la URL de ese anuncio. Esto no preserva la privacidad.
Con un marco vallado, el publicador podría mostrar un anuncio que coincida con los intereses de los visitantes, pero el src y el grupo de interés solo conocerán el anunciante del marco. El editor no pudo acceder a esta información.
¿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 la API de Protected Audience o una operación de selección de URL del almacenamiento compartido. Luego, se configura el objeto de configuración como el atributo config en el elemento de marco vallado. Es diferente de un iframe en el que se asigna una URL o una URN opaca al atributo src. El objeto FencedFrameConfig tiene una propiedad url de solo lectura. Sin embargo, como los casos de uso actuales requieren que se oculte la URL real del recurso interno, esta propiedad muestra la cadena opaque cuando se lee.
Un marco vallado no puede usar postMessage para comunicarse con su incorporado. Sin embargo, un marco vallado puede usar postMessage con iframes dentro del marco vallado.
Los marcos vallados se aislarán del publicador de otras maneras. Por ejemplo, el publicador 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 para el publicador y que este observa, no están disponibles en los 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 cookie y partición de almacenamiento única basada en nonce.
Las características de los marcos vallados se detallan con más detalle en la explicación.
¿Cómo se comparan los marcos vallados con los iframes?
Ahora que sabes qué pueden hacer los marcos vallados y qué no, es útil hacer una comparación con las funciones existentes de iframe.
| Atributo | iframe |
fencedframe |
|---|---|---|
| Incorporar contenido | Sí | Sí |
| El contenido incorporado puede acceder al DOM del contexto de incorporación | Sí | No |
| El contexto de incorporación puede acceder al DOM de contenido incorporado | Sí | No |
Atributos observables, como name |
Sí | No |
URL (http://example.com) |
Sí | Sí (depende del caso de uso) |
Fuente opaca administrada por el navegador (urn:uuid) |
No | Sí |
| Acceso a datos entre sitios | No | Sí (depende del caso de uso) |
Los marcos vallados admiten menos opciones de comunicación externa para preservar la privacidad.
¿Los marcos vallados reemplazarán a los iframes?
En última instancia, los marcos vallados no reemplazarán a los iframes, y no tendrás que usarlos. Los marcos vallados son un marco más privado para su uso cuando los datos de diferentes particiones de nivel superior deben mostrarse en la misma página.
Los iframes del mismo sitio (a veces conocidos como iframes compatibles) se consideran contenido confiable.
Usa marcos cercados
Los marcos vallados funcionarán en combinación con otras APIs de Privacy Sandbox para mostrar documentos de diferentes particiones de almacenamiento en una sola página. En este momento, se están analizando las posibles APIs.
Los candidatos actuales para esta combinación incluyen los siguientes:
- A partir de la familia de la API de TURTLEDOVE (que es la base de la API de Protected Audience), los marcos vallados podrían funcionar con la Medición de Efectividad de conversiones con Almacenamiento compartido.
- Otra opción es permitir que los marcos vallados sean de solo lectura o acceder al almacenamiento no particionado.
Para obtener más detalles, consulta la explicación de casos de uso de marcos protegidos.
Ejemplos
Para obtener un objeto config de marco vallado, debes pasar resolveToConfig: true a la llamada runAdAuction() de la API de Protected Audience o la llamada selectURL() del almacenamiento compartido. Si no se agrega la propiedad (o se establece en false), la promesa resultante se resolverá en un URN que solo se puede usar en un iframe.
const frameConfig = await navigator.runAdAuction({
// ...auction configuration
resolveToConfig: true
});
const frameConfig = await sharedStorage.selectURL('operation-name', {
resolveToConfig: true
});
Una vez que obtengas la configuración, puedes asignarla al 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 FencedFrameConfig antes de navegar:
if (window.FencedFrameConfig && frameConfig instanceof FencedFrameConfig) {
const frame = document.createElement('fencedframe');
frame.config = frameConfig;
}
Para obtener más información, consulta las explicaciones de Marco protegido y Configuración de marco cercado.
Encabezados
Los navegadores configurarán Sec-Fetch-Dest: fencedframe para las solicitudes realizadas a partir de iframes y marcos vallados que se incorporen en un marco vallado.
Sec-Fetch-Dest: fencedframe
El servidor debe establecer el encabezado de respuesta Supports-Loading-Mode: fenced-frame para que se cargue un documento en un marco vallado. El encabezado también debe estar presente para cualquier iframe dentro de un marco vallado.
Supports-Loading-Mode: fenced-frame
Contexto de almacenamiento compartido
Es posible que quieras usar Private Aggregation para generar informes sobre datos a nivel de evento en marcos vallados asociados con datos contextuales del incorporaciones. Si usas el método fencedFrameConfig.setSharedStorageContext(), puedes pasar algunos datos contextuales, como un ID de evento, desde la incorporaciones hasta los trabajos de almacenamiento compartido que inicia la API de Protected Audience.
En el siguiente ejemplo, almacenamos algunos datos disponibles en la página de incorporación y otros en el marco vallado en el almacenamiento compartido. En la página de incorporación, se establece un ID de evento simulado como contexto de almacenamiento compartido. Desde el marco vallado, se pasan los datos de eventos del marco.
Desde la página de incorporación, puedes establecer datos contextuales como el contexto de almacenamiento compartido:
const frameConfig = await navigator.runAdAuction({ resolveToConfig: true });
// Data from the embedder that you want to pass to the shared storage worklet
frameConfig.setSharedStorageContext('some-event-id');
const frame = document.createElement('fencedframe');
frame.config = frameConfig;
Desde el marco vallado, puedes pasar datos a nivel del evento del marco al worklet de almacenamiento compartido (no relacionado con los datos contextuales de la incorporación anterior):
const frameData = {
// Data available only inside the fenced frame
}
await window.sharedStorage.worklet.addModule('reporting-worklet.js');
await window.sharedStorage.run('send-report', {
data: {
frameData
},
});
Puedes leer la información contextual del incorporador desde sharedStorage.context y los datos a nivel de evento del marco desde el objeto data y, luego, informarlos a través de Private Aggregation:
class ReportingOperation {
convertEventIdToBucket(eventId) { ... }
convertEventPayloadToValue(info) { ... }
async run(data) {
// Data from the embedder
const eventId = sharedStorage.context;
// Data from the fenced frame
const eventPayload = data.frameData;
privateAggregation.sendHistogramReport({
bucket: convertEventIdToBucket(eventId),
value: convertEventPayloadToValue(eventPayload)
});
}
}
register('send-report', ReportingOperation);
Para obtener más información sobre el contexto de la incorporación en un objeto de configuración de marco vallado, consulta la explicación.
Prueba los marcos vallados
Usa las marcas de Chrome para habilitar la API de Fenced Frame en chrome://flags/#enable-fenced-frames.
Hay múltiples opciones en el cuadro de diálogo. Te recomendamos que selecciones *Habilitar*, que permite que Chrome se actualice automáticamente a la arquitectura nueva a medida que esté disponible.
Las otras opciones, Habilitado con ShadowDOM y Habilitado con arquitectura de varias páginas, ofrecen diferentes estrategias de implementación que solo son relevantes para los ingenieros del navegador. En la actualidad, la opción Habilitar funciona de la misma manera que Habilitada con ShadowDOM. En el futuro, la opción Habilitar se asignará a Habilitar con arquitectura de varias páginas.
Detección de funciones
Para determinar si se definen marcos vallados, haz lo siguiente:
if (window.HTMLFencedFrameElement) {
// The fenced frame element is defined
}
Para determinar si la configuración de marcos vallados está disponible, haz lo siguiente:
js
if (window.FencedFrameConfig && frameConfig instanceof FencedFrameConfig) {
// The fenced frame config is available
}
Navegadores compatibles
El elemento <fencedframe> aún se encuentra en modo experimental, por lo que actualmente es compatible a partir de Chrome 97. En este momento, no es compatible con otros navegadores.
Interactúa y comparte comentarios
Los marcos vallados se encuentran en debate activo y están sujetos a cambios en el futuro. Si pruebas esta API y tienes comentarios, nos encantaría recibirlos.
- GitHub: Lee la explicación, plantea preguntas y sigue el debate.
- Asistencia para desarrolladores: Haz preguntas y únete a debates en el repo de asistencia para desarrolladores de Privacy Sandbox.