Chrome disabilita la modifica del dominio document.domain

Se il tuo sito web si basa sull'impostazione di document.domain, è richiesta la tua azione.

Maud Nalpas
Eiji Kitamura

Che cosa cambia e perché?

A partire da Chrome 115, i siti web non potranno impostare document.domain: Chrome renderà document.domain immutabile. Per comunicare tra origini diverse, devi utilizzare approcci alternativi, come postMessage() o l'API Channel Messaging.

Tieni presente che questa modifica verrà implementata gradualmente.

Prevediamo che anche altri browser ritireranno e rimuoveranno questa funzionalità. Per maggiori dettagli, consulta la sezione Compatibilità del browser.

Perché rendere document.domain immutabile?

document.domain è stato progettato per ottenere o impostare il nome host dell'origine. Molti siti web impostano document.domain per consentire la comunicazione tra pagine della stessa origine ma di origini diverse.

Sebbene sia una tecnica pratica, introduce un rischio per la sicurezza perché rilascia il criterio della stessa origine. I problemi di sicurezza relativi a document.domain hanno portato a una modifica delle specifiche che avvisa gli utenti di evitarne l'utilizzo.

In dettaglio: perché rendere document.domain immutabile?

Come viene utilizzato document.domain oggi

Molti siti web impostano document.domain per consentire la comunicazione tra pagine della stessa origine ma di origini diverse.

I siti della stessa origine ma di origini diverse hanno lo stesso eTLD+1 ma sottodomini diversi.

Ecco come è stato utilizzato document.domain finora:

Supponiamo che una pagina su https://parent.example.com incorpori una pagina iframe da https://video.example.com. Queste pagine hanno lo stesso eTLD+1 (example.com) con sottodomini diversi. Quando document.domain di entrambe le pagine è impostato su 'example.com', il browser tratta le due origini come se fossero della stessa origine.

Imposta document.domain per 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);

Imposta document.domain per 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);

Ora puoi creare una manipolazione DOM di origini diverse su https://parent.example.com rispetto a https://video.example.com.

I siti web impostano document.domain per consentire ai documenti della stessa origine di comunicare più facilmente. Poiché questa modifica rilascia il criterio della stessa origine, la pagina principale è in grado di accedere al documento dell'iframe e attraversare l' albero DOM e viceversa.

Sebbene sia una tecnica pratica, introduce un rischio per la sicurezza.

Problemi di sicurezza con document.domain

I problemi di sicurezza relativi a document.domain hanno portato a una modifica delle specifiche che avvisa gli utenti di evitare di utilizzarlo.

Ad esempio, quando due pagine impostano document.domain, possono fingere di essere della stessa origine. Questo è particolarmente importante quando queste pagine utilizzano un servizio di hosting condiviso con sottodomini diversi. L'impostazione di document.domain apre l'accesso a tutti gli altri siti ospitati dallo stesso servizio, il che semplifica l'accesso ai tuoi siti da parte degli autori di attacchi. Ciò è possibile perché document.domain ignora la parte del numero di porta del dominio.

Per scoprire di più sulle implicazioni per la sicurezza dell'impostazione di document.domain, leggi la pagina "Document.domain" su MDN.

Compatibilità del browser

Come faccio a sapere se il mio sito è interessato?

Se il tuo sito web è interessato da questa modifica, Chrome ti avvisa nel riquadro Problemi di DevTools. Questo avviso è stato aggiunto nel 2022. Nota il flag giallo in alto a destra di DevTools.

Screenshot dell'avviso relativo al problema in DevTools

Puoi anche eseguire il sito tramite l'audit dell'API ritirata di Lighthouse per trovare tutte le API che verranno rimosse da Chrome.

Se hai configurato l'API di reporting, Chrome ti ha inviato report di ritiro per informarti di questo ritiro imminente. Scopri di più su come utilizzare l'API di reporting con i servizi di raccolta di report esistenti o creando una soluzione interna.

Come faccio a vedere questa modifica in azione?

La modifica verrà implementata gradualmente a partire da Chrome 115. Per vedere questa modifica in azione anche se non è ancora stata implementata nel browser Chrome, puoi attivarla nel seguente modo:

  1. Apri chrome://flags/#origin-agent-cluster-default
  2. Seleziona Attiva.
  3. Riavvia Chrome.

Quali alternative posso utilizzare?

L'opzione migliore è non modificare affatto document.domain, ad esempio ospitando la pagina e tutti i frame costituenti sulla stessa origine. Questa opzione funziona in tutte le versioni di tutti i browser. Tuttavia, potrebbe essere necessario un rielaborazione sostanziale di un'applicazione, quindi vale la pena esaminare anche le alternative che continuano a supportare gli accessi di origini diverse.

Utilizza postMessage() o l'API Channel Messaging anziché document.domain

Nella maggior parte dei casi d'uso, cross-origin postMessage() o l'API Channel Messaging possono sostituire document.domain.

Nel seguente esempio:

  1. https://parent.example.com richiede a https://video.example.com all'interno di un iframe di manipolare il DOM inviando un messaggio tramite postMessage().
  2. https://video.example.com manipola il DOM non appena riceve il messaggio e notifica l'esito positivo alla pagina principale.
  3. https://parent.example.com riconosce l'esito positivo.

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

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

Provalo e vedi come funziona. Se hai requisiti specifici che non funzionano con postMessage() o l'API Channel Messaging, contattaci su Twitter tramite @ChromiumDev o poni una domanda su Stack Overflow con un document.domain tag.

Come ultima risorsa, invia l'intestazione Origin-Agent-Cluster: ?0

Se hai validi motivi per continuare a impostare document.domain, puoi inviare l'intestazione della risposta Origin-Agent-Cluster: ?0 insieme al documento di destinazione.

Origin-Agent-Cluster: ?0

L'intestazione Origin-Agent-Cluster indica al browser se il documento deve essere gestito dal cluster di agenti con chiave di origine o meno. Per scoprire di più su Origin-Agent-Cluster, leggi Richiedere l'isolamento del rendimento con l'intestazione Origin-Agent-Cluster.

Quando invii questa intestazione, il documento può continuare a impostare document.domain anche dopo che diventa immutabile per impostazione predefinita.

Anche tutti gli altri documenti che richiedono questo comportamento dovranno inviare un Origin-Agent-Cluster (tieni presente che document.domain non ha effetto se lo imposta un solo documento).

Configura OriginAgentClusterDefaultEnabled per la policy aziendale

Facoltativamente, l'amministratore può configurare la policy OriginAgentClusterDefaultEnabled su false per rendere document.domain impostabile per impostazione predefinita sulle istanze di Chrome della tua organizzazione. Per saperne di più, leggi Elenco e gestione dei criteri di Chrome Enterprise | Documentazione.

Risorse

Ringraziamenti

Foto di Finan Akbar su Unsplash