Sichere Cookies für Nuxt 3 konfigurieren
Schritt-für-Schritt: setCookie() in Event Handlern mit Secure, HttpOnly und SameSite — plus useCookie() Composable und Cookie-Prefixes.
Cookie-Sicherheit in Nuxt 3
Sichere Cookie-Konfiguration schützt Session-Daten vor Diebstahl durch XSS und CSRF-Angriffe. Nuxt 3 bietet zwei Cookie-APIs: setCookie() in Nitro Event Handlern für Server-seitige Cookies mit HttpOnly-Flag, und das useCookie() Composable für Client-zugängliche Cookies. Mit 15 von 166 Punkten sind Cookies ein wichtiger Faktor im Wolf-Agents Web Security Check.
Die wichtigste Regel: Session-Cookies und andere sensible Daten immer Server-seitig per setCookie() setzen — nur so ist das HttpOnly-Flag möglich, das JavaScript-Zugriff verhindert.
Server-seitige Cookies mit setCookie()
Verwenden Sie setCookie() aus h3 in Ihren Nitro Event Handlern. Diese Methode setzt echte Set-Cookie-Header mit allen Security-Flags — inklusive HttpOnly, das JavaScript-Zugriff auf den Cookie verhindert.
// server/api/auth/login.post.ts — Server-seitig
export default defineEventHandler(async (event) => {
const sessionId = await createSession(event);
setCookie(event, 'session', sessionId, {
httpOnly: true,
secure: true,
sameSite: 'lax',
path: '/',
maxAge: 60 * 60 * 24 * 7, // 7 Tage
});
return { success: true };
})// server/utils/secure-cookie.ts — __Host- Prefix
export function setSecureSession(event: H3Event, value: string) {
setCookie(event, '__Host-session', value, {
httpOnly: true,
secure: true,
sameSite: 'lax',
path: '/', // __Host- erfordert path='/'
maxAge: 60 * 60 * 24 * 7,
});
}Client-seitige Cookies mit useCookie()
Das useCookie() Composable ist für nicht-sensible Daten gedacht — wie Theme-Einstellungen oder Sprach-Präferenzen. Cookies, die per useCookie() gesetzt werden, können nicht HttpOnly sein, da sie per JavaScript zugänglich sein müssen.
// composables/usePreferences.ts — Client-seitig
export function usePreferences() {
// useCookie() ist NICHT httpOnly — nur für nicht-sensible Daten
const theme = useCookie('theme', {
default: () => 'light',
sameSite: 'lax',
secure: true,
maxAge: 60 * 60 * 24 * 365, // 1 Jahr
});
return { theme };
}Cookie-Konfiguration verifizieren
Öffnen Sie die Browser DevTools, navigieren Sie zu Application > Cookies und prüfen Sie die gesetzten Flags. Der Wolf-Agents Web Security Check analysiert Ihre Cookie-Konfiguration automatisch.
# Set-Cookie-Header prüfen
curl -sI -X POST https://ihre-domain.de/api/auth/login \
-H "Content-Type: application/json" \
-d '' | grep -i set-cookie
# Erwartete Ausgabe:
# Set-Cookie: __Host-session=abc123; Path=/; Secure; HttpOnly; SameSite=Lax; Max-Age=604800Häufige Fehler
useCookie() für Sessions verwendet
useCookie() setzt kein HttpOnly-Flag. Session-Cookies müssen Server-seitig per setCookie() in Event Handlern gesetzt werden.
Secure-Flag fehlt in Development
Cookies mit secure: true werden im lokalen HTTP-Modus nicht gesetzt. Nutzen Sie secure: process.env.NODE_ENV === 'production' oder lokales HTTPS.
__Host-Prefix ohne path='/'
Der __Host--Prefix erfordert secure: true, path: '/' und darf kein domain-Attribut haben. Fehlt eine Bedingung, wird der Cookie ignoriert.
SameSite=Strict blockiert OAuth
SameSite=Strict blockiert Cookies bei Cross-Site-Navigationen — z.B. OAuth-Redirects. Verwenden Sie SameSite=Lax für Session-Cookies.
Compliance-Relevanz
DSGVO fordert angemessenen Schutz personenbezogener Daten — sichere Cookie-Flags sind eine technische Grundmaßnahme. PCI DSS verlangt den Schutz von Session-IDs gegen Diebstahl. Der Wolf-Agents Web Security Check bewertet Cookie-Flags mit bis zu 15 Punkten und prüft Secure, HttpOnly und SameSite automatisch.
Wie steht Ihre Domain bei Sichere Cookies?
Prüfen Sie es jetzt — kostenlos, ohne Registrierung, mit 166 Prüfpunkte.