GitHub-Pages-Tools

Kostenlose COOP/COEP/CORP Header Builder

Konfiguriere Cross-Origin-Isolation-Header für SharedArrayBuffer, WASM und Sicherheit.

Tool wird geladen...

Was ist COOP/COEP/CORP Header Builder?

Cross-Origin-Isolation ist eine Reihe von HTTP-Headern, die steuern, wie eine Seite mit Cross-Origin-Fenstern und -Ressourcen interagiert. COOP steuert, ob auf diese Seite von anderen Urspr眉ngen über window.opener zugegriffen werden kann. COEP steuert, ob Cross-Origin-Ressourcen (Bilder, Schriftarten, Skripte) geladen werden dürfen. CORP steuert, ob diese Ressource von anderen Urspr眉ngen geladen werden darf. Zusammen ermöglichen sie leistungsstarke Funktionen wie SharedArrayBuffer und hochauflösende Timer.

Kurze Antwort

Erstellen Sie Cross-Origin-Isolation-Header für SharedArrayBuffer und Opener-Sicherheit. COOP steuert den window.opener-Zugriff. COEP steuert das Laden von Cross-Origin-Ressourcen. CORP steuert, ob andere Urspr眉nge Ihre Ressourcen laden können. Verwenden Sie die moderate Voreinstellung für die meisten Seiten, die Isolation mit Unterst眉tzung für Drittanbieter-Einbettungen benötigen.

Last updated: 2026-05-28

Einschränkungen

Cross-Origin-Isolation ist eine starke Einschränkung, die Drittanbieter-Einbettungen, CDN-Ressourcen, Analysen und Schriftarten stillschweigend besch盲digen kann. Testen Sie gründlich auf jedem Seitentyp vor der Durchsetzung.
COEP credentialless wird in Chrome 113+, Edge 113+ und Firefox 128+ unterstützt. Ältere Browser und Safari unterstützen es möglicherweise nicht, was zum Fehlschlagen von Cross-Origin-Ressourcen führt.
Einige Hosting-Plattformen (einschliesslich GitHub Pages) unterstützen das Setzen benutzerdefinierter COOP/COEP/CORP-Header nicht. Verwenden Sie ein CDN oder einen Reverse-Proxy (Cloudflare, Netlify) davor, um sie hinzuzufügen.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

So nutzt du dieses Tool

Wählen Sie eine Voreinstellung für das Isolationsziel oder wählen Sie 'Benutzerdefiniert', um jeden Header einzeln zu konfigurieren.
Überprüfen Sie die Header-Werte —strengere Isolation ermöglicht mehr Funktionen, kann aber Drittanbieter-Einbettungen beeinträchtigen.
Kopieren Sie die Header und fügen Sie sie Ihrer Server- oder CDN-Konfiguration hinzu.
Verwenden Sie die Debugging-Checkliste, um nach der Bereitstellung besch盲digte Ressourcen zu identifizieren.

Wofür du es nutzen kannst

SharedArrayBuffer und erweiterte WebAssembly-Funktionen für eine rechenintensive Web-App aktivieren.
Die Opener-Beziehung einer Seite isolieren, um Cross-Origin-Angriffe zu verhindern, während CDN-Bilder und Drittanbieter-Schriftarten weiterhin geladen werden.
Minimale Isolation konfigurieren, die den Opener-Zugriff verhindert, aber das Laden eingebetteter Ressourcen nicht einschränkt.

Anwendungsfalle

Praxisbeispiele

Beispiel

Rechenintensive Web-App

Eine Web-App benötigt SharedArrayBuffer für die Echtzeit-Audioverarbeitung. Verwenden Sie die Vollisolations-Voreinstellung: COOP same-origin, COEP require-corp, CORP same-origin. Alle Drittanbieter-Ressourcen müssen CORP-Header senden oder mit crossorigin geladen werden.

Beispiel

Statische Seite mit Drittanbieter-Einbettungen

Ein Blog verwendet Google Fonts, ein CDN für Bilder und eingebettete YouTube-Videos. Verwenden Sie die moderate Voreinstellung mit COEP credentialless, damit Drittanbieter-Ressourcen ohne CORP-Header geladen werden, während die Opener-Isolation erhalten bleibt.

Haufige Fehler

COEP require-corp setzen, ohne sicherzustellen, dass alle Drittanbieter-Ressourcen CORP-Header senden —Bilder, Schriftarten und Skripte von CDNs werden stillschweigend blockiert.
COOP same-origin verwenden, wenn die Seite mit Popups kommunizieren oder OAuth-Umleitungsfl眉sse verwenden muss —Popups können nicht auf window.opener zugreifen.
Vergessen, dass COEP credentialless neuer ist und nicht in allen Browsern unterstützt wird —überprüfen Sie die Browserkompatibilität vor der Bereitstellung.

Überprüfung

Öffnen Sie die DevTools-Konsole und suchen Sie nach CORP/COEP-Blockierungsfehlern nach der Bereitstellung der Header.
Verwenden Sie crossOriginIsolated in der Konsole: self.crossOriginIsolated sollte true zurückgeben, wenn die vollständige Isolation korrekt funktioniert.

FAQ

Fragen zu COOP/COEP/CORP Header Builder

Was ist der Unterschied zwischen COEP require-corp und credentialless?

require-corp erfordert, dass JEDE Cross-Origin-Ressource einen Cross-Origin-Resource-Policy-Header sendet oder mit dem crossorigin-Attribut geladen wird. credentialless ist eine neuere Alternative, die automatisch Anmeldeinformationen von Cross-Origin-Anfragen entfernt und es Drittanbieter-Ressourcen ermöglicht, ohne CORP-Header zu laden. credentialless ist kompatibler mit bestehenden CDN- und Drittanbieter-Inhalten.

Ben枚tige ich Cross-Origin-Isolation für meine Website?

Nur wenn Sie SharedArrayBuffer, hochauflösendes performance.now() (Mikrosekunden-Genauigkeit) oder bestimmte WebAssembly-Funktionen benötigen. Die meisten Content-Websites, Blogs und E-Commerce-Seiten benötigen KEINE Cross-Origin-Isolation. Beginnen Sie mit der relaxierten Voreinstellung und erhöhen Sie die Isolation nur, wenn Ihre Web-App die damit aktivierten Funktionen erfordert.

Verwandte Tools