Incorpora contenido de forma segura en una página 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 los
similar a un iframe. A diferencia de los iframes, un marco vallado restringe
con su contexto de incorporación para permitir que la trama acceda a
datos sin compartirlos con el contexto de incorporación. Algunas APIs de Privacy Sandbox
Es posible que se requiera que ciertos documentos se rendericen en un marco cercado.
Del mismo modo, no se pueden compartir los datos de origen en el contexto de incorporación con el marco vallado.
Por ejemplo, supongamos que news.example (el contexto de incorporación) incorpora un anuncio de
shoes.example en un marco cercado. news.example no puede robar datos de
el anuncio shoes.example, y shoes.example no pueden obtener datos de origen de
news.example
Fortalece la privacidad entre sitios con la partición de almacenamiento
Mientras navegabas por la Web, probablemente miraste productos en un sitio y, luego, los volviste a ver en un anuncio en un sitio completamente distinto.
Hoy en día, esta técnica publicitaria se logra principalmente a través del seguimiento tecnología que usa cookies de terceros para compartir información entre sitios. Esta es la tecnología que Chrome se comprometió a descifrar y reemplazarlas por más variantes que preserven la privacidad.
Chrome está trabajando en el almacenamiento
la partición, 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 de shoes.example. Cuando el almacenamiento se haya
los iframes particionados y entre sitios ya no compartirán el almacenamiento.
shoes.example no podrá acceder a la información almacenada por el iframe. Si
el iframe se publica desde *.shoes.example y se incorpora en
*.shoes.example, el almacenamiento del navegador se compartirá, ya que se consideran en el mismo sitio.
La partición de almacenamiento se aplicará a las APIs de Standard Storage, incluidas LocalStorage, IndexedDB y cookies. En un mundo particionado, la información la fuga en el almacenamiento propio se reducirá de forma significativa.
Trabajar con datos de varios sitios
Los marcos vallados son una función de Privacy Sandbox lo que sugiere que los sitios de nivel superior deben particionar los datos. Muchos Privacy Sandbox El objetivo de las propuestas y las APIs es satisfacer los 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 basada en intereses de una manera que preserve la privacidad.
- El almacenamiento compartido permite acceso a datos entre sitios no particionados en un entorno seguro.
Veamos cómo los marcos vallados podrían funcionar con el API de Protected Audience: Con la API de Protected Audience, los intereses de un usuario Están registrados en el sitio de un anunciante en interés grupos, además de los anuncios pueden ser de interés para el usuario. Luego, en otro sitio (conocido como "publicador"), los anuncios registrados en los grupos de intereses relevantes se subastan y El anuncio ganador se muestra en un marco vallado.
Si el publicador muestra el anuncio ganador en un iframe y la secuencia de comandos puede leer la
atributo src del iframe, el publicador puede inferir información sobre la
intereses de la URL del anuncio. Esto no preserva la privacidad.
Con un marco cercado, el publicador puede mostrar un anuncio que coincida con el visitante.
intereses, pero el src y el grupo de interés solo serán conocidos para el anunciante
dentro 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 la operación de selección de URL del almacenamiento compartido. Luego, el objeto de configuración se establece como el atributo config en el elemento de marco vallado. Esto es distinto 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 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 incorporación. Sin embargo, un marco vallado puede usar postMessage con iframes dentro del marco vallado.
Los marcos vallados se aislarán del editor de otras formas. Por ejemplo:
el publicador no tendrá acceso al DOM dentro de un marco vallado, y el
marco vallado no puede acceder al DOM del editor. Además, atributos como
name, que puede establecerse en cualquier valor y observarse por el
no están disponibles en marcos vallados.
Los marcos vallados se comportan como una navegación de nivel superior.
contexto
(como una pestaña del navegador). Aunque un marco vallado en ciertos casos de uso
(como opaque-ads) pueden contener datos entre sitios (como un interés en la API de Protected Audience).
grupo), el marco no puede acceder a cookies ni almacenamiento no particionados. Los
opaque-ads marco vallado puede acceder a una cookie y almacenamiento únicos basados en nonce
por cada partición.
Las características de los marcos vallados se detallan aún más en el explicación.
¿Cómo se comparan los marcos vallados con los iframes?
Ahora que sabes lo que los marcos vallados servirán y los que no, es útil comparar a las funciones de iframe existentes.
| Función | 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í (según el caso de uso) |
Fuente opaca administrada por el navegador (urn:uuid) |
No | Sí |
| Acceso a datos de varios sitios | No | Sí (según el 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 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 (también conocidos como iframes compatibles) se consideran confiables contenido.
Usa marcos vallados
Los marcos vallados funcionarán en combinación con otras APIs de Privacy Sandbox para hacer lo siguiente: mostrar documentos de diferentes particiones de almacenamiento en una sola página. Se están analizando las posibles APIs.
Entre los candidatos actuales para esta combinación, se incluyen los siguientes:
- De la familia TURTLEDOVE API (que es la base de la API de Protected Audience), los marcos vallados podrían funcionar con Efectividad de conversiones Medición con el almacenamiento compartido.
- Otra opción es permitir que los marcos vallados se solo lectura o acceder sin particiones almacenamiento.
Para obtener más información, consulta el artículo Marcos vallados explicación de casos de uso.
Ejemplos
Para obtener un objeto config de marco vallado, debes pasar resolveToConfig: true a la llamada runAdAuction() de la API de Protected Audience o a 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 haya resuelto a 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 sobre la configuración de Marco vallado y Marco vallado.
Encabezados
Los navegadores configurarán Sec-Fetch-Dest: fencedframe para las solicitudes realizadas desde iframes y marcos vallados que estén incorporados dentro de un marco vallado.
Sec-Fetch-Dest: fencedframe
El servidor debe establecer el encabezado de respuesta Supports-Loading-Mode: fenced-frame para que un documento se cargue en un marco vallado. El encabezado también debe estar presente para los iframes dentro de un marco vallado.
Supports-Loading-Mode: fenced-frame
Contexto de almacenamiento compartido
Te recomendamos usar la agregación privada para informar datos a nivel del evento en marcos vallados asociados con datos contextuales de la incorporación. Si usas el método fencedFrameConfig.setSharedStorageContext(), puedes pasar algunos datos contextuales, como un ID de evento, del incorporaciones a los worklets 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 datos disponibles en el marco vallado en almacenamiento compartido. Desde 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 de fotogramas.
Desde la página de incorporaciones, puedes configurar datos contextuales como 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 de evento del marco al worklet del 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 de la incorporación desde sharedStorage.context y los datos a nivel de evento del marco desde el objeto data y, luego, informarlos a través de la agregación privada:
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.contributeToHistogram({
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 Chrome
marcas como
Habilitar la API de Fenced Frame en chrome://flags/#enable-fenced-frames
Hay varias opciones en el diálogo. Te recomendamos que selecciones *Habilitar*, que permite que Chrome se actualice automáticamente a la nueva arquitectura a medida que están disponibles.
Las otras opciones, Enabled with ShadowDOM y Enabled with multiple de Google Cloud, ofrecen diferentes estrategias de implementación que solo relevantes para los ingenieros de navegadores. Actualmente, Habilitar funciona de la misma manera que Habilitado 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 definieron marcos vallados, haz lo siguiente:
if (window.HTMLFencedFrameElement) {
// The fenced frame element is defined
}
Para determinar si la configuración del marco vallado 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 está en modo experimental, por lo que se encuentra
compatible a partir de Chrome 97. Por el momento, no es compatible con otros
navegadores.
Interactúa y comparte tus comentarios
Los marcos cercados se encuentran en discusión activa 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, generar preguntas y seguir debate.
- Asistencia para desarrolladores: Haz preguntas y únete a debates en el Asistencia para desarrolladores de Privacy Sandbox repo.