Visão geral dos frames delimitados

Incorpore conteúdo a uma página de forma segura sem compartilhar dados entre sites.

Status da implementação

• Agendado para descontinuação.
• Intenção de lançamento: remover o elemento FencedFrame e as APIs window.fence
• Status da plataforma Chrome

Por que precisamos de frames isolados?

Um frame isolado (<fencedframe>) é um elemento HTML para conteúdo incorporado, semelhante a um iframe. Ao contrário dos iframes, frames isolados restringem a comunicação com o contexto de incorporação para permitir o acesso a dados entre sites sem compartilhar frames com esse contexto. Algumas APIs Privacy Sandbox podem exigir que documentos selecionados sejam renderizados em um frame isolado.

Da mesma forma, nenhum dado próprio no contexto de incorporação pode ser compartilhado com o frame isolado.

Por exemplo, se news.example (o contexto de incorporação) incorporar um anúncio de shoes.example em um frame isolado, news.example não poderá extrair dados do anúncio shoes.example, e shoes.example não poderá aprender dados próprios de news.example.

Reforçar a privacidade entre sites com o particionamento de armazenamento

Ao navegar na Web, você provavelmente já viu produtos em um site e depois eles apareceram novamente em um anúncio em um site completamente diferente.

Atualmente, essa técnica de publicidade é realizada principalmente por uma tecnologia de rastreamento que usa cookies de terceiros para compartilhar informações entre sites.

O Chrome está trabalhando no particionamento de armazenamento, que separa o armazenamento do navegador por site. Sem o particionamento, se um iframe de shoes.example for incorporado em news.example e esse iframe armazenar um valor, esse valor poderá ser lido no site shoes.example. Quando o armazenamento é particionado, os iframes entre sites não compartilham mais o armazenamento. Portanto, shoes.example não poderá acessar as informações armazenadas pelo iframe. Se o iframe for veiculado de *.shoes.example e incorporado em *.shoes.example, o armazenamento do navegador será compartilhado, já que eles são considerados do mesmo site.

O particionamento de armazenamento será aplicado a APIs de armazenamento padrão, incluindo LocalStorage, IndexedDB e cookies. Em um mundo particionado, o vazamento de informações no armazenamento próprio será significativamente reduzido.

Trabalhar com dados entre sites

Os frames isolados são um recurso do Sandbox de privacidade que sugere que os sites de nível superior particionem os dados. Muitas propostas e APIs do Sandbox de privacidade têm como objetivo atender casos de uso entre sites sem cookies de terceiros ou outros mecanismos de rastreamento. Exemplo:

• A API Protected Audience permite a veiculação de anúncios com base em interesses de maneira que preserva a privacidade.
• O armazenamento compartilhado permite o acesso a dados não particionados entre sites em um ambiente seguro.

Os frames isolados foram projetados para funcionar com a API Protected Audience. Com a API Protected Audience, os interesses de um usuário são registrados no site de um anunciante em grupos de interesse, juntamente com anúncios que podem ser do interesse do usuário. Em seguida, em um site separado (conhecido como "publisher"), os anúncios registrados em grupos de interesse relevantes são leiloados, e o anúncio vencedor é exibido em um frame isolado.

Se o publisher exibir o anúncio vencedor em um iframe e o script puder ler o atributo src do iframe, o publisher poderá inferir informações sobre os interesses do visitante no URL desse anúncio. Isso não preserva a privacidade.

Com um frame isolado, o publisher pode exibir um anúncio que corresponda aos interesses do visitante, mas o src e o grupo de interesse serão conhecidos apenas pelo anunciante no frame. O publisher não poderá acessar essas informações.

Como os frames isolados funcionam?

Os frames isolados usam o objeto FencedFrameConfig para navegação. Esse objeto pode ser retornado de um leilão da API Protected Audience ou da operação de seleção de URL do armazenamento compartilhado. Em seguida, o objeto de configuração é definido como o atributo config no elemento de frame isolado. Isso é diferente de um iframe em que um URL ou URN opaco URN é atribuído ao atributo src. O objeto FencedFrameConfig tem uma propriedade url somente leitura. No entanto, como os casos de uso atuais exigem que o URL real do recurso interno seja oculto, essa propriedade retorna a string opaque quando lida.

Um frame isolado não pode usar postMessage para se comunicar com o incorporador. No entanto, um frame isolado pode usar postMessage com iframes dentro do frame isolado.

Os frames isolados serão isolados do publisher de outras maneiras. Por exemplo, o publisher não terá acesso ao DOM dentro de um frame isolado, e o frame isolado não poderá acessar o DOM do publisher. Além disso, atributos como name, que podem ser definidos como qualquer valor e observados pelo publisher, não estão disponíveis em frames isolados.

Os frames isolados se comportam como um contexto de navegação de nível superior (como uma guia do navegador). Embora um frame isolado em determinados casos de uso (como anúncios de remarketing com base em interesses) possa conter dados entre sites (como um grupo de interesse da API Protected Audience ), o frame não pode acessar armazenamento ou cookies não particionados. O frame isolado pode acessar uma partição de armazenamento e cookie exclusiva baseada em nonce.

As características dos frames isolados são detalhadas na explicação.

Como os frames isolados se comparam aos iframes?

Agora que você sabe o que os frames isolados fazem e não fazem, é útil comparar com os recursos de iframe atuais.

Os frames isolados oferecem menos opções de comunicação externa para preservar a privacidade.

Os frames isolados vão substituir os iframes?

Em última análise, os frames isolados não vão substituir os iframes, e você não precisará usá-los. Os frames isolados são um frame mais particular para uso quando dados de diferentes partições de nível superior precisam ser exibidos na mesma página.

Os iframes do mesmo site (às vezes conhecidos como iframes amigáveis) são considerados conteúdo confiável.

Usar frames isolados

Os frames isolados funcionam em combinação com outras APIs Privacy Sandbox para exibir documentos de diferentes partições de armazenamento em uma única página. As APIs em potencial estão em discussão.

Os candidatos atuais para essa combinação incluem:

• Da família de APIs TURTLEDOVE (que é a base da API Protected Audience), os frames isolados podem funcionar com a medição de Conversion Lift usando Armazenamento compartilhado.
• Outra opção é permitir que os frames isolados sejam somente leitura ou acessem o armazenamento não particionado.

Para mais detalhes, consulte a explicação dos casos de uso de frames isolados.

Exemplos

Para receber um objeto config de frame isolado, é necessário transmitir resolveToConfig: true para a chamada runAdAuction() da API Protected Audience ou a chamada selectURL() do armazenamento compartilhado. Se a propriedade não for adicionada (ou for definida como false), a promessa resultante será resolvida para um URN que só poderá ser usado em um iframe.

const frameConfig = await navigator.runAdAuction({
  // ...auction configuration
  resolveToConfig: true
});

const frameConfig = await sharedStorage.selectURL('operation-name', {
  resolveToConfig: true
});

Depois de receber a configuração, você pode atribuí-la ao atributo config de um frame isolado para navegar até o recurso representado pela configuração. As versões anteriores do Chrome não oferecem suporte à propriedade resolveToConfig. Portanto, ainda é necessário confirmar se a promessa foi resolvida para um FencedFrameConfig antes de navegar:

if (window.FencedFrameConfig && frameConfig instanceof FencedFrameConfig) {
  const frame = document.createElement('fencedframe');
  frame.config = frameConfig;
}

Para saber mais, consulte as explicações sobre o frame isolado e a configuração do frame isolado.

Cabeçalhos

Os navegadores vão definir Sec-Fetch-Dest: fencedframe para solicitações feitas de frames isolados e iframes incorporados em um frame isolado.

Sec-Fetch-Dest: fencedframe

O servidor precisa definir o cabeçalho de resposta Supports-Loading-Mode: fenced-frame para que um documento seja carregado em um frame isolado. O cabeçalho também precisa estar presente para todos os iframes dentro de um frame isolado.

Supports-Loading-Mode: fenced-frame

Contexto de armazenamento compartilhado

Talvez você queira usar a agregação privada para informar dados de eventos em frames isolados associados a dados contextuais do incorporador. Ao usar o método fencedFrameConfig.setSharedStorageContext(), você pode transmitir alguns dados contextuais, como um ID de evento, do incorporador para worklets de armazenamento compartilhado iniciados pela API Protected Audience.

No exemplo a seguir, armazenamos alguns dados disponíveis na página do incorporador e alguns dados disponíveis no frame isolado no armazenamento compartilhado. Na página do incorporador, um ID de evento simulado é definido como o contexto de armazenamento compartilhado. No frame isolado, os dados de eventos do frame são transmitidos.

Na página do incorporador, é possível definir dados contextuais como o contexto de armazenamento compartilhado:

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;

No frame isolado, é possível transmitir dados de eventos do frame para o worklet de armazenamento compartilhado (não relacionados aos dados contextuais do incorporador acima):

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
  },
});

É possível ler as informações contextuais do incorporador em sharedStorage.context e os dados de eventos do frame no objeto data e, em seguida, informá-los usando a agregação 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 saber mais sobre o contexto do incorporador em um objeto de configuração de frame isolado, consulte a explicação.

Testar frames isolados

Use as flags do Chrome para ativar a API Fenced Frame em chrome://flags/#enable-fenced-frames.

Há várias opções na caixa de diálogo. Recomendamos selecionar *Ativar*, que permite que o Chrome seja atualizado automaticamente para a nova arquitetura assim que ela estiver disponível.

As outras opções, Ativado com ShadowDOM e Ativado com arquitetura de várias páginas, oferecem diferentes estratégias de implementação que são relevantes apenas para engenheiros de navegador. Atualmente, Ativar funciona da mesma maneira que Ativado com ShadowDOM. No futuro, Ativar será mapeado para Ativado com arquitetura de várias páginas.

Detecção de recursos

Para determinar se os frames isolados estão definidos:

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

Para determinar se a configuração de frame isolado está disponível:

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

Suporte ao navegador

• MDN
• Status da plataforma Chrome

Interagir e compartilhar feedback

Os frames isolados estão em discussão ativa e sujeitos a mudanças no futuro. Se você testar essa API e tiver feedback, gostaríamos de recebê-lo.

• GitHub: leia a explicação, faça perguntas e acompanhe a discussão.

Saiba mais

• Status da plataforma Chrome
• Intenção de prototipagem do Blink