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.

Eiji Kitamura

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.

Ermitteln, wo auf Ihrer Website SharedArrayBuffer verwendet wird
Ab Chrome 92 funktionieren Funktionen, die SharedArrayBuffer verwenden, nicht mehr ohne ursprungsübergreifende Isolierung. Wenn Sie aufgrund einer Meldung zur Einstellung von SharedArrayBuffer auf diese Seite gelangt sind, wird SharedArrayBuffer wahrscheinlich entweder auf Ihrer Website oder in einer der eingebetteten Ressourcen verwendet. Damit auf Ihrer Website aufgrund der Einstellung keine Probleme auftreten, sollten Sie zuerst ermitteln, wo die Funktion verwendet wird.

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 plattformübergreifenden Isolation 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 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 es als Teil Ihrer Website implementiert ist, folgen Sie der Anleitung unten, um die plattformübergreifende Isolation zu aktivieren.
Warnung in der DevTools-Konsole, 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 die Kopfzeile übernommen wird, sollten für den von Ihnen registrierten Endpunkt Berichte zur Einstellung 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 mit diesem Header können Sie 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 plattformübergreifende Ressourcen wie Bilder, Scripts, Stylesheets, Iframes usw. den Header Cross-Origin-Resource-Policy: cross-origin fest. Legen Sie für Ressourcen auf derselben Website den Header Cross-Origin-Resource-Policy: same-site fest.
  2. Bei 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 festgelegt sein.
  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 Ressourcen mit unterschiedlichen Ursprüngen, die in Iframes oder Worker-Scripts geladen werden, eine weitere Ebene von Iframes oder Worker-Scripts 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 plattformü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 die Cross-Origin-Opener-Policy: same-origin-Überschrift im Dokument der obersten Ebene fest. Wenn Sie Cross-Origin-Opener-Policy-Report-Only: same-origin festgelegt hatten, ersetzen Sie es. 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 hatten, ersetzen Sie es. Dadurch wird das Laden von plattformübergreifenden Ressourcen blockiert, die nicht aktiviert sind.
  3. Prüfen Sie, ob self.crossOriginIsolated in der Console true zurückgibt, um zu bestätigen, dass Ihre Seite plattformübergreifend isoliert ist.

Ressourcen