Incorpore conteúdo em uma página com segurança sem compartilhar dados entre sites.
Status da implementação
Este documento descreve um novo elemento HTML: <fencedframe>.
- A proposta Fenced Frames já está em disponibilidade geral.
- Status da plataforma do Chrome
| Proposta | Status |
|---|---|
| Mudanças na API Web para URn para config Explainer |
Disponível no Chrome no 1o trimestre de 2023. |
| Macros de criativos em frames Fenced Frames para relatórios de anúncios (FFAR, na sigla em inglês) Problema do GitHub |
Disponível no Chrome no 3o trimestre de 2023. |
| Enviar beacons automáticos uma vez Problema no GitHub |
Disponível no Chrome no 3o trimestre de 2023. |
| Configurações de Fenced Frames serializáveis Problema do GitHub |
Disponível no Chrome no 3o trimestre de 2023. |
| Opção de formato adicional para macros de tamanho de anúncios de público-alvo protegido Problema no GitHub |
Disponível no Chrome no 4o trimestre de 2023. |
| Envio de beacons automáticos para todos os URLs registrados Problema no GitHub | Problema no GitHub |
Disponível no Chrome no 4o trimestre de 2023. |
| Ativar a opção "Sair de grupos de interesse de anúncio" de iframes de urna e frames de componentes de anúncio
Problema no GitHub |
Disponível no Chrome no 1o trimestre de 2024 |
| Introduziu o problema reservado.top_navigation_start/commit
ao problema do GitHub e o problema do GitHub. |
Disponível no Chrome no 1o trimestre de 2024 |
| Não desativar a configuração de cookies no ReportEvent até 3PCD
Problema no GitHub |
Disponível no Chrome no 1o trimestre de 2024 |
| Foi adicionado suporte a beacons automáticos em subframes de origem cruzada.
Problema no GitHub |
Disponível no Chrome no 1o trimestre de 2024 |
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, um frame isolado restringe
a comunicação com o contexto de incorporação para permitir que o frame acesse dados entre sites
sem compartilhá-los com o contexto de embedding. Algumas APIs do Sandbox de privacidade
podem exigir que alguns 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, digamos que news.example (o contexto de incorporação) incorpore um anúncio de
shoes.example em um frame isolado. A news.example não pode exfiltrar dados do
anúncio shoes.example, e shoes.example não pode aprender dados próprios do
news.example.
Reforce a privacidade entre sites com o particionamento de armazenamento.
Ao navegar na Web, você provavelmente já olhou produtos em um site e, em seguida, os viu novamente em um anúncio em um site completamente diferente.
Atualmente, essa técnica de publicidade é alcançada principalmente por meio de uma tecnologia de rastreamento que usa cookies de terceiros para compartilhar informações entre sites. Essa é uma tecnologia que o Chrome se comprometeu a descontinuar gradualmente e a substituir por variantes que preservam a privacidade.
O Chrome está trabalhando no particionamento de armazenamento, que separa o armazenamento do navegador por site. Atualmente, se um iframe de shoes.example
estiver incorporado em news.example e esse iframe armazenar um valor no armazenamento,
esse valor poderá ser lido no site shoes.example. Quando o armazenamento for particionado, os iframes entre sites não compartilharão mais o armazenamento. Portanto, o shoes.example não poderá acessar as informações armazenadas pelo iframe. Se
o iframe for veiculado de *.shoes.example e incorporado a
*.shoes.example, o armazenamento do navegador será compartilhado, já que eles são considerados no 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á reduzido significativamente.
Trabalhar com dados entre sites
Os frames delimitados são um recurso do Sandbox de privacidade que sugere que sites de nível superior devem particionar dados. Muitas propostas e APIs do Sandbox de privacidade têm como objetivo 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 armazenamento compartilhado permite o acesso a dados não particionados entre sites em um ambiente seguro.
Vamos considerar como os frames delimitados podem 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 relevantes para ele. Depois, em um site separado (conhecido como "editor"), os anúncios registrados nos grupos de interesse relevantes são leiloados, e o anúncio vencedor é exibido em um frame isolado.
Se o editor exibir 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 a partir do URL desse 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 só vão ser conhecidos pelo anunciante
no frame. O editor não conseguiu acessar essas informações.
Como os frames isolados funcionam?
Os frames delimitados usam o objeto FencedFrameConfig para navegação. Esse objeto pode ser retornado de um leilão da API Protected Audience ou de uma operação de seleção de URL do armazenamento compartilhado. Em seguida, o objeto de configuração é definido como o atributo config no elemento do frame isolado. Ele é diferente de um iframe em que um URL ou 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 fique 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 delimitados serão isolados do editor de outras maneiras. Por exemplo,
o editor não terá acesso ao DOM dentro de um frame isolado, e
esse frame isolado não poderá acessar o DOM do editor. Além disso, atributos como
name, que podem ser definidos com qualquer valor e observados pelo
editor, não estão disponíveis em frames delimitados.
Os frames delimitados se comportam como um contexto de navegação de
nível superior
(como uma guia do navegador). Ainda que um frame isolado em determinados casos de uso
(como opaque-ads) 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. Um
frame isolado opaque-ads pode acessar um cookie e uma partição de armazenamento
exclusivos.
Confira mais detalhes sobre as características dos frames delimitados na explicação.
Qual é a diferença entre os frames isolados e os iframes?
Agora que você sabe o que os frames delimitados podem ou não fazer, é útil comparar com os recursos de iframe existentes.
| Recurso | iframe |
fencedframe |
|---|---|---|
| Incorporar conteúdo | Sim | Sim |
| O conteúdo incorporado pode acessar o DOM do contexto de incorporação | Sim | Não |
| O contexto de embedding pode acessar o DOM de conteúdo incorporado | Sim | Não |
Atributos observáveis, como name |
Sim | Não |
URLs (http://example.com) |
Sim | Sim (dependendo do caso de uso) |
Origem opaca gerenciada pelo navegador (urn:uuid) |
Não | Sim |
| Acesso a dados entre sites | Não | Sim (dependendo do caso de uso) |
Os frames delimitados oferecem menos opções de comunicação externa para preservar a privacidade.
Os frames delimitados substituem os iframes?
Em última análise, os frames delimitados não substituem iframes e você não precisa usá-los. Os frames delimitados são mais particulares para uso quando os dados de diferentes partições de nível superior precisam ser exibidos na mesma página.
Os iframes do mesmo site (também conhecidos como iframes compatíveis) são considerados conteúdo confiável.
Usar frames delimitados
Os frames delimitados vão funcionar com outras APIs do Sandbox de privacidade para mostrar documentos de diferentes partições de armazenamento em uma única página. Possíveis APIs estão em discussão no momento.
Os candidatos atuais para essa combinação incluem:
- Na família da API TURTLEDOVE, que é a base da API Protected Audience, os frames isolados podem funcionar com a medição de Conversion Lift usando o armazenamento compartilhado.
- Outra opção é permitir que os frames isolados sejam somente leitura ou acessem armazenamento não particionado.
Para mais detalhes, consulte a explicação de casos de uso dos frames Fenced.
Exemplos
Para receber um objeto config de frame isolado, transmita resolveToConfig: true para a chamada runAdAuction() da API Protected Audience ou selectURL() do armazenamento compartilhado. Se a propriedade não for adicionada (ou estiver definida como false), a promessa resultante vai ser resolvida em um URN que só pode 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, é possível atribuí-la ao atributo config de um frame isolado para navegar do frame até o recurso representado pela configuração. As versões mais antigas do Chrome não são compatíveis com a propriedade resolveToConfig. Portanto, você ainda precisa confirmar que 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 em Fenced Frame e Fenced Frame.
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 em todos os iframes dentro de um frame isolado.
Supports-Loading-Mode: fenced-frame
Contexto de armazenamento compartilhado
Também é possível usar a agregação privada para relatar dados de evento em frames delimitados 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 os 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 incorporado, um ID de evento simulado é definido como o contexto de armazenamento compartilhado. Os dados do evento do frame são transmitidos a partir do frame isolado.
Na página do incorporador, é possível definir dados contextuais como o contexto do 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, você pode transmitir dados em nível de evento do frame para a worklet de armazenamento compartilhado (não relacionado 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 de sharedStorage.context e os dados no nível do evento do frame do objeto data e informá-los por meio da 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.sendHistogramReport({
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 sinalizações
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 a nova arquitetura quando ela for disponibilizada.
As outras opções, Ativada com ShadowDOM e Ativada com arquitetura de várias páginas, oferecem estratégias de implementação diferentes que são relevantes apenas para engenheiros de navegador. Atualmente, a opção Ativar funciona da mesma forma que a Ativada com o ShadowDOM. No futuro, Ativar será mapeado para Ativar com arquitetura de várias páginas.
Detecção de recursos
Para determinar se os frames delimitados 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
O elemento <fencedframe> ainda está no modo experimental. Por isso, ele tem
suporte a partir do Chrome 97. No momento, ela não é compatível com outros navegadores.
Interaja e compartilhe feedback
Fenced Frames estão em discussão ativa e sujeitos a mudanças no futuro. Se você testar essa API e quiser enviar seu feedback, adoraríamos saber.
- GitHub: leia a explicação, faça perguntas e acompanhe a discussão.
- Suporte ao desenvolvedor: faça perguntas e participe de discussões no repositório de suporte para desenvolvedores do Sandbox de privacidade.