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 das API de autoperfilado de JS.

13. April 2020
Aktualisiert 1. September 2020

Es erscheint in:
Gesichert und geladen

Algunas API Netz aumentan el riesgo de ataques de Kanal lateral como Spectre. Para mitigar ese riesgo, los Browser ofrecen un entorno aislado basado en Opt-In llamado aislado de origen cruzado. Con un estado aislado de origen cruzado, la página web podrá utilizar funciones privilegiadas que incluyen:

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.

Para optar por un estado aislado de origen cruzado, debe enviar los siguientes Überschriften HTTP en el documento principal:

 require-corp
gleicher Herkunft

Estos encabezados le indican al Browser que bloquee la carga de recursos o iframes que no hayan optado por ser cargados por documentos de origen cruzado y eviten que las ventanas de origen cruzado interactúen directamente con su documento. Esto también significa que los recursos que se cargan en origen cruzado requieren suscripciones.

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 Auf dem Etikett HTML de carga si el recurso se sirve con CORS.
  • 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 encabezado para examinar si la política realmente funciona. Recibirás informes sin bloquear el Inhalt incrustado. Aplique esto de forma recursiva a todos los documentos. Para obtener información sobre el encabezado HTTP solo para informes, consulte Observar problemas con la API de informes.

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:
     
   • Si puede configurar su Server, también puede agregar el token usando un 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, endpoints: [{ URL: 'https://first-party-test.glitch.me/report'}]},{ group: 'coop_report', max_age: 86400, endpoints: [{ 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"
same-origin; 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"
same-origin; 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 propiedad especifica las URL de uno o más puntos finales de informes. El punto final debe aceptar CORS si está alojado en un origen diferente. El navegador enviará informes con un Art des Inhalts von anwendung / berichte + json.

Ein Beispiel für die Nutzlast des COEP-Berichts bei einem Absturz einer originensübergreifenden Ressource sieht folgendermaßen 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://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, like 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:

[{
"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://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, like 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:

[{
"age": 51785,
"body": {
"columnNumber": 18,
"disposition": "reporting",
"effectivePolicy": "same-origin",
"lineNumber": 83,
"property": "postMessage",
"sourceFile": "https://first-party-test.glitch.me/popup.js",
"type": "access-from-coop-page-to-openee"
},
"type": "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, 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://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, like 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.