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

¿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 entre sitios sin compartirlos con el contexto de incorporación. Es posible que algunas APIs de Privacy Sandbox requieran que se rendericen documentos seleccionados dentro de un marco vallado.

Del mismo modo, no se pueden compartir datos propios en el contexto de incorporación con el marco vallado.

Por ejemplo, si news.example (el contexto de incorporación) incorpora un anuncio de shoes.example en un marco vallado, news.example no puede filtrar datos del anuncio de shoes.example, y shoes.example no puede obtener datos propios de news.example.

Fortalece la privacidad entre sitios con la partición de almacenamiento

Mientras navegabas por la Web, es probable que hayas visto productos en un sitio y, luego, los hayas visto aparecer nuevamente en un anuncio en un sitio completamente diferente.

Hoy en día, esta técnica publicitaria se logra principalmente a través de la tecnología de seguimiento que usa cookies de terceros para compartir información entre sitios.

Chrome está trabajando en la partición de almacenamiento, que separa el almacenamiento del navegador por sitio. Sin la partición, si se incorpora un iframe de shoes.example en news.example y ese iframe almacena un valor en el almacenamiento, ese valor se puede leer desde el sitio shoes.example. Cuando se particiona el almacenamiento, 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 publica desde *.shoes.example y se incorpora en *.shoes.example, se compartirá el almacenamiento del navegador, ya que se consideran del mismo sitio.

Comparación del estado de la partición de almacenamiento antes y después

La partición de almacenamiento se aplicará a las APIs de almacenamiento estándar, incluidas LocalStorage, IndexedDB y las cookies. En un mundo particionado, la filtración de información a través del almacenamiento de origen se reducirá significativamente.

Trabaja 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 los casos de uso entre sitios sin cookies de terceros ni otros mecanismos de seguimiento. Por ejemplo:

  • La API de Protected Audience permite publicar anuncios basados en intereses de una manera que preserva la privacidad.
  • Shared Storage permite el acceso a datos entre sitios no particionados en un entorno seguro.

Los marcos vallados están diseñados para funcionar 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 intereses, junto con los anuncios que pueden ser de interés para el usuario. Luego, en un sitio independiente (conocido como "publicador"), se subastan los anuncios registrados en los grupos de intereses pertinentes 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 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 del visitante, pero el src y el grupo de intereses solo serán conocidos por el anunciante en el marco. El publicador no podría 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 desde la operación de selección de URL de Shared Storage. Luego, el objeto de configuración se establece 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 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 incorporador. 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 el marco vallado 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 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 los anuncios de retargeting basados en intereses) puede contener datos entre sitios (como un grupo de intereses de la API de Protected Audience), el marco no puede acceder al almacenamiento ni a las cookies no particionados. El marco vallado puede acceder a una cookie única basada en nonce y a una partición de almacenamiento.

Las características de los marcos vallados se detallan en la explicación.

¿Cómo se comparan los marcos vallados con los iframes?

Ahora que sabes lo que harán y no harán los marcos vallados, es útil compararlos con 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 del contenido incorporado Sí No
Atributos observables, como name Sí No
URLs (http://example.com) Sí Sí (depende del caso de uso)
Fuente opaca administrada por el navegador (urn:uuid) No Sí (depende del caso de uso)
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 usar cuando se deben mostrar datos de diferentes particiones de nivel superior en la misma página.

Los iframes del mismo sitio (a veces conocidos como iframes amigables) se consideran contenido de confianza.

Usa marcos vallados

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. Las APIs potenciales están en debate.

Entre los candidatos actuales para esta combinación, se incluyen los siguientes:

Para obtener más detalles, consulta la explicación de los casos de uso de los marcos vallados.

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() de Shared Storage. 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.

Obtén la configuración del marco vallado de la subasta de la API de Protected Audience
const frameConfig = await navigator.runAdAuction({
  // ...auction configuration
  resolveToConfig: true
});
Obtén la configuración del marco vallado de la selección de URL de Shared Storage
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 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:

Establece la configuración en el atributo de marco vallado
if (window.FencedFrameConfig && frameConfig instanceof FencedFrameConfig) {
  const frame = document.createElement('fencedframe');
  frame.config = frameConfig;
}

Para obtener más información, consulta las explicaciones de los marcos vallados y la configuración de los marcos vallados.

Encabezados

Los navegadores establecerán Sec-Fetch-Dest: fencedframe para las solicitudes realizadas desde marcos vallados y iframes 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 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 Shared Storage

Es posible que desees usar Private Aggregation para informar datos a nivel del evento en marcos vallados asociados con datos contextuales del incorporador. Si usas el método fencedFrameConfig.setSharedStorageContext(), puedes pasar algunos datos contextuales, como un ID de evento, del incorporador a los worklets de Shared Storage iniciados por la API de Protected Audience.

En el siguiente ejemplo, almacenamos algunos datos disponibles en la página del incorporador y algunos datos disponibles en el marco vallado en Shared Storage. Desde la página del incorporador, se establece un ID de evento simulado como el contexto de Shared Storage. Desde el marco vallado, se pasan los datos del evento del marco.

Desde la página del incorporador, puedes establecer datos contextuales como el contexto de Shared Storage:

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 Shared Storage (no relacionados con los datos contextuales del incorporador 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 del 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.contributeToHistogram({
      bucket: convertEventIdToBucket(eventId),
      value: convertEventPayloadToValue(eventPayload)
    });
  }
}

register('send-report', ReportingOperation);

Para obtener más información sobre el contexto del incorporador 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.

En Chrome Experiments, establece Enabled para la marca llamada Enable the Fenced frame element.

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é 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. Hoy en día, Habilitar funciona de la misma manera que Habilitado con ShadowDOM. En el futuro, Habilitar se asignará a Habilitar con arquitectura de varias páginas.

Detección de funciones

Para determinar si se definen los marcos vallados, haz lo siguiente:

if (window.HTMLFencedFrameElement) {
  // The fenced frame element is defined
}

Para determinar si está disponible la configuración del marco vallado, haz lo siguiente:

if (window.FencedFrameConfig && frameConfig instanceof FencedFrameConfig) {
   // The fenced frame config is available
}

Navegadores compatibles

Participa y comparte comentarios

Los marcos vallados están en debate activo y están sujetos a cambios en el futuro. Si pruebas esta API y tienes comentarios, nos encantaría escucharlos.

Más información