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

Este documento descreve um novo elemento HTML: <fencedframe>.

• Em disponibilidade geral no Chrome.
• Status da plataforma do 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, os 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 do Sandbox de privacidade podem exigir que determinados documentos 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á exfiltrar dados do anúncio de 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.

Hoje, essa técnica publicitária é alcançada principalmente por meio de tecnologia de rastreamento que usa cookies de terceiros para compartilhar informações em 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 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, o shoes.example não consegue 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 às APIs de armazenamento padrão, incluindo LocalStorage, IndexedDB e cookies. Em um mundo particionado, o vazamento de informações no armazenamento primário 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 visam atender a 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 Shared Storage 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, junto com anúncios que podem ser do interesse do usuário. Em seguida, em um site separado (conhecido como "editor"), os anúncios registrados em grupos de interesse relevantes são leiloados, e o anúncio vencedor é exibido em um frame isolado.

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

Com um frame isolado, o editor pode mostrar 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 editor não conseguiu 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 Shared Storage. 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 um URN opaco é 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 ocultado, essa propriedade retorna a string opaque quando lida.

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

Os frames isolados também serão isolados do publisher de outras maneiras. Por exemplo, o editor não terá acesso ao DOM dentro de um frame isolado, e o frame isolado não poderá acessar o DOM do editor. 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 retargeting com base em interesses) possa conter dados entre sites (como um grupo de interesse da API Protected Audience), ele não pode acessar cookies ou armazenamento não particionado. O frame isolado pode acessar um cookie exclusivo baseado em nonce e uma partição de armazenamento.

As características dos frames isolados são detalhadas no explainer.

Como os frames isolados se comparam aos iframes?

Agora que você sabe o que os frames isolados podem e não podem fazer, é ú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 mais privados para uso quando dados de diferentes partições de nível superior precisam ser mostrados 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 vão funcionar em combinação com outras APIs do Sandbox de privacidade para mostrar documentos de diferentes partições de armazenamento em uma única página. As possíveis APIs estão em discussão.

Os candidatos atuais para essa combinação incluem:

• Da família API TURTLEDOVE (que é a base da API Protected Audience), os frames isolados podem funcionar com a medição de aumento de conversão usando o 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, transmita resolveToConfig: true para a chamada runAdAuction() da API Protected Audience ou a chamada selectURL() do Shared Storage. Se a propriedade não for adicionada (ou for definida como false), a promessa resultante será resolvida em 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. Versões anteriores do Chrome não são compatíveis com a 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 Fenced Frame e configuração do Fenced Frame.

Cabeçalhos

Os navegadores definem 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 em 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 gerar relatórios de dados no nível do evento em frames isolados associados a dados contextuais do incorporador. Ao usar o método fencedFrameConfig.setSharedStorageContext(), é possível 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 outros 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. Do frame isolado, os dados do evento de 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 no nível do evento do frame para o worklet de armazenamento compartilhado (sem relação com os 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 no nível do evento do frame no objeto data. Em seguida, gere relatórios 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 que você selecione *Ativar*, que permite que o Chrome seja atualizado automaticamente para uma 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 estratégias de implementação diferentes que são relevantes apenas para engenheiros de navegadores. Hoje, Ativar funciona da mesma forma que Ativado com ShadowDOM. No futuro, Ativar será mapeado para Ativar 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: js if (window.FencedFrameConfig && frameConfig instanceof FencedFrameConfig) { // The fenced frame config is available }

Suporte ao navegador

• MDN
• Status da plataforma do Chrome

Engajamento e como compartilhar feedback

Os frames isolados estão em discussão e sujeitos a mudanças no futuro. Se você testar essa API e tiver feedback, envie sua opinião.

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

Saiba mais

• Status da plataforma do Chrome
• Blink Intent to Prototype