Eine Anleitung zum Ermöglichen einer Cross-Origin-Isolierung

Die Cross-Origin-Isolation ermöglicht es einer Webseite, leistungsstarke Funktionen wie SharedArrayBuffer zu verwenden. In diesem Artikel wird erläutert, wie Sie Cross-Origin-Isolierung auf Ihrer Website aktivieren.

Feb 9, 2021 — Updated May 6, 2021

Available in: English, Español, Français, Português, Русский, 中文, 日本語 und 한국어

Eiji Kitamura

Twitter GitHub Homepage

In dieser Anleitung erfahren Sie, wie Sie die Cross-Origin-Isolierung aktivieren. Cross-Origin-Isolierung wird vorausgesetzt, wenn Sie SharedArrayBuffer, performance.measureUserAgentSpecificMemory(), einen hochauflösenden Timer mit mehr Genauigkeit oder das JS Self-Profiling API verwenden möchten.

Wenn Sie beabsichtigen, Cross-Origin-Isolierung zu aktivieren, dann schätzen Sie zuvor ab, welche Auswirkungen dies auf andere Cross-Origin-Ressourcen auf Ihrer Website hätte, wie z. B. auf platzierte Anzeigen.

Stellen Sie fest, wo auf Ihrer Website SharedArrayBuffer verwendet wird.

Ab Chrome 92 funktionieren Funktionen, die SharedArrayBuffer nutzen, nicht mehr ohne Cross-Origin-Isolierung. Wenn Sie aufgrund einer SharedArrayBuffer-Deprecation-Meldung auf dieser Seite gelandet sind, scheint Ihre Website oder eine der darin eingebetteten Ressourcen SharedArrayBuffer zu verwenden. Um sicherzustellen, dass auf Ihrer Website keine Unterbrechungen aufgrund veralteter Funktionen auftreten, ermitteln Sie zunächst, wo sie verwendet wird.

Wenn Sie sich nicht sicher sind, wo auf Ihrer Site ein SharedArrayBuffer verwendet wird, gibt es zwei Möglichkeiten, dies herauszufinden:

Verwendung der Chrome-Entwicklertools
(Erweitert) Nutzen von Deprecation Reporting

Wenn Sie bereits wissen, wo Sie SharedArrayBuffer nutzen, fahren Sie mit dem Artikel Analysieren der Auswirkungen der Cross-Origin-Isolierung fort.

Verwendung der Chrome-Entwicklertools #

Die Chrome-Entwicklertools ermöglichen es Entwicklern, Websites zu überprüfen.

Öffnen Sie die Chrome-Entwicklertools auf der Seite, auf der Sie den Einsatz von SharedArrayBuffer vermuten.
Wählen Sie das Konsolenfenster aus.

Wenn die Seite SharedArrayBuffer nutzt, wird die folgende Meldung angezeigt:

[Deprecation] SharedArrayBuffer will require cross-origin isolation as of M92, around May 2021. See https://developer.chrome.com/blog/enabling-shared-array-buffer/ for more details. common-bundle.js:535

Der Dateiname und die Zeilennummer am Ende der Nachricht (z. B. common-bundle.js:535) geben an, woher der SharedArrayBuffer stammt. Wenn es sich um eine Bibliothek eines Drittanbieters handelt, wenden Sie sich an die Entwickler, um das Problem zu beheben. Wenn es als Teil Ihrer Website implementiert wurde, folgen Sie der Anleitung unten, um die Cross-Site-Isolierung zu aktivieren.

DevTools-Konsolenwarnung bei Verwendung von SharedArrayBuffer ohne Cross-Origin-Isolation — DevTools-Konsolenwarnung, wenn SharedArrayBuffer ohne Cross-Origin-Isolierung verwendet wird.

(Erweitert) Nutzen von Deprecation Reporting #

Einige Browser verfügen über eine Funktion zur Berichterstattung über veraltete APIs zu einem bestimmten Endpunkt.

Richten Sie einen Berichtsserver für Meldungen zu veralteten APIs ein und rufen Sie die Berichts-URL ab. Sie können dies erreichen, indem Sie entweder einen öffentlichen Dienst nutzen oder einen eigenen aufsetzen.
Legen Sie den folgenden HTTP-Header auf Seiten fest, die SharedArrayBuffer bereitstellen könnten und verwenden Sie darin die Berichts-URL.
```
Report-To: {"group":"default","max_age":86400,"endpoints":[{"url":"THE_DEPRECATION_ENDPOINT_URL"}]}
```
Sobald der Header ausgegeben wird, sollte der von ihnen festgelegte Endpunkt mit dem Sammeln von Berichten über veraltete Software (Deprecation Reports) beginnen.

Sehen Sie sich hier eine Beispielimplementierung an: https://cross-origin-isolation.glitch.me.

Analysieren Sie die Auswirkungen der Cross-Origin-Isolierung #

Wäre es nicht großartig, wenn Sie die Auswirkungen abschätzen könnten, die die Aktivierung von Cross-Origin-Isolierung auf Ihre Website haben würde, ohne dabei tatsächlich Fehler auf der Website hervorzurufen? Die HTTP-Header für Cross-Origin-Opener-Policy-Report-Only sowie Cross-Origin-Embedder-Policy-Report-Only ermöglichen Ihnen genau das.

Legen Sie in Ihrem Dokument auf oberster Websiteebene die Einstellung Cross-Origin-Opener-Policy-Report-Only: same-origin fest. Wie der Name andeutet, sendet dieser Header nur Berichte über die Auswirkungen, die COOP: same-origin auf Ihre Website haben würde – die tatsächliche Kommunikation mit Popup-Fenstern wird nicht ausgesetzt.
Setzen Sie die Einstellungen für die Berichterstellung und konfigurieren Sie einen Webserver zum Empfangen und Speichern der Berichte.
Legen Sie in Ihrem Dokument auf oberster Websiteebene die Einstellung Cross-Origin-Embedder-Policy-Report-Only: require-corp. Auch dieser Header zeigt Ihnen die Auswirkungen der Aktivierung von COEP: require-corp, ohne die Funktion Ihrer Site tatsächlich zu beeinträchtigen. Sie können diesen Header so konfigurieren, dass Berichte an denselben Berichtsserver gesendet werden, den Sie im vorherigen Schritt eingerichtet haben.

Caution

Das Aktivieren der Cross-Origin-Isolierung blockiert das Laden von Cross-Origin-Ressourcen, die Sie nicht explizit dafür aktivieren, und verhindert, dass Ihr Dokument auf oberster Websiteebene mit Popup-Fenstern kommunizieren kann. Wir haben nach Möglichkeiten gesucht, Cross-Origin-Resource-Policy in einem größeren Maßstab bereitzustellen, da die Cross-Origin-Isolierung derzeit erfordert, dass alle Unterressourcen explizit dafür aktiviert werden müssen. Uns kam schließlich die Idee, in die entgegengesetzte Richtung zu gehen: einen neuen „berechtigungslosen“ COEP-Modus, der es ermöglicht, Ressourcen ohne CORP-Header zu laden, indem alle ihrer Berechtigungsinformationen entfernt werden. Wir finden noch im Detail heraus, wie dies funktionieren könnte, hoffen aber, dass es Ihnen erleichtern wird, sicherzustellen, dass all Ihre Unterressourcen den Header Cross-Origin-Resource-Policy senden. Es ist weiterhin bekannt, dass der HeaderCross-Origin-Opener-Policy: same-origin Fehler mit Integrationen verursacht, die auf Cross-Origin-Fensterinteraktionen angewiesen sind, beispielsweise OAuth oder Zahlungsdienste. Um dieses Problem zu mildern, untersuchen wir die Möglichkeit, die Bedingung zu lockern, um eine Cross-Origin-Isolierung von Cross-Origin-Opener-Policy: same-origin-allow-popups zuzulassen. Auf diese Weise ist die Kommunikation mit dem selbstständig geöffneten Fenster möglich. Wenn Sie die Cross-Origin-Isolierung aktivieren möchten, diese Herausforderungen sie jedoch davon abhalten, empfehlen wir Ihnen, sich für eine Origin-Trial anzumelden und zu warten, bis die neuen Modi verfügbar sind. Wir planen nicht, die Origin-Trial zu beenden, bevor diese neuen Modi verfügbar sind.

Minderung der Auswirkungen der Cross-Origin-Isolierung #

Nachdem Sie nun festgestellt haben, welche Ressourcen von der Cross-Origin-Isolierung betroffen sind, finden Sie hier allgemeine Richtlinien dazu, wie Sie diese Cross-Origin-Ressourcen tatsächlich aktivieren:

Legen Sie für Cross-Origin-Ressourcen wie Bilder, Skripts, Stylesheets, iframes und andere den Header Cross-Origin-Resource-Policy: cross-origin fest. Setzen Sie für Same-Site-Ressourcen den Header Cross-Origin-Resource-Policy: same-site.
Legen Sie das crossorigin-Attribut im HTML-Dokument auf oberster Websiteebene fest, wenn die Ressource per CORS bereitgestellt wird (z. B. <img src="example.jpg" crossorigin>).
Wenn in iframes geladene Cross-Origin-Ressourcen eine weitere Ebene von iframes umfassen, wenden Sie die in diesem Abschnitt beschriebenen Schritte rekursiv an, bevor Sie fortfahren.
Sobald Sie bestätigt haben, dass alle Cross-Origin-Ressourcen aktiviert sind, setzen Sie für die in iframes geladenen Cross-Origin-Ressourcen den Header Cross-Origin-Embedder-Policy: require-corp.
Stellen Sie sicher, dass keine Cross-Origin-Popup-Fenster vorhanden sind, die eine Kommunikation über postMessage() erfordern. Es gibt keine Möglichkeit, diese funktional zu halten, wenn die Cross-Origin-Isolierung aktiviert ist. Sie können die Kommunikation über ein anderes Dokument regeln, für das keine Cross-Origin-Isolierung besteht, oder eine andere Kommunikationsmethode verwenden (z. B. HTTP-Anforderungen).

Aktivieren von Cross-Origin-Isolierung #

Nachdem Sie nun Vorkehrungen gegen unerwünschte Auswirkungen der Cross-Origin-Isolierung getroffen haben, finden Sie hier allgemeine Richtlinien zum Aktivieren der Cross-Origin-Isolierung:

Setzen Sie in Ihrem Dokument auf der obersten Websiteebene den Header Cross-Origin-Opener-Policy: same-origin. Wenn zuvor Cross-Origin-Opener-Policy-Report-Only: same-origin eingestellt war, ersetzen Sie es. Dadurch wird die Kommunikation zwischen dem Dokument auf Ihrer obersten Websiteebene und seinen Popup-Fenstern verhindert.
Setzen Sie in Ihrem Dokument auf der obersten Websiteebene den Header Cross-Origin-Embedder-Policy: require-corp. Wenn zuvor Cross-Origin-Embedder-Policy-Report-Only: require-corp eingestellt war, ersetzen Sie es. Dadurch wird das Laden von Cross-Origin-Ressourcen verhindert, für die keine Zustimmung vorliegt.
Stellen Sie sicher, dass self.crossOriginIsolated in der Konsole den Wert true ausgibt, um zu verifizieren, dass auf Ihrer Seite eine Cross-Origin-Isolierung besteht.

Ressourcen #

Last updated: May 6, 2021 — Improve article

Return to all articles