Clear-Site-Data für Astro konfigurieren
Schritt-für-Schritt-Anleitung: Browser-Daten beim Logout per API-Route löschen -- Cookies, Storage und Cache gezielt raeumen.
Clear-Site-Data in Astro
Clear-Site-Data weist den Browser an, gespeicherte Daten zu löschen -- Cookies, LocalStorage, SessionStorage, IndexedDB und Cache. Der Header wird typischerweise beim Logout gesendet, um alle Session-Daten zuverlässig zu entfernen. Er ist mit 3 von 166 Punkten im Wolf-Agents Web Security Check relevant.
In Astro setzen Sie Clear-Site-Data in einer API-Route für den Logout-Endpoint. Die Middleware ist weniger geeignet, da der Header nur bei bestimmten Aktionen (Logout, Passwort-Änderung) gesendet werden sollte -- nicht bei jedem Request. Wolf-Agents setzt "cookies", "storage" beim Logout.
Clear-Site-Data ist besonders relevant für Astro-Anwendungen mit authentifizierten Bereichen: Dashboard-Daten in LocalStorage, Session-Tokens in Cookies und gecachte API-Responses müssen beim Logout zuverlässig gelöscht werden, um zu verhindern, dass der nächste Benutzer am selben Gerät sensible Daten sieht.
Logout-Route mit Clear-Site-Data
Erstellen Sie eine API-Route, die beim Logout den Clear-Site-Data-Header setzt. Verwenden Sie "cookies", "storage" für einen gezielten Logout. Löschen Sie Session-Cookies zusätzlich serverseitig als Fallback für Browser, die Clear-Site-Data nicht vollständig unterstützen.
// src/pages/api/logout.ts -- Clear-Site-Data beim Logout
import type { APIRoute } from 'astro';
export const POST: APIRoute = async ({ cookies }) => {
// Session-Cookie serverseitig löschen (Fallback für Safari)
cookies.delete('session_token', { path: '/' });
// Browser-Daten löschen
return new Response(JSON.stringify({ success: true }), {
status: 200,
headers: {
'Clear-Site-Data': '"cookies", "storage"',
'Content-Type': 'application/json',
},
});
};// Alle Browser-Daten löschen (aggressiv)
return new Response(null, {
status: 200,
headers: {
// Loescht ALLES: Cookies, LocalStorage, SessionStorage,
// IndexedDB, Cache API und Service Workers
'Clear-Site-Data': '"*"',
},
});Middleware-Variante für Spezialfaelle
Für Passwort-Änderungen oder Account-Löschungen können Sie Clear-Site-Data in der Middleware setzen. Die Middleware prüft den Pfad und die HTTP-Methode und setzt den Header nur bei erfolgreichen sicherheitsrelevanten Aktionen.
// src/middleware.ts -- Clear-Site-Data bei Passwort-Änderung
import { defineMiddleware } from 'astro:middleware';
export const onRequest = defineMiddleware(async (context, next) => {
const response = await next();
// Nur bei bestimmten Aktionen Clear-Site-Data setzen
if (context.url.pathname === '/api/change-password'
&& context.request.method === 'POST'
&& response.ok) {
response.headers.set('Clear-Site-Data',
'"cookies", "storage"');
}
return response;
});Client-seitige Integration
Rufen Sie die Logout-Route per fetch() auf. Der Browser verarbeitet den Clear-Site-Data-Header automatisch und löscht die angegebenen Daten. Leiten Sie den Benutzer danach zur Startseite weiter.
// Client-seitig: Logout-Button mit Clear-Site-Data
async function handleLogout() {
const response = await fetch('/api/logout', {
method: 'POST',
credentials: 'same-origin',
});
if (response.ok) {
// Clear-Site-Data Header löscht Cookies automatisch
// Redirect nach kurzer Verzoegerung
window.location.href = '/';
}
}Logout-Flow testen
Testen Sie den Logout-Flow und prüfen Sie, ob alle Browser-Daten gelöscht werden. Öffnen Sie die Browser DevTools und prüfen Sie Application > Storage vor und nach dem Logout.
# Clear-Site-Data beim Logout prüfen
curl -sI -X POST https://ihre-domain.de/api/logout | grep -i clear-site
# Erwartete Ausgabe:
# Clear-Site-Data: "cookies", "storage"
# Prüfen, ob Session-Cookie zusätzlich gelöscht wird
curl -sI -X POST https://ihre-domain.de/api/logout | grep -i set-cookie
# Set-Cookie: session_token=; Max-Age=0; Path=/Direktiven im Detail
"cookies" löscht alle Cookies der Domain -- inklusive Session-Cookies und Preferences. "storage" löscht LocalStorage, SessionStorage und IndexedDB. "cache" löscht die Browser-Cache-API und Service-Worker-Caches. "executionContexts" entlädt aktive Service Workers und Shared Workers.
Für einen typischen Logout empfiehlt Wolf-Agents "cookies", "storage" -- das löscht Session-Daten und gespeicherte Formulardaten, ohne den Browser-Cache zu leeren. Für Account-Löschungen oder Sicherheitsvorfälle verwenden Sie "*", um alle Daten vollständig zu entfernen.
Beachten Sie: Clear-Site-Data funktioniert nur über HTTPS. HTTP-Responses mit diesem Header werden vom Browser ignoriert. Da Astro-Anwendungen hinter einem TLS-terminierenden Reverse Proxy laufen, ist dies in der Praxis kein Problem.
Häufige Fehler bei Clear-Site-Data in Astro
Header bei jedem Request
Setzen Sie Clear-Site-Data nur beim Logout oder bei Sicherheitsaktionen, nicht in der Middleware für jeden Request. Sonst werden alle Browser-Daten bei jedem Seitenaufruf gelöscht -- die Anwendung wird unbenutzbar.
Anführungszeichen fehlen
Die Direktiven müssen in doppelten Anführungszeichen stehen: "cookies", nicht cookies. Ohne Anführungszeichen ignorieren Browser den Header komplett. Der Wert im HTTP-Header ist "cookies", "storage" -- mit Anführungszeichen um jede Direktive.
Safari-Kompatibilität
Safari unterstützt Clear-Site-Data nur eingeschraenkt. Löschen Sie Session-Cookies zusätzlich über cookies.delete() als Fallback. Wolf-Agents nutzt dieses doppelte Loeschverfahren produktiv.
Wildcard löscht Service Workers
"*" löscht auch registrierte Service Workers und den gesamten Cache. Wenn Ihre Astro-App einen Service Worker für Offline-Funktionalität nutzt, verwenden Sie "cookies", "storage" statt "*", um den Service Worker zu erhalten.
Clear-Site-Data nur über HTTPS
Browser ignorieren den Clear-Site-Data-Header bei HTTP-Responses. Stellen Sie sicher, dass Ihr Logout-Endpoint nur über HTTPS erreichbar ist. Bei Astro hinter einem Reverse Proxy ist HTTPS auf Server-Ebene konfiguriert.
Compliance-Relevanz
Clear-Site-Data stellt sicher, dass nach einem Logout keine sensiblen Daten im Browser verbleiben. DSGVO Artikel 17 (Recht auf Löschung) und NIS2 fordern den Schutz personenbezogener Daten -- Clear-Site-Data ist eine technische Umsetzung dieser Anforderung.
Auch PCI DSS 4.0 verlangt, dass Zahlungsdaten nach einer Session zuverlässig entfernt werden. Für Astro-Anwendungen mit Stripe-Integration oder anderen Zahlungsprozessen ist Clear-Site-Data ein wichtiger Baustein. Der Wolf-Agents Web Security Check bewertet Clear-Site-Data mit bis zu 3 Punkten und prüft, ob der Header auf der Logout-Route gesetzt wird.
Wie steht Ihre Domain bei Clear-Site-Data?
Prüfen Sie es jetzt — kostenlos, ohne Registrierung, mit 166 Prüfpunkte.