Descripción general de los marcos vallados

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

¿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.

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.

Más información

• Estado de la plataforma Chrome
• Intermitir intents para Prototipar