Website mit COOP und COEP „ursprungsübergreifend isoliert“ machen

Verwenden Sie COOP und COEP, um eine ursprungsübergreifende isolierte Umgebung einzurichten und leistungsstarke Funktionen wie SharedArrayBuffer, performance.measureUserAgentSpecificMemory() und einen hochauflösenden Timer genauer zu aktivieren.

Eiji Kitamura

Updates

• 21. Juni 2022: Bei der ursprungsübergreifenden Isolierung sind auch Worker-Skripts erforderlich aktiviert ist. Es wurden einige Erläuterungen hinzugefügt.
• 5. August 2021: Die JS Self-Profiling API wurde als eine der APIs erwähnt, die ursprungsübergreifende Isolierung erforderlich, aber aufgrund der kürzlich erfolgten Änderung des Richtung, dass es entfernt wird.
• 6. Mai 2021: Basierend auf dem Feedback und den gemeldeten Problemen haben wir beschlossen, Zeitachse für die Nutzung von SharedArrayBuffer auf keinen ursprungsübergreifenden isolierten Websites in Chrome M92 eingeschränkt.
• 16. April 2021: Hinweise zu COEP-Anmeldedaten ohne Anmeldedaten hinzugefügt Modus und COOP „same-origin-allow-popups“ für eine entspannte Bedingung für ursprungsübergreifende Messung Isolation.
• 5. März 2021: Die Einschränkungen für SharedArrayBuffer wurden aufgehoben. performance.measureUserAgentSpecificMemory() und Debugging-Funktionen, die in Chrome 89 jetzt vollständig aktiviert sind. Demnächst verfügbare Funktionen, performance.now() und performance.timeOrigin, haben einen höheren Genauigkeit.
• 19. Februar 2021: Ein Hinweis zu den Funktionsrichtlinien wurde hinzugefügt. allow="cross-origin-isolated" und Debugging-Funktionen in den Entwicklertools.
• 15. Oktober 2020: self.crossOriginIsolated ist ab Chrome 87 verfügbar. Daher ist document.domain unveränderlich, wenn self.crossOriginIsolated gibt true zurück. performance.measureUserAgentSpecificMemory() beendet den Ursprungstest und ist in Chrome 89 standardmäßig aktiviert. Shared Array Buffer unter Android Chrome ab Chrome 88 verfügbar.

Einige Web-APIs erhöhen das Risiko von Side-Channel-Angriffen wie Spectre. Bis dieses Risiko zu mindern, bieten Browser eine Opt-in-basierte isolierte Umgebung namens ursprungsübergreifend isoliert. Im ursprungsübergreifend isolierten Zustand ist die Webseite privilegierte Funktionen nutzen, darunter:

Der ursprungsübergreifend isolierte Status verhindert außerdem Änderungen von document.domain (Durch das Ändern von document.domain ist die Kommunikation zwischen Dokumenten auf derselben Website und wird als Sicherheitslücke in der Same-Origin-Richtlinie.)

Zum Aktivieren eines ursprungsübergreifenden isolierten Status müssen Sie Folgendes senden: HTTP-Header im Hauptdokument:

Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin

Mit diesen Headern wird der Browser angewiesen, das Laden von Ressourcen oder iFrames zu blockieren. die nicht für das Laden durch ursprungsübergreifende Dokumente aktiviert sind, und verhindern, ursprungsübergreifenden Fenstern durch eine direkte Interaktion mit Ihrem Dokument. Dies gilt auch für bedeutet, dass für diese Ressourcen, die ursprungsübergreifend geladen werden, Aktivierungen erforderlich sind.

Sie können feststellen, ob sich eine Webseite ursprungsübergreifend isoliert befindet, indem Sie untersuchen self.crossOriginIsolated

In diesem Artikel erfahren Sie, wie Sie diese neuen Überschriften verwenden. Nachfassen in einer Follow-up-E-Mail Artikel Ich werde weitere Hintergrund- und Kontextinformationen bereitstellen.

Mit COOP und COEP Ihre Website ursprungsübergreifend isolieren

COOP und COEP einbinden

1. Header „Cross-Origin-Opener-Policy: same-origin“ für Dokument auf oberster Ebene festlegen

Wenn Sie COOP: same-origin für ein Dokument auf oberster Ebene aktivieren, Ursprung und im Dokument geöffnete Fenster haben ein separates Kontextgruppe, es sei denn, sie befinden sich am selben Ursprung und haben dieselbe COOP-Einstellung. Somit wird die Isolation für geöffnete Fenster und die gegenseitige Kommunikation zwischen beide Fenster deaktiviert sind.

Eine Browser-Kontextgruppe besteht aus einer Reihe von Fenstern, die aufeinander verweisen können. Für Beispiel: ein Dokument der obersten Ebene und seine untergeordneten Dokumente, die über <iframe> eingebettet sind. Wenn von einer Website (https://a.example) ein Pop-up-Fenster (https://b.example) geöffnet wird, das öffnende Fenster und das Pop-up-Fenster denselben Browserkontext, sodass Sie haben über DOM-APIs wie window.opener Zugriff aufeinander.

Sie können prüfen, ob sich der Fensteröffner und der geöffnete Browser im separaten Browser befinden Kontextgruppen aus den Entwicklertools erstellt werden.

2. Achten Sie darauf, dass CORP oder CORS für Ressourcen aktiviert ist

Achten Sie darauf, dass alle Ressourcen auf der Seite mit CORP oder CORS HTTP geladen werden Header. Dieser Schritt ist für Schritt 4 zum Aktivieren von COEP erforderlich.

Je nach Art der Ressource müssen Sie Folgendes tun:

• Wenn die Ressource voraussichtlich nur aus demselben Ursprung geladen werden soll, legen Sie Folgendes fest: Cross-Origin-Resource-Policy: same-origin-Header.
• Ob die Ressource nur von derselben Website, aber über verschiedene origin haben, legen Sie den Header Cross-Origin-Resource-Policy: same-site fest.
• Wenn die Ressource von Cross-Origin(s) unter Ihrer Kontrolle geladen wird, legen Sie den Parameter Cross-Origin-Resource-Policy: cross-origin-Header.
• Für ursprungsübergreifende Ressourcen, auf die Sie keine Kontrolle haben: <ph type="x-smartling-placeholder">
  </ph>
  • Verwenden Sie das Attribut crossorigin im geladenen HTML-Tag, wenn die Ressource mit CORS ausgeliefert werden. (Zum Beispiel: <img src="***" crossorigin>).
  • Bitten Sie den Inhaber der Ressource, entweder CORS oder CORP zu unterstützen.
• Befolgen Sie bei iFrames dieselben Prinzipien wie oben und legen Sie Cross-Origin-Resource-Policy: cross-origin (oder same-site, same-origin je nach Kontext).
• Mit WebWorker geladene Skripts müssen vom selben Ursprung bereitgestellt werden, Sie benötigen also keine CORP- oder CORS-Header.
• Für ein mit COEP: require-corp bereitgestelltes Dokument oder einen Worker, ursprungsübergreifend Unterressourcen, die ohne CORS geladen werden, müssen den Cross-Origin-Resource-Policy: cross-origin-Header festlegen, um das Einbetten zu aktivieren. Das gilt beispielsweise für <script>, importScripts, <link>, <video>, <iframe> usw.

3. Nutzen Sie den COEP-Report-Only-HTTP-Header, um eingebettete Ressourcen zu bewerten.

Bevor Sie COEP vollständig aktivieren, können Sie mit der Funktion Cross-Origin-Embedder-Policy-Report-Only-Header, um zu prüfen, ob die Richtlinie tatsächlich funktioniert. Du erhältst Berichte, ohne eingebettete Inhalte zu blockieren.

Diese Option rekursiv auf alle Dokumente anwenden, einschließlich des Dokuments der obersten Ebene. iFrames und Worker-Skripts. Informationen zum Nur-Bericht-HTTP-Header finden Sie unter Probleme mithilfe der Berichterstellung beobachten API hinzu.

4. COEP aktivieren

Sobald Sie sicher sind, dass alles funktioniert und alle Ressourcen erfolgreich geladen, wechsle den Cross-Origin-Embedder-Policy-Report-Only zum Header Cross-Origin-Embedder-Policy mit demselben Wert für alle einschließlich der über iFrames und Worker-Skripts eingebetteten Inhalte.

Bestimmen, ob die Isolierung mit self.crossOriginIsolated erfolgreich war

Das Attribut self.crossOriginIsolated gibt true zurück, wenn sich die Webseite in einer ursprungsübergreifend isoliert und alle Ressourcen und Fenster sind isoliert in derselben Browser-Kontextgruppe. Mit dieser API können Sie feststellen, die Browserkontextgruppe isoliert und auf leistungsstarke Funktionen wie performance.measureUserAgentSpecificMemory().

Probleme mit den Chrome-Entwicklertools beheben

Für Ressourcen, die auf dem Bildschirm gerendert werden, wie Bilder, um COEP-Probleme zu erkennen, da die Anfrage blockiert und die Seite auf ein fehlendes Bild hinweisen. Für Ressourcen, die keine visuelle Auswirkungen haben, wie Skripte oder Stile, können COEP-Probleme unbemerkt bleiben. Verwenden Sie dafür den Bereich „Netzwerk“ in den Entwicklertools. Wenn wenn ein Problem mit COEP vorliegt, (blocked:NotSameOriginAfterDefaultedToSameOriginByCoep) im Status Spalte.

Klicken Sie dann auf den Eintrag, um weitere Details zu sehen.

Sie können den Status von iFrames und Pop-up-Fenstern auch über die Anwendung. Rufen Sie den Bereich „Frames“ auf. auf der linken Seite und „Oben“ maximieren um die Ressourcenstruktur anzuzeigen.

<ph type="x-smartling-placeholder"></ph> Sie können den Status des iFrames prüfen, z. B. die Verfügbarkeit von SharedArrayBuffer, usw.

<ph type="x-smartling-placeholder"></ph> Sie können auch den Status der Pop-up-Fenster prüfen, z. B. ob es ursprungsübergreifend ist. isoliert.

Probleme mithilfe der Reporting API beobachten

Die Reporting API ist ein weiterer Mechanismus, verschiedene Probleme erkennen. Sie können die Reporting API so konfigurieren, des Nutzers Browser, der immer dann einen Bericht sendet, wenn COEP das Laden einer Ressource blockiert oder COOP ein Popup-Fenster isoliert. Chrome unterstützt die Reporting API seit Version 69 für eine Vielzahl von Anwendungen wie COEP und COOP.

Hier erfahren Sie, wie Sie die Reporting API konfigurieren und einen Server einrichten, finden Sie unter Berichterstellung verwenden API hinzu.

Beispiel für einen COEP-Bericht

Beispiel für COEP Bericht wenn die ursprungsübergreifende Ressource blockiert ist, sieht so aus:

[{
  "age": 25101,
  "body": {
    "blocked-url": "https://third-party-test.glitch.me/check.svg?",
    "blockedURL": "https://third-party-test.glitch.me/check.svg?",
    "destination": "image",
    "disposition": "enforce",
    "type": "corp"
  },
  "type": "coep",
  "url": "https://cross-origin-isolation.glitch.me/?coep=require-corp&coop=same-origin&",
  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4249.0 Safari/537.36"
}]

Beispiel für einen COOP-Bericht

Beispiel für COOP Nutzlast des Berichts Wenn ein Pop-up-Fenster isoliert geöffnet wird, sieht es so aus:

[{
  "age": 7,
  "body": {
    "disposition": "enforce",
    "effectivePolicy": "same-origin",
    "nextResponseURL": "https://third-party-test.glitch.me/popup?report-only&coop=same-origin&",
    "type": "navigation-from-response"
  },
  "type": "coop",
  "url": "https://cross-origin-isolation.glitch.me/coop?coop=same-origin&",
  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4246.0 Safari/537.36"
}]

Wenn verschiedene Browserkontextgruppen versuchen, aufeinander zuzugreifen (nur auf Nur Bericht Modus), sendet COOP ebenfalls einen Bericht. Ein Bericht, bei dem postMessage() würde so aussehen:

[{
  "age": 51785,
  "body": {
    "columnNumber": 18,
    "disposition": "reporting",
    "effectivePolicy": "same-origin",
    "lineNumber": 83,
    "property": "postMessage",
    "sourceFile": "https://cross-origin-isolation.glitch.me/popup.js",
    "type": "access-from-coop-page-to-openee"
  },
  "type": "coop",
  "url": "https://cross-origin-isolation.glitch.me/coop?report-only&coop=same-origin&",
  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4246.0 Safari/537.36"
},
{
  "age": 51785,
  "body": {
    "disposition": "reporting",
    "effectivePolicy": "same-origin",
    "property": "postMessage",
    "type": "access-to-coop-page-from-openee"
  },
  "type": "coop",
  "url": "https://cross-origin-isolation.glitch.me/coop?report-only&coop=same-origin&",
  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4246.0 Safari/537.36"
}]

Fazit

Verwenden Sie eine Kombination aus COOP- und COEP-HTTP-Headern, um eine Webseite für eine spezielle ursprungsübergreifend isoliert. Sie können dann self.crossOriginIsolated, um zu ermitteln, ob eine Webseite ursprungsübergreifend ist isolierten Zustand.

Dieser Beitrag wird aktualisiert, sobald neue Funktionen verfügbar sind. ursprungsübergreifend isolierter Status und weitere Verbesserungen an den Entwicklertools zu COOP und COEP.

Ressourcen

• Warum Sie „ursprungsübergreifend isoliert“ benötigen für leistungsstarke Funktionen
• Leitfaden zum Aktivieren der ursprungsübergreifenden Isolierung
• Updates für „SharedArrayBuffer“ in Android Chrome 88 und in Chrome für Computer 92
• Überwachen Sie die Speicherauslastung Ihrer Webseite mit measureUserAgentSpecificMemory().