Chrome disabilita la modifica del dominio document.domain

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

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 ritirino e rimuovano questa funzionalità. Per informazioni dettagliate, consulta la sezione Compatibilità del browser.

Perché rendere document.domain immutabile?

document.domain è stato progettato per recuperare o impostare il nome host dell'origine. Molti siti web impostanodocument.domain per consentire la comunicazione tra pagine dello stesso sito, ma di origini diverse.

Sebbene si tratti di una tecnica comoda, introduce un rischio per la sicurezza, in quanto attenua il criterio di origine stessa. I problemi di sicurezza relativi a document.domain hanno portato a una modifica della specifica che avverte gli utenti di evitarne l'utilizzo.

In dettaglio: perché rendere immutabile document.domain?

Come viene utilizzato document.domain oggi

Molti siti web impostano document.domain per consentire la comunicazione tra pagine nello stesso sito, ma di origini diverse.

I siti con origini diverse, ma appartenenti allo stesso sito, 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 di 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 cross-origin su https://parent.example.com contro https://video.example.com.

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

Si tratta di una tecnica pratica, ma presenta 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 evitarne l'utilizzo.

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

Per scoprire di più sulle implicazioni relative alla sicurezza dell'impostazione 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 dei problemi di DevTools. Questo avviso è stato aggiunto nel 2022. Nota la bandierina gialla in alto a destra in DevTools.

Screenshot dell'avviso relativo al problema in DevTools

Puoi anche eseguire il tuo sito tramite il controllo delle API ritirate di Lighthouse per trovare tutte le API che sono programmate per essere rimosse da Chrome.

Se hai configurato l'API di reporting, Chrome ti ha inviato report sul ritiro per informarti di questo ritiro imminente. 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 faccio a vedere questa modifica in azione?

La modifica verrà implementata progressivamente, 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 nella stessa origine. Questo funziona in tutte le versioni di tutti i browser. Tuttavia, questo potrebbe richiedere una revisione sostanziale di un'applicazione, quindi vale la pena considerare anche alternative che continuino a supportare gli accessi cross-origin.

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

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

Nel seguente esempio:

  1. https://parent.example.com richiede https://video.example.com all'interno di un frame per manipolare il DOM inviando un messaggio tramite postMessage().
  2. https://video.example.com manipola il DOM non appena riceve il messaggio e comunica l'esito positivo al componente principale.
  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);
});

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

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

Se hai valide ragioni per continuare a impostare document.domain, puoi inviare l'intestazione di 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 con chiave di origine. Per scoprire di più su Origin-Agent-Cluster, leggi l'articolo 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 alcun effetto se viene impostato solo in un documento).

Configurare OriginAgentClusterDefaultEnabled per i criteri aziendali

Se vuoi, l'amministratore può configurare il criterio OriginAgentClusterDefaultEnabled su false per rendere document.domain impostabile per impostazione predefinita nelle istanze di Chrome della tua organizzazione. Per saperne di più, leggi l'articolo Elenco e gestione dei criteri di Chrome Enterprise | Documentazione.

Risorse

Ringraziamenti

Foto di Finan Akbar su Unsplash