Cross-Origin Headers für Astro konfigurieren
Schritt-für-Schritt-Anleitung: COOP, CORP und COEP per Middleware konfigurieren -- Spectre-Schutz mit Island-Kompatibilität.
Cross-Origin Headers in Astro
Die Cross-Origin Headers (COOP, CORP, COEP) schützen gegen Spectre-Seitenkanalangriffe, indem sie die Prozess-Isolation im Browser erzwingen. Sie sind mit 30 von 166 Punkten der zweitwichtigste Header-Block im Wolf-Agents Web Security Check.
Cross-Origin-Opener-Policy (COOP) isoliert Browsing-Kontexte. Cross-Origin-Resource-Policy (CORP) schützt Ressourcen vor Cross-Origin-Einbettung. Cross-Origin-Embedder-Policy (COEP) stellt sicher, dass alle eingebetteten Ressourcen explizit Cross-Origin-Zugriff erlauben. In Astro konfigurieren Sie alle drei per Middleware.
COEP erfordert besondere Aufmerksamkeit bei Astro-Projekten: Islands, die externe Ressourcen laden (Google Fonts, CDN-Images, Third-Party-Widgets), können durch require-corp blockiert werden. Verwenden Sie credentialless als pragmatische Alternative.
COOP und CORP per Middleware (SSR)
Setzen Sie Cross-Origin-Opener-Policy: same-origin und Cross-Origin-Resource-Policy: same-origin. Diese beiden Header haben keine Nebenwirkungen bei typischen Astro-Websites und sollten immer gesetzt werden.
// src/middleware.ts -- Cross-Origin Headers (SSR)
import { defineMiddleware } from 'astro:middleware';
export const onRequest = defineMiddleware(async (context, next) => {
const response = await next();
// Cross-Origin-Opener-Policy: Browsing-Kontexte isolieren
response.headers.set('Cross-Origin-Opener-Policy', 'same-origin');
// Cross-Origin-Resource-Policy: Ressourcen vor Einbettung schützen
response.headers.set('Cross-Origin-Resource-Policy', 'same-origin');
// COEP: Vorsicht bei externen Ressourcen!
// response.headers.set('Cross-Origin-Embedder-Policy', 'require-corp');
return response;
});COEP: credentialless vs. require-corp
COEP ist optional, aber notwendig für Features wie SharedArrayBuffer und hochpraezise Timer. Verwenden Sie credentialless statt require-corp, wenn Ihre Astro-App externe Ressourcen einbettet. Für OAuth-Login-Seiten setzen Sie COOP: same-origin-allow-popups, um Popup-Kommunikation zu erhalten.
// src/middleware.ts -- COEP mit credentialless (weniger restriktiv)
import { defineMiddleware } from 'astro:middleware';
export const onRequest = defineMiddleware(async (context, next) => {
const response = await next();
response.headers.set('Cross-Origin-Opener-Policy', 'same-origin');
response.headers.set('Cross-Origin-Resource-Policy', 'same-origin');
// credentialless erlaubt Cross-Origin-Ressourcen ohne CORP-Header
// Ermöglicht SharedArrayBuffer und high-resolution Timer
response.headers.set('Cross-Origin-Embedder-Policy', 'credentialless');
return response;
});// src/middleware.ts -- COOP mit OAuth-Popup-Kompatibilität
export const onRequest = defineMiddleware(async (context, next) => {
const response = await next();
const url = new URL(context.request.url);
// Login-Seite braucht Popup-Kommunikation (OAuth)
if (url.pathname.startsWith('/login')) {
response.headers.set('Cross-Origin-Opener-Policy',
'same-origin-allow-popups');
} else {
response.headers.set('Cross-Origin-Opener-Policy',
'same-origin');
}
response.headers.set('Cross-Origin-Resource-Policy', 'same-origin');
return response;
});SSG-Hosting-Varianten
Für statische Deployments setzen Sie die Cross-Origin Headers auf dem Webserver oder der Hosting-Plattform. Die Header gelten für alle Responses -- eine pfadbasierte Differenzierung ist auf dem Webserver weniger flexibel als in der Middleware.
# Nginx -- Cross-Origin Headers (SSG)
add_header Cross-Origin-Opener-Policy "same-origin" always;
add_header Cross-Origin-Resource-Policy "same-origin" always;
# COEP nur aktivieren, wenn keine externen Ressourcen geladen werden:
# add_header Cross-Origin-Embedder-Policy "require-corp" always;
# Alternative mit besserer Kompatibilität:
# add_header Cross-Origin-Embedder-Policy "credentialless" always;// vercel.json -- Cross-Origin Headers
{
"headers": [{
"source": "/(.*)",
"headers": [
{ "key": "Cross-Origin-Opener-Policy", "value": "same-origin" },
{ "key": "Cross-Origin-Resource-Policy", "value": "same-origin" }
]
}]
}Verifizieren und Islands testen
Prüfen Sie die Header und testen Sie alle Astro Islands. Öffnen Sie die Browser DevTools und prüfen Sie die Console auf Cross-Origin-Fehler. Laden Sie jede Seite mit Islands und prüfen Sie, ob externe Ressourcen korrekt geladen werden.
# Cross-Origin Headers prüfen
curl -sI https://ihre-domain.de | grep -i cross-origin
# Erwartete Ausgabe:
# Cross-Origin-Opener-Policy: same-origin
# Cross-Origin-Resource-Policy: same-origin
# Cross-Origin-Isolation prüfen (Browser-Console)
# window.crossOriginIsolated === trueCross-Origin-Isolation prüfen
Wenn COOP und COEP korrekt gesetzt sind, aktiviert der Browser Cross-Origin-Isolation. Das ermöglicht Features wie SharedArrayBuffer und hochpraezise Timer (performance.now() mit Mikrosekunden-Aufloesung), schützt aber gleichzeitig vor Spectre-Angriffen.
Prüfen Sie den Isolation-Status in der Browser-Console: window.crossOriginIsolated gibt true zurück, wenn die Isolation aktiv ist. Für die meisten Astro-Websites ist Cross-Origin-Isolation kein Muss -- COOP und CORP allein bieten bereits substanziellen Schutz.
Wolf-Agents setzt COOP und CORP auf same-origin, aktiviert COEP aber nicht, da externe Monitoring-Ressourcen geladen werden. Die Empfehlung für die meisten Astro-Projekte: Setzen Sie COOP und CORP immer, COEP nur wenn alle externen Ressourcen unter Ihrer Kontrolle sind.
Häufige Fehler bei Cross-Origin Headers in Astro
COEP blockiert Google Fonts
require-corp blockiert alle Cross-Origin-Ressourcen ohne CORP-Header. Google Fonts sendet keinen CORP-Header. Verwenden Sie credentialless oder hosten Sie Fonts selbst (was auch für DSGVO besser ist).
OAuth-Popup funktioniert nicht
COOP: same-origin unterbricht die Kommunikation zwischen Haupt- und Popup-Fenster. Setzen Sie same-origin-allow-popups auf Login-Seiten, die OAuth-Flows nutzen.
Islands laden externe APIs
React/Vue-Islands, die externe APIs per fetch() laden, sind von CORP/COEP nicht betroffen -- nur eingebettete Ressourcen (Bilder, Iframes, Scripts) werden blockiert. fetch() wird durch CORS gesteuert, nicht durch COEP.
prerender-Seiten ohne Header
Prerenderte Seiten erhalten keine Middleware-Header. Setzen Sie Cross-Origin Headers auf dem Webserver, um auch statische Seiten im Hybrid-Modus abzudecken.
Compliance-Relevanz
Cross-Origin Headers schützen gegen Spectre-Seitenkanalangriffe und sind Teil der NIS2-Anforderungen an technische Cybersicherheitsmassnahmen. Die Prozess-Isolation verhindert, dass ein kompromittiertes Drittanbieter-Script auf sensible Daten anderer Origins zugreifen kann. Der Wolf-Agents Web Security Check bewertet COOP, CORP und COEP mit bis zu 30 Punkten -- der zweithöchste Wert nach CSP.
Wie steht Ihre Domain bei Cross-Origin Headers?
Prüfen Sie es jetzt — kostenlos, ohne Registrierung, mit 166 Prüfpunkte.