Chrome schakelt het wijzigen van document.domain uit

Als uw website afhankelijk is van de instelling document.domain, 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-origineel te communiceren, moet je alternatieve benaderingen gebruiken, zoals postMessage() of de Channel Messaging API.

Houd er rekening mee dat deze wijziging geleidelijk wordt uitgerold.

We verwachten dat andere browsers deze functionaliteit uiteindelijk zullen beëindigen en verwijderen. Bekijk het gedeelte over browsercompatibiliteit voor meer informatie.

Waarom document.domain onveranderlijk maken?

document.domain is ontworpen om de hostnaam van de oorsprong op te halen of in te stellen. Veel websites stellen document.domain in om communicatie tussen pagina's van dezelfde site, maar cross-origineel, mogelijk te maken.

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

In detail: Waarom document.domain onveranderlijk maken?

Hoe document.domain tegenwoordig wordt gebruikt

Veel websites stellen document.domain in om communicatie tussen pagina's van dezelfde site, maar cross-origineel, mogelijk te maken.

Dezelfde site maar cross-originele sites hebben dezelfde eTLD+1 maar verschillende subdomeinen.

Hier ziet u 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 het document.domain van beide pagina's is ingesteld op 'example.com' , behandelt de browser de twee oorsprongen 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 maken op https://parent.example.com tegen https://video.example.com .

Websites hebben document.domain ingesteld om het mogelijk te maken dat documenten op dezelfde site gemakkelijker kunnen communiceren. Omdat deze wijziging het same-origin-beleid versoepelt , heeft de bovenliggende pagina toegang tot het iframe-document en kan de DOM-structuur worden doorkruist, en omgekeerd.

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

Beveiligingsproblemen met document.domain

Beveiligingsproblemen rond document.domain hebben geleid tot een wijziging in de specificatie die gebruikers waarschuwt om het gebruik ervan te vermijden .

Wanneer twee pagina's bijvoorbeeld document.domain instellen, kunnen ze doen alsof ze dezelfde oorsprong hebben. Dit is vooral van cruciaal belang wanneer deze pagina's een gedeelde hostingservice met verschillende subdomeinen gebruiken. Als u document.domain instelt, krijgt u toegang tot alle andere sites die door dezelfde service worden gehost, waardoor aanvallers gemakkelijker toegang krijgen tot uw sites. Dit is mogelijk omdat document.domain het poortnummergedeelte van het domein negeert.

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

Browsercompatibiliteit

Hoe weet ik of mijn site getroffen is?

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

Schermafbeelding van de probleemwaarschuwing in DevTools

U kunt uw site ook door de beëindigde API-audit van LightHouse laten lopen om alle API's te vinden die volgens de planning uit Chrome zullen worden verwijderd.

Als u de Reporting API heeft ingesteld, heeft Chrome u beëindigingsrapporten gestuurd om u op de hoogte te stellen van deze aanstaande beëindiging. Lees meer over hoe u de Reporting API kunt gebruiken met bestaande diensten voor rapportverzameling of door uw eigen interne oplossing te bouwen.

Hoe kan ik deze verandering in actie zien?

De wijziging wordt geleidelijk uitgerold, te beginnen in Chrome 115 . Als u wilt zien hoe deze wijziging in werking treedt, zelfs als deze nog niet in uw Chrome-browser is uitgerold, 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 samenstellende frames op dezelfde oorsprong te hosten. Dit werkt in alle versies van alle browsers. Maar hiervoor kan een aanzienlijke herbewerking van een applicatie nodig zijn, dus het is de moeite waard om ook naar alternatieven te kijken die cross-origin-toegang blijven ondersteunen.

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

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

In het volgende voorbeeld:

  1. https://parent.example.com verzoekt https://video.example.com binnen een iframe om DOM te manipuleren door een bericht te verzenden via postMessage() .
  2. https://video.example.com manipuleert DOM zodra het het bericht ontvangt en meldt het succes aan de ouder.
  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 kijk hoe het werkt. Als je specifieke vereisten hebt die niet werken met postMessage() of 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 kunt u de header Origin-Agent-Cluster: ?0 verzenden

Als u goede redenen heeft om door te gaan met het instellen van document.domain , kunt u de responsheader Origin-Agent-Cluster: ?0 samen met het doeldocument verzenden.

Origin-Agent-Cluster: ?0

De Origin-Agent-Cluster header instrueert de browser of het document moet worden afgehandeld door het agentcluster met oorsprongssleutel of niet. Voor meer informatie over Origin-Agent-Cluster leest u Prestatie-isolatie aanvragen met de Origin-Agent-Cluster header .

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

Alle andere documenten die dit gedrag vereisen, moeten ook een Origin-Agent-Cluster verzenden (merk op dat document.domain geen effect heeft als slechts één document dit instelt).

Configureer OriginAgentClusterDefaultEnabled voor ondernemingsbeleid

Optioneel kan uw beheerder het beleid OriginAgentClusterDefaultEnabled configureren op false , zodat document.domain standaard kan worden ingesteld op Chrome-instanties in uw organisatie. Lees Chrome Enterprise-beleidslijst en -beheer | voor meer informatie Documentatie .

Bronnen

Dankbetuigingen

Foto door Finan Akbar op Unsplash