Anleitung zum Aktivieren der ursprungsübergreifenden Isolierung

Mit der ursprungsübergreifenden Isolierung können auf einer Webseite leistungsstarke Funktionen wie „SharedArrayBuffer“ verwendet werden. In diesem Artikel wird erläutert, wie Sie die plattformübergreifende Isolation auf Ihrer Website aktivieren.

In dieser Anleitung erfahren Sie, wie Sie die plattformübergreifende Isolation aktivieren. Die plattformübergreifende Isolation ist erforderlich, wenn Sie SharedArrayBuffer, performance.measureUserAgentSpecificMemory() oder einen Timer mit hoher Auflösung und besserer Präzision verwenden möchten.

Wenn Sie die ursprungsübergreifende Isolation aktivieren möchten, sollten Sie die Auswirkungen auf andere ursprungsübergreifende Ressourcen auf Ihrer Website wie Anzeigen-Placements prüfen.

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

  • Chrome-Entwicklertools verwenden
  • (Fortgeschrittene Nutzer) Einstellungsberichte verwenden

Wenn Sie bereits wissen, wo Sie SharedArrayBuffer verwenden, fahren Sie mit Auswirkungen der ursprungsübergreifenden Isolierung analysieren fort.

Chrome-Entwicklertools verwenden

Mit den Chrome-Entwicklertools können Entwickler Websites prüfen.

  1. Öffnen Sie die Chrome-Entwicklertools auf der Seite, auf der Sie vermuten, dass SharedArrayBuffer verwendet wird.
  2. Wählen Sie das Steuerfeld Console aus.
  3. Wenn auf der Seite SharedArrayBuffer verwendet wird, 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
  4. Der Dateiname und die Zeilennummer am Ende der Nachricht (z. B. common-bundle.js:535) geben an, woher die SharedArrayBuffer stammt. Wenn es sich um eine Bibliothek eines Drittanbieters handelt, wenden Sie sich an den Entwickler, um das Problem zu beheben. Wenn es als Teil Ihrer Website implementiert ist, folgen Sie der Anleitung unten, um die plattformübergreifende Isolation zu aktivieren.
DevToools Console-Warnung, wenn „SharedArrayBuffer“ ohne ursprungsübergreifende Isolierung verwendet wird
Warnung in der Entwicklertools-Konsole, wenn SharedArrayBuffer ohne ursprungsübergreifende Isolierung verwendet wird.

(Fortgeschrittene Nutzer) Einstellungsberichte verwenden

Einige Browser haben eine Funktion zum Melden der Einstellung von APIs an einen bestimmten Endpunkt.

  1. Richten Sie einen Berichtsserver für die Einstellung ein und rufen Sie die URL für die Berichterstellung ab. Sie können dazu entweder einen öffentlichen Dienst verwenden oder einen selbst erstellen.
  2. Lege mithilfe der URL den folgenden HTTP-Header auf Seiten fest, auf denen möglicherweise SharedArrayBuffer ausgeliefert wird.
    Report-To: {"group":"default","max_age":86400,"endpoints":[{"url":"THE_DEPRECATION_ENDPOINT_URL"}]}
  3. Sobald der Header weitergeleitet wird, sollten über den Endpunkt, für den Sie sich registriert haben, Einstellungsberichte erfasst werden.

Eine Beispielimplementierung finden Sie hier: https://cross-origin-isolation.glitch.me.

Auswirkungen der ursprungsübergreifenden Isolierung analysieren

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

  1. Legen Sie Cross-Origin-Opener-Policy-Report-Only: same-origin für das Dokument der obersten Ebene fest. Wie der Name schon sagt, werden mit dieser Überschrift nur Berichte über die Auswirkungen gesendet, die COOP: same-origin auf Ihre Website haben würde. Die Kommunikation mit Pop-up-Fenster 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 das Dokument der obersten Ebene fest. Auch hier können Sie mit diesem Header die Auswirkungen der Aktivierung von COEP: require-corp sehen, ohne dass sich dies auf die Funktion Ihrer Website auswirkt. 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 plattformübergreifenden Isolation betroffen sind, finden Sie hier allgemeine Richtlinien dazu, wie Sie diese plattformübergreifenden Ressourcen aktivieren:

  1. Legen Sie für ursprungsübergreifende Ressourcen wie Bilder, Skripts, Stylesheets, iFrames und andere den Cross-Origin-Resource-Policy: cross-origin-Header fest. Legen Sie für Ressourcen auf derselben Website den Header Cross-Origin-Resource-Policy: same-site fest.
  2. Für Ressourcen, die mit CORS geladen werden können, muss der Dienst aktiviert sein. Legen Sie dazu das Attribut crossorigin im entsprechenden HTML-Tag fest (z. B. <img src="example.jpg" crossorigin>). Achten Sie bei JavaScript-Abrufanfragen darauf, dass request.mode auf cors gesetzt ist.
  3. Wenn Sie leistungsstarke Funktionen wie SharedArrayBuffer in einem geladenen iframe verwenden möchten, hängen Sie allow="cross-origin-isolated" an <iframe> an.
  4. Wenn ursprungsübergreifende Ressourcen, die in iFrames oder Worker-Skripts geladen werden, eine andere 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 plattformübergreifenden Ressourcen aktiviert sind, legen Sie den Cross-Origin-Embedder-Policy: require-corp-Header für iframes und Worker-Scripts fest. Dies ist unabhängig von der Herkunft der Ressourcen erforderlich.
  6. Es dürfen keine Pop-up-Fenster mit unterschiedlichen Ursprüngen vorhanden sein, für die die Kommunikation über postMessage() erforderlich ist. Wenn die plattformübergreifende Isolation aktiviert ist, können sie nicht mehr verwendet werden. Sie können die Kommunikation in ein anderes Dokument verschieben, das nicht ursprungsübergreifend isoliert ist, oder eine andere Kommunikationsmethode verwenden (z. B. HTTP-Anfragen).

Cross-Origin-Isolation aktivieren

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

  1. Legen Sie den Header Cross-Origin-Opener-Policy: same-origin für das Dokument auf oberster Ebene fest. Wenn Sie Cross-Origin-Opener-Policy-Report-Only: same-origin festgelegt haben, ersetzen Sie ihn. Dadurch wird die Kommunikation zwischen dem übergeordneten Dokument und seinen Pop-up-Fenster blockiert.
  2. Legen Sie die Cross-Origin-Embedder-Policy: require-corp-Überschrift im Dokument der obersten Ebene fest. Wenn Sie Cross-Origin-Embedder-Policy-Report-Only: require-corp festgelegt haben, ersetzen Sie es. Dadurch wird das Laden von ursprungsübergreifenden Ressourcen blockiert, die nicht aktiviert sind.
  3. Prüfen Sie, ob self.crossOriginIsolated in der Console true zurückgibt. So können Sie prüfen, ob Ihre Seite ursprungsübergreifend isoliert ist.

Ressourcen