Chrome schakelt het wijzigen van document.domain uit

Als uw website afhankelijk is van het instellen van document.domein, is uw actie vereist.

Maud Nalpas
Maud Nalpas
X GitHub
Eiji Kitamura

Wat verandert er en waarom?

Vanaf Chrome 115 kunnen websites document.domain niet meer instellen: Chrome maakt document.domain onveranderlijk. Om cross-origin te communiceren, moet u alternatieve benaderingen gebruiken, zoals postMessage() of de Channel Messaging API.

Houd er rekening mee dat deze wijziging geleidelijk wordt doorgevoerd.

We verwachten dat andere browsers deze functionaliteit uiteindelijk zullen afschaffen en verwijderen. Raadpleeg het gedeelte over browsercompatibiliteit voor meer informatie.

Waarom moet document.domain onveranderlijk worden gemaakt?

document.domain is ontworpen om de hostnaam van de bron op te halen of in te stellen. Veel websites stellen document.domain in om communicatie tussen pagina's van dezelfde site maar met een andere bron mogelijk te maken.

Hoewel dit een handige techniek is, brengt het een beveiligingsrisico met zich mee, omdat het het beleid voor dezelfde oorsprong versoepelt . Beveiligingsproblemen rond document.domain hebben geleid tot een wijziging in de specificatie die gebruikers waarschuwt het gebruik ervan te vermijden .

In detail: Waarom moet document.domein onveranderlijk worden gemaakt?

Hoe document.domain vandaag de dag wordt gebruikt

Veel websites stellen document.domain in om communicatie tussen pagina's van dezelfde site maar met een andere oorsprong mogelijk te maken.

Sites met dezelfde site maar met een andere oorsprong hebben dezelfde eTLD+1 maar verschillende subdomeinen.

Dit is hoe document.domain tot nu toe werd gebruikt:

Stel dat een pagina op https://parent.example.com een ​​iframe-pagina van https://video.example.com insluit. Deze pagina's hebben dezelfde eTLD+1 ( example.com ) met verschillende subdomeinen. Wanneer document.domain van beide pagina's is ingesteld op 'example.com' , behandelt de browser de twee bronnen alsof ze dezelfde oorsprong hebben.

Stel het document.domain in voor 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);

Stel het document.domain in voor 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);

U kunt nu een cross-origin DOM-manipulatie op https://parent.example.com maken tegen https://video.example.com .

Websites stellen document.domain in om de communicatie tussen documenten op dezelfde site te vergemakkelijken. Omdat deze wijziging het beleid voor dezelfde oorsprong versoepelt , kan de bovenliggende pagina toegang krijgen tot het document in het iframe en de DOM-structuur doorlopen, en vice versa.

Dit is een handige techniek, maar het brengt wel een veiligheidsrisico met zich mee.

Beveiligingsproblemen met document.domain

Zorgen over de beveiliging van document.domain hebben geleid tot een wijziging in de specificatie. Gebruikers worden nu gewaarschuwd het document.domain niet te gebruiken .

Wanneer twee pagina's bijvoorbeeld document.domain instellen, kunnen ze doen alsof ze dezelfde oorsprong hebben. Dit is met name cruciaal wanneer deze pagina's gebruikmaken van een gedeelde hostingservice met verschillende subdomeinen. Door document.domain in te stellen, wordt toegang verleend tot alle andere sites die door dezelfde service worden gehost, waardoor aanvallers gemakkelijker toegang tot uw sites kunnen krijgen. Dit is mogelijk omdat document.domain het poortnummer van het domein negeert.

Voor meer informatie over de beveiligingsimplicaties van het instellen document.domain kunt u de pagina "Document.domain" op MDN lezen.

Browsercompatibiliteit

Hoe weet ik of mijn site is getroffen?

Als uw website door deze wijziging wordt getroffen, waarschuwt Chrome u in het paneel 'Problemen in DevTools'. Deze waarschuwing is in 2022 toegevoegd. Let op de gele vlag rechtsboven in DevTools.

Schermafbeelding van de probleemwaarschuwing in DevTools

U kunt ook de verouderde API-audit van LightHouse voor uw site uitvoeren om alle API's te vinden die gepland staan ​​om uit Chrome te worden verwijderd.

Als u de Reporting API heeft ingesteld, heeft Chrome u verouderingsrapporten gestuurd om u hiervan op de hoogte te stellen. Lees meer over hoe u de Reporting API kunt gebruiken met bestaande rapportverzamelingsservices of door uw eigen interne oplossing te bouwen.

Hoe zie ik deze verandering in de praktijk?

De wijziging wordt geleidelijk doorgevoerd, te beginnen in Chrome 115. Om deze wijziging in actie te zien, zelfs als deze nog niet in uw Chrome-browser is doorgevoerd, kunt u deze als volgt inschakelen:

  1. Open chrome://flags/#origin-agent-cluster-default
  2. Selecteer Inschakelen.
  3. Start Chrome opnieuw.

Welke alternatieven kan ik gebruiken?

De beste optie is om document.domain helemaal niet te wijzigen, bijvoorbeeld door de pagina en alle bijbehorende frames op dezelfde bron te hosten. Dit werkt in alle versies van alle browsers. Dit kan echter een aanzienlijke aanpassing van de applicatie vereisen, dus het is de moeite waard om ook alternatieven te bekijken die cross-origin toegang blijven ondersteunen.

Gebruik postMessage() of Channel Messaging API in plaats van document.domain

In de meeste gevallen kan cross-origin postMessage() of Channel Messaging API document.domain vervangen.

In het volgende voorbeeld:

  1. https://parent.example.com vraagt https://video.example.com aan binnen een iframe om de DOM te manipuleren door een bericht te versturen via postMessage() .
  2. https://video.example.com manipuleert DOM zodra het bericht ontvangen is en informeert de bovenliggende site over het succes.
  3. https://parent.example.com erkent het succes.

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

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

Probeer het en zie hoe het werkt. Als je specifieke vereisten hebt die niet werken met postMessage() of de Channel Messaging API, laat het ons dan weten op Twitter via @ChromiumDev of vraag het op Stack Overflow met een document.domain tag .

Als laatste redmiddel stuurt u de Origin-Agent-Cluster: ?0 header

Als u goede redenen hebt om document.domain te blijven instellen, kunt u Origin-Agent-Cluster: ?0 responsheader meesturen met het doeldocument.

Origin-Agent-Cluster: ?0

De Origin-Agent-Cluster header geeft de browser aan of het document al dan niet door het Origin-keyed agentcluster moet worden verwerkt. Lees Prestatie-isolatie aanvragen met de Origin-Agent-Cluster -header voor meer informatie over Origin-Agent-Cluster .

Wanneer u deze header verzendt, kan uw document document.domain blijven instellen, zelfs nadat deze standaard onveranderlijk is geworden.

Alle andere documenten die dit gedrag vereisen, moeten ook een Origin-Agent-Cluster verzenden (houd er rekening mee dat document.domain geen effect heeft als dit gedrag slechts door één document wordt ingesteld).

Configureer OriginAgentClusterDefaultEnabled voor bedrijfsbeleid

Optioneel kan uw beheerder het beleid OriginAgentClusterDefaultEnabled configureren op false , zodat document.domain standaard instelbaar is op Chrome-instanties in uw organisatie. Lees voor meer informatie Chrome Enterprise Policy List & Management | Documentatie .

Bronnen

Dankbetuigingen

Foto door Finan Akbar op Unsplash