Mit der ursprungsübergreifenden Isolierung kann eine Webseite leistungsstarke Funktionen wie „SharedArrayBuffer“ nutzen. In diesem Artikel wird erläutert, wie du die ursprungsübergreifende Isolierung auf deiner Website aktivierst.
In diesem Leitfaden 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 höherer Genauigkeit verwenden möchten.
Wenn du die ursprungsübergreifende Isolierung aktivieren möchtest, solltest du die Auswirkungen auf andere ursprungsübergreifende Ressourcen auf deiner Website bewerten, z. B. Anzeigen-Placements.
SharedArrayBuffer
verwendet wirdSharedArrayBuffer
verwenden, nicht mehr ohne ursprungsübergreifende Isolierung. Wenn Sie aufgrund einer Nachricht zur Einstellung von SharedArrayBuffer
auf diese Seite gelangt sind, liegt es wahrscheinlich daran, dass entweder Ihre Website oder eine der darin eingebetteten Ressourcen SharedArrayBuffer
verwendet. Um sicherzustellen, dass Ihre Website nicht mehr funktioniert, sollten Sie zuerst herausfinden, wo sie verwendet wird.Wenn du nicht sicher bist, wo auf deiner Website ein SharedArrayBuffer
verwendet wird, gibt es zwei Möglichkeiten, dies herauszufinden:
- Chrome-Entwicklertools verwenden
- (Fortgeschritten) 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.
- Öffnen Sie die Chrome-Entwicklertools auf der Seite, von der Sie vermuten, dass sie
SharedArrayBuffer
verwenden. - Wählen Sie das Steuerfeld Console aus.
- Wenn die Seite
SharedArrayBuffer
verwendet, 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 dieSharedArrayBuffer
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 deiner Website implementiert wird, folge der Anleitung unten, um die ursprungsübergreifende Isolierung zu aktivieren.
![DevToools-Konsolenwarnung, wenn „SharedArrayBuffer“ ohne ursprungsübergreifende Isolierung verwendet wird](https://web.dev/static/articles/cross-origin-isolation-guide/image/devtoools-console-warning-a56031c56b918.png?authuser=6&hl=de)
(Fortgeschritten) Einstellungsberichte verwenden
Einige Browser haben eine Funktion, durch die APIs für einen bestimmten Endpunkt eingestellt werden.
- Richten Sie einen Berichtsserver zur Einstellung ein und rufen Sie die Berichts-URL ab. Dazu können Sie entweder einen öffentlichen Dienst nutzen oder selbst einen Dienst erstellen.
- Lege mithilfe der URL den folgenden HTTP-Header für Seiten fest, auf denen möglicherweise
SharedArrayBuffer
bereitgestellt werden.Report-To: {"group":"default","max_age":86400,"endpoints":[{"url":"THE_DEPRECATION_ENDPOINT_URL"}]}
- Sobald der Header übertragen wird, sollte der Endpunkt, für den Sie sich registriert haben, Einstellungsberichte erfassen.
Eine Beispielimplementierung finden Sie hier: https://cross-origin-isolation.glitch.me.
Auswirkungen der ursprungsübergreifenden Isolierung analysieren
Wäre es nicht großartig, wenn Sie die Auswirkungen der Aktivierung der ursprungsübergreifenden Isolierung auf Ihre Website bewerten könnten, ohne dass dabei tatsächlich Probleme auftreten? Mit den HTTP-Headern Cross-Origin-Opener-Policy-Report-Only
und Cross-Origin-Embedder-Policy-Report-Only
ist genau das möglich.
- Legen Sie
Cross-Origin-Opener-Policy-Report-Only: same-origin
im Dokument auf oberster Ebene fest. Wie der Name schon sagt, sendet dieser Header nur Berichte über die Auswirkungen, dieCOOP: same-origin
auf Ihre Website haben würde. Die Kommunikation mit Pop-up-Fenstern wird dadurch nicht deaktiviert. - Richten Sie die Berichterstellung ein und konfigurieren Sie einen Webserver, um die Berichte zu empfangen und zu speichern.
- Legen Sie
Cross-Origin-Embedder-Policy-Report-Only: require-corp
im Dokument auf oberster Ebene fest. Auch hier zeigt dieser Header die Auswirkungen der Aktivierung vonCOEP: require-corp
, ohne dass die Funktion Ihrer Website tatsächlich beeinträchtigt wird. Sie können diesen Header so konfigurieren, dass Berichte an denselben Berichterstellungsserver gesendet werden, den Sie im vorherigen Schritt eingerichtet haben.
Auswirkungen der ursprungsübergreifenden Isolierung minimieren
Nachdem Sie festgestellt haben, welche Ressourcen von der ursprungsübergreifenden Isolierung betroffen sind, finden Sie hier allgemeine Richtlinien dazu, wie Sie diese ursprungsübergreifenden Ressourcen aktivieren:
- Legen Sie für ursprungsübergreifende Ressourcen wie Bilder, Skripts, Stylesheets, iFrames usw. den
Cross-Origin-Resource-Policy: cross-origin
-Header fest. Legen Sie bei Ressourcen auf derselben Website denCross-Origin-Resource-Policy: same-site
-Header fest. - Bei Ressourcen, die über CORS geladen werden können, muss die Funktion aktiviert sein. Dazu legen Sie das Attribut
crossorigin
im entsprechenden HTML-Tag fest (z. B.<img src="example.jpg" crossorigin>
). Für eine JavaScript-Abrufanfrage mussrequest.mode
aufcors
gesetzt sein. - Wenn Sie leistungsstarke Funktionen wie
SharedArrayBuffer
in einem geladenen iFrame nutzen möchten, hängen Sieallow="cross-origin-isolated"
an<iframe>
an. - Wenn ursprungsübergreifende Ressourcen, die in iFrames oder Worker-Skripts geladen werden, eine andere Ebene von iFrames oder Worker-Skripts enthalten, wenden Sie die in diesem Abschnitt beschriebenen Schritte rekursiv an, bevor Sie fortfahren.
- Nachdem Sie bestätigt haben, dass alle ursprungsübergreifenden Ressourcen aktiviert sind, legen Sie den
Cross-Origin-Embedder-Policy: require-corp
-Header in iFrames und Worker-Skripts fest. Dies ist unabhängig von gleicher oder ursprungsübergreifendem Ursprung erforderlich. - Achten Sie darauf, dass keine ursprungsübergreifenden Pop-up-Fenster vorhanden sind, die eine Kommunikation über
postMessage()
erfordern. Es gibt keine Möglichkeit, sie aufrechtzuerhalten, wenn die ursprungsübergreifende Isolierung aktiviert ist. 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).
Ursprungsübergreifende Isolierung aktivieren
Nachdem Sie die Auswirkungen durch die ursprungsübergreifende Isolierung abgeschwächt haben, finden Sie hier allgemeine Richtlinien für die Aktivierung der ursprungsübergreifenden Isolierung:
- Legen Sie den
Cross-Origin-Opener-Policy: same-origin
-Header im Dokument auf oberster Ebene fest. Wenn duCross-Origin-Opener-Policy-Report-Only: same-origin
festgelegt hast, ersetze diesen. Dadurch wird die Kommunikation zwischen Ihrem Dokument auf oberster Ebene und den zugehörigen Pop-up-Fenstern blockiert. - Legen Sie den
Cross-Origin-Embedder-Policy: require-corp
-Header im Dokument auf oberster Ebene fest. Wenn duCross-Origin-Embedder-Policy-Report-Only: require-corp
festgelegt hast, ersetze diesen. Dadurch wird das Laden von ursprungsübergreifenden Ressourcen blockiert, die nicht aktiviert sind. - Prüfe, ob
self.crossOriginIsolated
in der Consoletrue
zurückgibt. So kannst du prüfen, ob deine Seite ursprungsübergreifend isoliert ist.