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
- La specifica HTML indica che la funzionalità deve essere rimossa.
- Mozilla ritiene che la disattivazione di
document.domain
per impostazione predefinita valga la pena di essere provata. - WebKit ha indicato che è moderatamente favorevole al ritiro del settatore
document.domain
. - Discussione con altri fornitori di browser
- Pull request del gruppo di lavoro WHATWG / HTML (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 dei problemi di DevTools. Questo avviso è stato aggiunto nel 2022. Nota la bandierina gialla in alto a destra 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:
- Apri
chrome://flags/#origin-agent-cluster-default
- Seleziona Attiva.
- 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:
https://parent.example.com
richiedehttps://video.example.com
all'interno di un frame per manipolare il DOM inviando un messaggio tramitepostMessage()
.https://video.example.com
manipola il DOM non appena riceve il messaggio e comunica l'esito positivo al componente principale.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
Document.domain
- API web | MDN- Isolamento dell'origine e ritiro
document.domain
- Ritiro
document.domain
. · Issue #564 · w3ctag/design-reviews
Ringraziamenti
Foto di Finan Akbar su Unsplash