Machen Sie Ihre Website mit COOP und COEP "Cross-Origin isoliert"

Verwenden Sie COOP und COEP, um eine isolierte Cross-Origin-Umgebung einzurichten und leistungsstarke Funktionen wie z SharedArrayBuffer, performance.measureMemory ()und die JS-API zur Selbstprofilierung.

13. April 2020
Aktualisiert 1. September 2020

Es erscheint in:
Gesichert und geladen

Einige Web-APIs erhöhen das Risiko von Seitenkanalangriffen wie Spectre. Um dieses Risiko zu minimieren, bieten Browser eine Opt-In-basierte Sandbox an, die als Cross-Origin-Sandbox bezeichnet wird. Mit einem isolierten Cross-Origin-Status kann die Webseite privilegierte Funktionen verwenden, darunter:

Der isolierte Kreuzursprungszustand verhindert auch Modifikationen von
document.domain. (Macht zu ändern document.domain ermöglicht die Kommunikation zwischen Dokumenten auf derselben Site und wurde als Lücke in derselben Ursprungsrichtlinie angesehen.

Um sich für einen isolierten Cross-Origin-Status zu entscheiden, müssen Sie im Hauptdokument die folgenden HTTP-Header senden:

 require-corp
 gleicher Herkunft

Diese Header weisen den Browser an, das Laden von Ressourcen oder Iframes zu blockieren, die nicht von Ursprungsdokumenten geladen werden sollen, und zu verhindern, dass Ursprungsfenster direkt mit Ihrem Dokument interagieren. Dies bedeutet auch, dass für Cross-Loading-Ressourcen Abonnements erforderlich sind.

Sie können durch Untersuchen feststellen, ob sich eine Webseite in einem isolierten Ursprungszustand befindet
self.crossOriginIsolated. (Dies funktioniert in Firefox, wurde jedoch noch nicht in Chrome implementiert.)

Dieser Artikel zeigt, wie diese neuen Überschriften verwendet werden. In einem Folgeartikel werde ich mehr Hintergrund und Kontext bereitstellen.

Implementieren Sie COOP und COEP, um den Ursprung Ihrer Website zu isolieren

Integra COOP und COEP

Wenn Sie COOP für ein Dokument der obersten Ebene aktivieren, haben Fenster mit demselben Ursprung und aus dem Dokument geöffnete Fenster eine separate Suchkontextgruppe, es sei denn, sie befinden sich mit denselben COOP-Einstellungen im selben Ursprung. Daher werden offene Fenster isoliert.

Eine Navigationskontextgruppe ist eine Gruppe von Registerkarten, Fenstern oder Iframes, die denselben Kontext verwenden. Zum Beispiel, wenn eine Website (https://a.example) öffnet ein Popup-Fenster (https://b.example), das sich öffnende Fenster und das Popup-Fenster haben denselben Browserkontext und können über die DOM-API wie auf einander zugreifen
window.opener.

Ab Chrome 83 ist für COOP noch keine dedizierte DevTools-Unterstützung verfügbar. Sie können jedoch überprüfen window.opener === null aus dem offenen Fenster oder
opensWindow.closed === true Klicken Sie im Eröffnungsfenster auf, um festzustellen, ob sie sich in separaten Browserkontextgruppen befinden.

2. Stellen Sie sicher, dass für die Ressourcen CORP oder CORS aktiviert ist

Stellen Sie sicher, dass alle Ressourcen auf der Seite mit HTTP CORP- oder CORS-Headern geladen sind. Dieser Schritt ist für Schritt vier erforderlich, der COEP aktiviert.

Dies sollten Sie je nach Art der Ressource tun:

• Wenn erwartet wird, dass die Ressource geladen wird nur vom gleichen Ursprung, wähle aus Herkunftsübergreifende Ressourcenrichtlinie: gleicher Ursprung Header.
• Wenn erwartet wird, dass die Ressource geladen wird nur von derselben Stelle, aber von unterschiedlicher Herkunft, wähle aus Ursprungsübergreifende Ressourcenrichtlinie: gleiche Site Header.
• Wenn die Ressource ist von Kreuzursprüngen unter Ihrer Kontrolle geladen, wähle aus
  Cross-Origin-Resource-Policy: Cross-Origin Header wenn möglich.
• Für Cross-Origin-Ressourcen, auf die Sie keinen Einfluss haben:
  • Verwenden Sie die Crossorigin Attribut im Payload-HTML-Tag, wenn die Ressource mit CORS bereitgestellt wird.
  • Bitten Sie den Ressourcenbesitzer, CORS oder CORP zu unterstützen.
• Verwenden Sie für Iframes die CORP- und COEP-Header wie folgt:
  Herkunftsübergreifende Ressourcenrichtlinie: gleicher Ursprung y Cross-Origin-Embedder-Policy: require-corp.

Bevor Sie COEP vollständig aktivieren, können Sie einen Test mit dem durchführen
Ursprungsübergreifender Embedder-Policy-Only-Report Header, um zu prüfen, ob die Richtlinie tatsächlich funktioniert. Sie erhalten Berichte, ohne den eingebetteten Inhalt zu blockieren. Wenden Sie dies rekursiv auf alle Dokumente an. Informationen zum HTTP-Header nur für Berichte finden Sie unter Beobachten von Problemen mit der Berichts-API.

4. Aktivieren Sie COEP

Wenn Sie bestätigt haben, dass alles funktioniert und alle Ressourcen korrekt geladen werden können, wenden Sie das an Cross-Origin-Embedder-Policy: require-corp HTTP-Header für alle Dokumente, einschließlich derer, die mithilfe von Iframes eingebettet sind.

Stellen Sie fest, ob die Isolierung mit erfolgreich war self.crossOriginIsolated

das self.crossOriginIsolated Eigenschaft gibt zurück wahr Wenn sich die Webseite in einem Ursprungs-isolierten Zustand befindet und alle Ressourcen und Fenster innerhalb derselben Navigationskontextgruppe isoliert sind. Mit dieser API können Sie feststellen, ob Sie die Navigationskontextgruppe erfolgreich isoliert und Zugriff auf leistungsstarke Funktionen wie z performance.measureMemory ().

Debuggen Sie Probleme mit Chrome DevTools

Bei Ressourcen, die auf dem Bildschirm gerendert werden, z. B. Bilder, ist es ziemlich einfach, COEP-Probleme zu erkennen, da die Anforderung hängen bleibt und die Seite anzeigt, dass ein Bild fehlt. Bei Assets, die nicht unbedingt visuelle Auswirkungen haben, wie z. B. Skripts oder Stile, können COEP-Probleme jedoch unbemerkt bleiben. Verwenden Sie für diese das DevTools-Netzwerkfenster. Wenn es ein Problem mit COEP gibt, sollten Sie sehen
(blockiert: NotSameOriginAfterDefaultedToSameOriginByCoep) beim Bedingung
Säule.

Sie können dann auf den Eintrag klicken, um weitere Details anzuzeigen.

Beobachten Sie Probleme mit der Berichts-API

das Berichts-API Es ist ein weiterer Mechanismus, mit dem Sie verschiedene Probleme erkennen können. Sie können die Berichts-API so konfigurieren, dass der Browser Ihrer Benutzer angewiesen wird, einen Bericht zu senden, wenn COEP das Laden einer Ressource blockiert oder COOP ein Popup-Fenster isoliert. Chrome hat das unterstützt
Bericht an

Header seit Version 69 für eine Vielzahl von Anwendungen, einschließlich COEP und COOP.

1. Aktivieren Sie 2 Flags in chrome://flags 2. Registrieren Sie einen Originaltest

Aktivieren Sie 2 Flags in chrome://flags

• Ursprungsübergreifende Eröffnungsrichtlinienberichte (#cross-Origin-Opener-Policy-Reporting)
• Zugriff auf Berichte zur Ursprungsrichtlinie für unterschiedliche Herkunft#cross-Origin-Opener-Policy-Access-Reporting)

Registrieren Sie einen Ursprungsnachweis

Mit Origin-Tests können Sie neue Funktionen testen und der Community für Webstandards Feedback zu deren Benutzerfreundlichkeit, Praktikabilität und Effektivität geben. Weitere Informationen finden Sie in der Origin-Testhandbuch für Webentwickler. Um sich für diesen oder einen anderen Herkunftsnachweis anzumelden, besuchen Sie die Registrierungsseite.

1. Fordern Sie einen Token an von Ihrer Herkunft.
2. Fügen Sie das Token Ihren Seiten hinzu. Es gibt zwei Möglichkeiten, dies zu tun:
   • Füge hinzu ein Ursprungsversuch Tag zum Header jeder Seite. Dies könnte beispielsweise folgendermaßen aussehen:
     
   • Wenn Sie Ihren Server konfigurieren können, können Sie das Token auch mit a hinzufügen Origin-Trial HTTP-Header. Der resultierende Antwortheader sollte folgendermaßen aussehen:
     Origin-Trial: TOKEN_GOES_HERE

Vorsicht:
Um die COOP-Berichts-API verwenden zu können, muss das Token als HTTP-Header anstelle von a bereitgestellt werden Etikette.

Fügen Sie das hinzu, um anzugeben, wohin der Browser Berichte senden soll Bericht an HTTP-Header für jedes Dokument, das mit einem COEP- oder COOP-HTTP-Header geliefert wird. das
Bericht an Der Header unterstützt auch einige zusätzliche Parameter zum Konfigurieren der Berichte. Beispielsweise:

 {group: 'coep_report', max_age: 86400, Endpunkte: [{url: 'https://first-party-test.glitch.me/report'}]}, {group: 'coop_report', max_age: 86400, Endpunkte : [{url: 'https://first-party-test.glitch.me/report'}]}

Das Parameterobjekt hat drei Eigenschaften:

Gruppe

das Gruppe Die Eigenschaft benennt Ihre verschiedenen Berichtsendpunkte. Verwenden Sie diese Namen, um auf eine Teilmenge Ihrer Berichte abzuzielen. Zum Beispiel in der
Cross-Origin-Embedder-Policy y Cross-Origin-Opener-Policy Anweisungen können Sie den relevanten Endpunkt angeben, indem Sie den Gruppennamen angeben report-to =. Beispielsweise:

 require-corp; report-to = "coep_report"
 gleicher Ursprung; report-to = "coop_report"

Wenn der Browser darauf stößt, verweist er auf die Bericht an Wert mit Gruppe Eigentum in der Bericht an Header, um den Endpunkt zu finden. Dieses Beispiel für Querverweise coep_report y coop_report um den Endpunkt zu finden https://first-party-test.glitch.me/report.

Wenn Sie lieber Berichte erhalten möchten, ohne eingebetteten Inhalt zu blockieren oder ein Popup zu isolieren, fügen Sie hinzu -Report-Only zu den jeweiligen Überschriften: d.h. Ursprungsübergreifender Embedder-Policy-Only-Report y
Origin-Crosser-Opener-Policy-Only-Report. Beispielsweise:

 require-corp; report-to = "coep_report"
 gleicher Ursprung; report-to = "coop_report"

Auf diese Weise sendet der Browser, wenn er Ursprungsressourcen ohne CORP oder CORS erkennt, einen Bericht über die Berichts-API, ohne diese Ressourcen aufgrund von COEP zu blockieren.

Wenn der Browser ein originalübergreifendes Popup öffnet, sendet er einen Bericht, ohne das Fenster aufgrund von COOP tatsächlich zu isolieren. Es wird auch gemeldet, wenn verschiedene Navigationskontextgruppen versuchen, aufeinander zuzugreifen, jedoch nur im Modus "Nur Bericht".

max_age

das max_age Die Eigenschaft gibt die Zeit in Sekunden an, nach der nicht gesendete Berichte gelöscht werden. Der Browser sendet die Berichte nicht sofort. Stattdessen werden sie außerhalb des Bandes gesendet, solange keine anderen Aufgaben mit höherer Priorität vorhanden sind. das max_age verhindert, dass der Browser Berichte sendet, die zu veraltet sind, um nützlich zu sein. Beispielsweise, max_age: 86400 bedeutet, dass nicht mehr als vierundzwanzig Stundenberichte gesendet werden.

Endpunkte

das Endpunkte Die Eigenschaft gibt die URLs eines oder mehrerer Berichtsendpunkte an. Der Endpunkt muss CORS akzeptieren, wenn er auf einer anderen Quelle gehostet wird. Der Browser sendet Berichte mit dem Inhaltstyp anwendung / berichte + json.

Ein Beispiel für die Nutzlast des COEP-Berichts bei einem Absturz einer originensübergreifenden Ressource sieht folgendermaßen aus:

[ {
 "Alter" : 25101 ,
 "Körper" : {
 "Blocked-URL" : "https://third-party-test.glitch.me/check.svg?" ,
 "BlockedURL" : "https://third-party-test.glitch.me/check.svg?" ,
 "Ziel" : "Bild" ,
 "Disposition" : "erzwingen" ,
 "type" : "corp"
 } ,
 "Typ" : "Coep" ,
 "url" : "https://first-party-test.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, wie Gecko) Chrome / 87.0.4249.0 Safari / 537.36"
 } ]

Ein Beispiel für eine COOP-Berichtsnutzlast beim Öffnen eines isolierten Popups sieht folgendermaßen aus:

[ {
 "Alter" : 7 ,
 "Körper" : {
 "Disposition" : "erzwingen" ,
 "effektivPolicy" : "gleicher Ursprung" ,
 "nextResponseURL" : "https://third-party-test.glitch.me/popup?report-only&coop=same-origin&" ,
 "Typ" : "Navigation-aus-Antwort"
 } ,
 "Typ" : "Coop" ,
 "url" : "https://first-party-test.glitch.me/coop?coop=same-origin&" ,
 "user_agent" : "Mozilla / 5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit / 537.36 (KHTML, wie Gecko) Chrome / 87.0.4246.0 Safari / 537.36"
 } ]

Wenn verschiedene Navigationskontextgruppen versuchen, aufeinander zuzugreifen (nur im Modus "Nur Bericht"), sendet COOP auch einen Bericht. Zum Beispiel ein Bericht, wenn
POST-Meldung () Sie versuchen es würde so aussehen:

[ {
 "Alter" : 51785 ,
 "Körper" : {
 "columnNumber" : 18 ,
 "Disposition" : "Berichterstattung" ,
 "effektivPolicy" : "gleicher Ursprung" ,
 "lineNumber" : 83 ,
 "property" : "postMessage" ,
 "sourceFile" : "https://first-party-test.glitch.me/popup.js" ,
 "type" : "access-from-coop-page-to-openee"
 } ,
 "Typ" : "Coop" ,
 "url" : "https://first-party-test.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, wie Gecko) Chrome / 87.0.4246.0 Safari / 537.36"
 } ,
 {
 "Alter" : 51785 ,
 "Körper" : {
 "Disposition" : "Berichterstattung" ,
 "effektivPolicy" : "gleicher Ursprung" ,
 "property" : "postMessage" ,
 "type" : "access-to-coop-page-from-openee"
 } ,
 "Typ" : "Coop" ,
 "url" : "https://first-party-test.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, wie Gecko) Chrome / 87.0.4246.0 Safari / 537.36"
 } ]

Fazit

Verwenden Sie eine Kombination aus HTTP-COOP- und COEP-Headern, um sich für eine Webseite in einem speziellen, originensübergreifenden isolierten Zustand zu entscheiden. Sie können untersuchen
self.crossOriginIsolated um festzustellen, ob sich eine Webseite in einem isolierten Cross-Origin-Zustand befindet.

In zukünftigen Versionen von Chrome wird dieser Ursprungs-isolierte Status verhindert
Ändern
document.domain

und es gibt Ihnen Zugriff auf leistungsstarke Funktionen wie:

Wir werden diesen Beitrag auf dem neuesten Stand halten, sobald neue Funktionen für diesen entstehungsübergreifenden isolierten Zustand verfügbar sind und weitere Verbesserungen an DevTools rund um COOP und COEP vorgenommen werden.