credentialless: Iframes Sem Credenciais para Contornar o COEP

Como o atributo credentialless do iframe carrega conteúdo de terceiros num contexto efêmero, sem cookies nem credenciais, permitindo manter Cross-Origin-Embedder-Policy ativo sem exigir CORP dos sites embutidos.

Ativar isolamento de origem cruzada (cross-origin isolation) numa página — necessário para usar recursos como SharedArrayBuffer ou medir memória com precisão — exige enviar o cabeçalho Cross-Origin-Embedder-Policy: require-corp. O problema é que, a partir daí, todo <iframe> de terceiros embutido na página precisa responder com Cross-Origin-Resource-Policy ou CORP, algo que você não controla quando o conteúdo é de outro domínio. O atributo credentialless resolve isso carregando o iframe num contexto efêmero, sem cookies nem credenciais, dispensando essa exigência.

O problema do COEP

Sem credentialless, uma página com COEP ativado simplesmente recusa carregar um iframe de terceiros que não tenha configurado os cabeçalhos corretos:

<!-- Página com Cross-Origin-Embedder-Policy: require-corp -->
<iframe src="https://widget-de-terceiro.com/embed"></iframe>
<!-- Bloqueado se o servidor do widget não enviar CORP -->

Pedir para cada provedor de widget, mapa ou player de vídeo ajustar os próprios cabeçalhos raramente é viável. Antes do credentialless, isso obrigava a escolher entre abrir mão do COEP ou abrir mão de embutir esse conteúdo.

Como funciona o atributo credentialless

Basta adicionar credentialless ao iframe. O navegador carrega o conteúdo num contexto novo, sem acesso a cookies, localStorage ou qualquer credencial da origem que está sendo embutida — como se fosse uma aba anônima só para aquele iframe:

<iframe src="https://widget-de-terceiro.com/embed" credentialless></iframe>

Como o iframe não carrega com credenciais, ele deixa de estar sujeito às regras de COEP: a página pode ter require-corp ativado e ainda assim embutir esse conteúdo, mesmo que o servidor de terceiro não envie nenhum cabeçalho de CORP.

Ativando via JavaScript

O mesmo comportamento pode ser definido programaticamente com a propriedade credentialless do elemento, útil quando o iframe é criado dinamicamente:

const iframe = document.createElement('iframe');
iframe.src = 'https://widget-de-terceiro.com/embed';
iframe.credentialless = true;

document.body.appendChild(iframe);

Antes de depender do recurso, vale checar o suporte em tempo de execução:

if ('credentialless' in HTMLIFrameElement.prototype) {
    iframe.credentialless = true;
} else {
    console.warn('credentialless não suportado neste navegador.');
}

Armazenamento particionado, não compartilhado

Um iframe credentialless não fica totalmente isolado de outros iframes credentialless: cookies e storage criados dentro dele são particionados por um identificador único gerado uma vez por documento de nível superior. Ou seja, dois iframes credentialless da mesma origem, na mesma página, podem compartilhar estado entre si — mas nada disso é visto pela versão "normal" (com credenciais) daquela mesma origem, nem persiste entre recarregamentos da página principal:

<iframe src="https://chat-widget.com/embed" credentialless></iframe>
<iframe src="https://chat-widget.com/notificacoes" credentialless></iframe>
<!-- Os dois podem compartilhar cookies entre si, mas não com
     https://chat-widget.com acessado fora de um iframe credentialless -->

Quando usar

Cuidados

Por não carregar cookies nem credenciais, um iframe credentialless não é adequado para embutir conteúdo que dependa do usuário estar autenticado naquela origem — como um painel logado ou um formulário que exige sessão. Nesses casos, o conteúdo simplesmente carrega como se o usuário nunca tivesse feito login. O recurso também não é Baseline: hoje funciona em navegadores baseados em Chromium, mas ainda não tem suporte no Firefox nem no Safari, então é importante testar o comportamento de fallback antes de depender dele em produção.

Compatibilidade

caniuse

Conclusão

O credentialless destrava um dos maiores atritos de adotar isolamento de origem cruzada: a dependência de que todo conteúdo de terceiro embutido também implemente COEP. Trocando credenciais por um contexto efêmero, ele permite manter o COEP ativo na página principal sem exigir nada dos serviços de terceiros embutidos nela.

Tecnologia:
html

Deixe seu Comentário!

Dúvida, sugestão ou só um "valeu!" — tudo é bem-vindo por aqui.

Comentário
Nome
Email
lock Seu e-mail não será publicado.