Se il tuo sito web si basa sull'impostazione document.domain, è necessario il tuo intervento.
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
- La specifica HTML indica che la funzionalità deve essere rimossa.
- Mozilla considera la possibilità di disabilitare
document.domain
per impostazione predefinita, vale la pena prototipare. - WebKit ha indicato di essere moderatamente positivo per il ritiro di
document.domain
setter. - Discussione con altri fornitori di browser
- WHATWG / gruppo di lavoro HTML Pull Request (esperienza di sperimentazione in attesa)
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.
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:
- Apri
chrome://flags/#origin-agent-cluster-default
- Seleziona Attiva.
- 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:
https://parent.example.com
richiede ahttps://video.example.com
all'interno di un iframe di manipolare il DOM inviando un messaggio tramitepostMessage()
.https://video.example.com
manipola il DOM non appena riceve il messaggio e invia una notifica dell'esito positivo all'elemento padre.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
Document.domain
- API web | MDN- Isolamento dell'origine e ritiro
document.domain
- Ritiro di
document.domain
. · Numero 564 · w3ctag/design-reviews
Ringraziamenti
Foto di Finan Akbar su Unsplash