O Chrome desativa a modificação de document.domain

Se o site depende da definição de document.domain, é necessário agir.

Maud Nalpas
Eiji Kitamura

O que está mudando e por quê?

A partir do Chrome 115, os sites não poderão definir document.domain: o Chrome vai tornar document.domain imutável. Para se comunicar entre origens, você precisa usar abordagens alternativas, como postMessage() ou a API Channel Messaging.

Essa mudança será lançada progressivamente.

Esperamos que outros navegadores acabem descontinuando e removendo essa funcionalidade. Consulte a seção de compatibilidade do navegador para mais detalhes.

Por que tornar document.domain imutável?

document.domain foi projetado para receber ou definir o nome do host da origem. Muitos sites definem document.domain para permitir a comunicação entre páginas do mesmo site, mas de origens diferentes.

Embora seja uma técnica conveniente, ela introduz um risco de segurança, porque isenta o cumprimento de políticas da mesma origem. As preocupações de segurança em torno de document.domain levaram a uma mudança na especificação que avisa os usuários para evitar o uso dela.

Em detalhes: por que tornar document.domain imutável?

Como document.domain é usado hoje

Muitos sites definem document.domain para permitir a comunicação entre páginas do mesmo site, mas de origens diferentes.

Sites da mesma origem, mas de origens diferentes, têm o mesmo eTLD+1 mas subdomínios diferentes.

Veja como document.domain foi usado até agora:

Digamos que uma página em https://parent.example.com incorpore uma página de iframe de https://video.example.com. Essas páginas têm o mesmo eTLD+1 (example.com) com subdomínios diferentes. Quando o document.domain das duas páginas é definido como 'example.com', o navegador trata as duas origens como se fossem da mesma origem.

Defina o document.domain para https://parent.example.com:

// Confirm the current origin of "parent.example.com"
console.log(document.domain);

// Set the document.domain
document.domain = 'example.com';
console.log(document.domain);

Defina o document.domain para https://video.example.com:

// Confirm the current origin of "video.example.com"
console.log(document.domain);

// Set the document.domain
document.domain = 'example.com';
console.log(document.domain);

Agora você pode criar uma manipulação de DOM de origens diferentes em https://parent.example.com em relação a https://video.example.com.

Os sites definem document.domain para que os documentos do mesmo site possam se comunicar com mais facilidade. Como essa mudança isenta o cumprimento de políticas da mesma origem, a página mãe pode acessar o documento do iframe e percorrer a árvore do DOM, e vice-versa.

Essa é uma técnica conveniente, mas introduz um risco de segurança.

Problemas de segurança com document.domain

As preocupações de segurança em torno de document.domain levaram a uma mudança na especificação que avisa os usuários para evitar o uso dela.

Por exemplo, quando duas páginas definem document.domain, elas podem fingir que são da mesma origem. Isso é particularmente crítico quando essas páginas usam um serviço de hospedagem compartilhada com subdomínios diferentes. A definição de document.domain abre o acesso a todos os outros sites hospedados pelo mesmo serviço, o que facilita o acesso de invasores aos seus sites. Isso é possível porque document.domain ignora a parte do número da porta do domínio.

Para saber mais sobre as implicações de segurança da definição de document.domain, leia a página "Document.domain" no MDN.

Compatibilidade com navegadores

Como saber se meu site foi afetado?

Se o site for afetado por essa mudança, o Chrome vai avisar no painel "Problemas" do DevTools. Esse aviso foi adicionado em 2022. Observe a bandeira amarela no canto superior direito do DevTools.

Captura de tela do aviso de problema no DevTools

Você também pode executar o site na auditoria de API descontinuada do LightHouse para encontrar todas as APIs programadas para serem removidas do Chrome.

Se você configurou a API Reporting, o Chrome enviou relatórios de descontinuação para notificar sobre essa descontinuação futura. Saiba mais sobre como usar a API Reporting com serviços de coleta de relatórios atuais ou criando sua própria solução interna.

Como posso ver essa mudança em ação?

A mudança será lançada progressivamente, começando no Chrome 115. Para ver essa mudança em ação, mesmo que ela ainda não tenha sido lançada no navegador Chrome, ative-a da seguinte maneira:

  1. Abra chrome://flags/#origin-agent-cluster-default
  2. Selecione Ativar.
  3. Reinicie o Google Chrome.

Quais alternativas posso usar?

A melhor opção é não modificar document.domain, por exemplo, hospedando a página e todos os frames constituintes na mesma origem. Isso funciona em todas as versões de todos os navegadores. No entanto, isso pode exigir uma reformulação substancial de um aplicativo. Portanto, também vale a pena analisar alternativas que continuam oferecendo suporte a acessos de origens diferentes.

Use postMessage() ou a API Channel Messaging em vez de document.domain

Na maioria dos casos de uso, de origens diferentes postMessage() ou a API Channel Messaging podem substituir document.domain.

No exemplo a seguir:

  1. https://parent.example.com solicita https://video.example.com em um iframe para manipular o DOM enviando uma mensagem por postMessage().
  2. https://video.example.com manipula o DOM assim que recebe a mensagem e notifica o sucesso de volta ao pai.
  3. https://parent.example.com reconhece o sucesso.

Em https://parent.example.com:

// Send a message to https://video.example.com
iframe.postMessage('Request DOM manipulation', 'https://video.example.com');

// Receive messages
iframe.addEventListener('message', (event) => {
  // Reject all messages except ones from https://video.example.com
  if (event.origin !== 'https://video.example.com') return;

  // Filter success messages
  if (event.data === 'succeeded') {
    // DOM manipulation is succeeded
  }
});

Em https://video.example.com:

// Receive messages
window.addEventListener('message', (event) => {
  // Reject all messages except ones from https://parent.example.com
  if (event.origin !== 'https://parent.example.com') return;

  // Do a DOM manipulation on https://video.example.com.

  // Send a success message to https://parent.example.com
  event.source.postMessage('succeeded', event.origin);
});

Teste e veja como funciona. Se você tiver requisitos específicos que não funcionam com postMessage() ou a API Channel Messaging, entre em contato pelo Twitter via @ChromiumDev ou faça uma pergunta no Stack Overflow com uma tag document.domain.

Como último recurso, envie o cabeçalho Origin-Agent-Cluster: ?0

Se você tiver motivos fortes para continuar definindo document.domain, envie o cabeçalho de resposta Origin-Agent-Cluster: ?0 com o documento de destino.

Origin-Agent-Cluster: ?0

O cabeçalho Origin-Agent-Cluster instrui o navegador se o documento precisa ser processado pelo cluster de agente com chave de origem ou não. Para saber mais sobre Origin-Agent-Cluster, leia Solicitar isolamento de performance com o cabeçalho Origin-Agent-Cluster.

Quando você envia esse cabeçalho, o documento pode continuar definindo document.domain mesmo depois que ele se tornar imutável por padrão.

Todos os outros documentos que exigem esse comportamento também precisam enviar um Origin-Agent-Cluster. Observe que document.domain não tem efeito se apenas um documento o definir.

Configurar OriginAgentClusterDefaultEnabled para a política empresarial

Opcionalmente, o administrador pode configurar a política OriginAgentClusterDefaultEnabled como false para tornar document.domain definível por padrão em instâncias do Chrome na sua organização. Para saber mais, leia Gerenciamento e lista de políticas do Chrome Enterprise | Documentação.

Recursos

Agradecimentos

Foto de Finan Akbar no Unsplash