Chrome disabilita la modifica del dominio document.domain

Se il tuo sito web si basa sull'impostazione document.domain, è necessario il tuo intervento.

Maud Nalpas
Maud Nalpas
Twitter GitHub
Eiji Kitamura
Eiji Kitamura
Twitter GitHub Glitch Mastodon

Che cosa cambia e perché?

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

Tieni presente che questa modifica verrà implementata progressivamente.

Prevediamo che altri browser ritireranno e rimuoverà questa funzionalità. Per maggiori dettagli, consulta la sezione relativa alla 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 stesso sito ma multiorigine.

Sebbene sia una tecnica comoda, introduce un rischio per la sicurezza, perché riduce il criterio della stessa origine. I problemi di sicurezza relativi a document.domain hanno portato a una modifica della specifica che avvisa gli utenti di evitare l'uso del servizio.

Nel dettaglio: perché rendere immutabile document.domain?

Modalità di utilizzo di document.domain oggi

Molti siti web impostano il criterio document.domain per consentire la comunicazione tra pagine stesso sito ma multiorigine.

I siti sullo stesso sito ma multiorigine hanno lo stesso eTLD+1 ma sottodomini diversi.

Ecco come è stato utilizzato document.domain fino ad ora:

Supponiamo che una pagina su https://parent.example.com incorpora una pagina iframe da https://video.example.com. Queste pagine hanno lo stesso eTLD+1 (example.com) con sottodomini diversi. Quando l'elemento document.domain di entrambe le pagine è impostato su 'example.com', il browser tratta le due origini come se avessero la 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 del DOM multiorigine su https://parent.example.com rispetto a https://video.example.com.

I siti web hanno impostato document.domain in modo da rendere più semplice la comunicazione tra i documenti dello stesso sito. Poiché questa modifica allenta il criterio della stessa origine, la pagina principale è in grado di accedere al documento dell'iframe e attraversare la struttura DOM e viceversa.

Si tratta di una tecnica pratica, ma comporta un rischio per la sicurezza.

Problemi di sicurezza relativi a document.domain

I problemi di sicurezza relativi a document.domain hanno portato a una modifica della specifica che avvisa gli utenti di non utilizzarla.

Ad esempio, quando due pagine impostano document.domain, possono far finta che abbiano la stessa origine. Ciò è particolarmente importante quando queste pagine usano un servizio di hosting condiviso con sottodomini diversi. La configurazione di document.domain apre l'accesso a tutti gli altri siti ospitati da quello stesso servizio, in modo che gli utenti malintenzionati possano accedere più facilmente ai tuoi siti. Questo è possibile perché document.domain ignora la parte del numero di porta del dominio.

Per saperne di più sulle implicazioni sulla 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. Osserva la bandierina gialla in alto a destra in DevTools.

Screenshot dell'avviso relativo al problema in DevTools

Puoi anche sottoporre il tuo sito al controllo delle API ritirate da LightHouse per trovare tutte le API di cui è prevista la rimozione da Chrome.

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

Come posso vedere questa modifica in azione?

La modifica verrà implementata progressivamente a partire da Chrome 115. Per vedere la modifica in azione anche se non è ancora stata implementata nel tuo 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?

La soluzione migliore è non modificare del tutto document.domain, ad esempio ospitando la pagina e tutti i frame costitutivi sulla stessa origine. Questo funziona in tutte le versioni di tutti i browser. Tuttavia, ciò potrebbe richiedere un sostanziale rielaborazione di un'applicazione, quindi vale la pena esaminare anche delle alternative che continuano a supportare gli accessi multiorigine.

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

Nella maggior parte dei casi d'uso, l'postMessage() o API Channel Messaging può 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 invia una notifica dell'esito positivo all'elemento padre.
  3. https://parent.example.com conferma l'esito positivo.

Il giorno 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
  }
});

Il giorno 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);
});

Provala e scopri come funziona. Se hai requisiti specifici che non funzionano con postMessage() o con l'API Channel Messaging, contattaci su Twitter tramite @ChromiumDev o chiedi su Stack Overflow usando un tag document.domain.

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

Se hai motivi validi 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 o meno dal cluster di agenti in base all'origine. Per scoprire di più su Origin-Agent-Cluster, consulta Richiedere l'isolamento delle prestazioni con l'intestazione Origin-Agent-Cluster.

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

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

Configura il criterio OriginAgentClusterDefaultEnabled per le aziende

Facoltativamente, l'amministratore può configurare il criterio OriginAgentClusterDefaultEnabled su false per rendere document.domain configurabile per impostazione predefinita sulle istanze di Chrome nella tua organizzazione. Per ulteriori informazioni, vedi Elenco e gestione dei criteri di Chrome Enterprise | Documentazione.

Risorse

Ringraziamenti

Foto di Finan Akbar su Unsplash