Anleitung zum Aktivieren der ursprungsübergreifenden Isolierung

Durch die ursprungsübergreifende Isolierung kann eine Webseite leistungsstarke Funktionen wie „SharedArrayBuffer“ verwenden. In diesem Artikel wird erläutert, wie Sie die ursprungsübergreifende Isolierung auf Ihrer Website aktivieren.

Eiji Kitamura

In dieser Anleitung erfahren Sie, wie Sie die ursprungsübergreifende Isolierung aktivieren. Die ursprungsübergreifende Isolierung ist erforderlich, wenn Sie SharedArrayBuffer, performance.measureUserAgentSpecificMemory(), oder einen hochauflösenden Timer mit besserer Genauigkeit verwenden möchten.

Wenn Sie die ursprungsübergreifende Isolierung aktivieren möchten, prüfen Sie, welche Auswirkungen dies auf andere ursprungsübergreifende Ressourcen auf Ihrer Website hat, z. B. auf Anzeigenflächen.

Ermitteln, wo auf Ihrer Website SharedArrayBuffer verwendet wird

Ab Chrome 92 funktionieren Funktionen, die SharedArrayBuffer nicht mehr ohne ursprungsübergreifende Isolierung. Wenn Sie aufgrund einer SharedArrayBuffer Einstellungsbenachrichtigung auf dieser Seite gelandet sind, wird SharedArrayBuffer wahrscheinlich entweder auf Ihrer Website oder in einer der eingebetteten Ressourcen verwendet. Damit aufgrund der Einstellung nichts auf Ihrer Website beschädigt wird, müssen Sie zuerst ermitteln, wo es verwendet wird.

Wenn Sie nicht sicher sind, wo auf Ihrer Website SharedArrayBuffer verwendet wird, haben Sie zwei Möglichkeiten, dies herauszufinden:

• Chrome-Entwicklertools verwenden
• Erweiterte Option: Einstellungsberichte verwenden

Wenn Sie bereits wissen, wo Sie SharedArrayBuffer verwenden, springen Sie zu Auswirkungen der ursprungsübergreifenden Isolierung analysieren.

Chrome-Entwicklertools verwenden

Mit den Chrome-Entwicklertools können Entwickler Websites untersuchen.

1. Öffnen Sie die Chrome Entwicklertools auf der Seite, auf der Sie vermuten, dass SharedArrayBuffer verwendet wird.
2. Wählen Sie den Bereich Konsole aus.
3. Wenn die Seite SharedArrayBuffer verwendet, wird die folgende Meldung angezeigt:

   [Deprecation] SharedArrayBuffer will require cross-origin isolation as of M92, around May 2021. See  for more details. common-bundle.js:535

4. Der Dateiname und die Zeilennummer am Ende der Meldung (z. B. common-bundle.js:535) geben an, woher die SharedArrayBuffer stammt. Wenn es sich um eine Drittanbieterbibliothek handelt, wenden Sie sich an den Entwickler, um das Problem zu beheben. Wenn sie als Teil Ihrer Website implementiert ist, folgen Sie der Anleitung unten, um die ursprungsübergreifende Isolierung zu aktivieren.

Erweiterte Option: Einstellungsberichte verwenden

Einige Browser haben eine Berichtsfunktion für die Einstellung von APIs an einen bestimmten Endpunkt.

1. Richten Sie einen Server für Einstellungsberichte ein und rufen Sie die Berichts URL ab. Sie können dies erreichen, indem Sie entweder einen öffentlichen Dienst verwenden oder selbst einen erstellen.
2. Legen Sie mit der URL den folgenden HTTP-Header für Seiten fest, die möglicherweise bereitstellen SharedArrayBuffer.

   Report-To: {"group":"default","max_age":86400,"endpoints":[{"url":"THE_DEPRECATION_ENDPOINT_URL"}]}

3. Sobald der Header weitergegeben wird, sollten am registrierten Endpunkt Einstellungsberichte erfasst werden.

Beispielimplementierung ansehen

Auswirkungen der ursprungsübergreifenden Isolierung analysieren

Wäre es nicht toll, wenn Sie die Auswirkungen der Aktivierung der ursprungsübergreifenden Isolierung auf Ihre Website bewerten könnten, ohne etwas zu beschädigen? Mit den Cross-Origin-Opener-Policy-Report-Only und Cross-Origin-Embedder-Policy-Report-Only HTTP-Headern ist genau das möglich.

1. Legen Sie Cross-Origin-Opener-Policy-Report-Only: same-origin für Ihr Dokument der obersten Ebene fest. Wie der Name schon sagt, sendet dieser Header nur Berichte über die Auswirkungen, die COOP: same-origin hätte auf Ihre Website hätte. Die Kommunikation mit Pop-up-Fenstern wird dadurch nicht deaktiviert.
2. Richten Sie die Berichterstellung ein und konfigurieren Sie einen Webserver, um die Berichte zu empfangen und zu speichern.
3. Legen Sie Cross-Origin-Embedder-Policy-Report-Only: require-corp für Ihr Dokument der obersten Ebene fest. Auch mit diesem Header können Sie die Auswirkungen der Aktivierung von COEP: require-corp sehen, ohne die Funktion Ihrer Website zu beeinträchtigen. Sie können diesen Header so konfigurieren, dass Berichte an denselben Berichtsserver gesendet werden, den Sie im vorherigen Schritt eingerichtet haben.

Auswirkungen der ursprungsübergreifenden Isolierung minimieren

Nachdem Sie ermittelt haben, welche Ressourcen von der ursprungsübergreifenden Isolierung betroffen sind, finden Sie hier allgemeine Richtlinien, wie Sie sich für diese ursprungsübergreifenden Ressourcen anmelden:

1. Legen Sie für ursprungsübergreifende Ressourcen wie Bilder, Skripts, Stylesheets und iFrames und andere den Cross-Origin-Resource-Policy:cross-origin Header fest. Legen Sie für Ressourcen auf derselben Website den Cross-Origin-Resource-Policy:same-site Header fest.
2. Für Ressourcen, die mit CORS geladen werden können, muss CORS aktiviert sein. Legen Sie dazu das crossorigin Attribut im HTML-Tag fest (z. B. <img src="example.jpg" crossorigin>). Bei JavaScript-Abrufanfragen muss request.mode auf cors gesetzt sein.
3. Wenn Sie leistungsstarke Funktionen wie SharedArrayBuffer in einem geladenen iFrame verwenden möchten, fügen Sie allow="cross-origin-isolated" zu dem <iframe> hinzu.
4. Wenn ursprungsübergreifende Ressourcen, die in iFrames oder Worker-Skripts geladen werden, eine weitere Ebene von iFrames oder Worker-Skripts umfassen, wenden Sie die in diesem Abschnitt beschriebenen Schritte rekursiv an, bevor Sie fortfahren.
5. Sobald Sie bestätigt haben, dass alle ursprungsübergreifenden Ressourcen angemeldet sind, legen Sie den Header Cross-Origin-Embedder-Policy: require-corp für iFrames und Worker-Skripts fest. Dies ist unabhängig davon erforderlich, ob es sich um Ressourcen desselben Ursprungs oder ursprungsübergreifende Ressourcen handelt.
6. Es dürfen keine ursprungsübergreifenden Pop-up-Fenster vorhanden sein, die eine Kommunikation über postMessage() erfordern. Wenn die ursprungsübergreifende Isolierung aktiviert ist, können sie nicht mehr verwendet werden. Sie können die Kommunikation zu einem anderen Dokument verschieben, das nicht ursprungsübergreifend isoliert ist, oder eine andere Kommunikationsmethode verwenden (z. B. HTTP-Anfragen).

Ursprungsübergreifende Isolierung aktivieren

Nachdem Sie die Auswirkungen der ursprungsübergreifenden Isolierung minimiert haben, finden Sie hier allgemeine Richtlinien zum Aktivieren der ursprungsübergreifenden Isolierung:

1. Legen Sie den Header Cross-Origin-Opener-Policy: same-origin für Ihr Dokument der obersten Ebene fest. Wenn Sie Cross-Origin-Opener-Policy-Report-Only: same-origin festgelegt haben, ersetzen Sie ihn. Dadurch wird die Kommunikation zwischen Ihrem Dokument der obersten Ebene und den zugehörigen Pop-up-Fenstern blockiert.
2. Legen Sie den Header Cross-Origin-Embedder-Policy: require-corp für Ihr Dokument der obersten Ebene fest. Wenn Sie Cross-Origin-Embedder-Policy-Report-Only: require-corp festgelegt haben, ersetzen Sie ihn. Dadurch wird das Laden von ursprungsübergreifenden Ressourcen blockiert, die nicht angemeldet sind.
3. Prüfen Sie, ob self.crossOriginIsolated in der Konsole true zurückgibt, um zu bestätigen, dass Ihre Seite ursprungsübergreifend isoliert ist.

Ressourcen

• Website mit COOP und COEP ursprungsübergreifend isolieren
• Updates zu „SharedArrayBuffer“ in Android Chrome 88 und Desktop Chrome 92