Erweiterte Header für Nuxt 3 konfigurieren

Origin-Agent-Cluster, X-DNS-Prefetch-Control und Cross-Origin-Isolation in Nuxt 3 einrichten — per nuxt-security, routeRules oder Nitro Middleware.

Nuxt 3 · Schritt für Schritt

Erweiterte Header in Nuxt 3

Erweiterte Header umfassen zusätzliche Defense-in-Depth-Maßnahmen jenseits der Kern-Header wie CSP und HSTS. Dazu gehören Origin-Agent-Cluster für Prozess-Isolation, X-DNS-Prefetch-Control für Privacy, X-Permitted-Cross-Domain-Policies gegen Flash/PDF-Angriffe und die Cross-Origin-Isolation-Header. Mit 4 von 166 Punkten im Wolf-Agents Web Security Check bewertet.

In Nuxt 3 gibt es drei Wege zur Konfiguration: Das nuxt-security Modul setzt die meisten dieser Header automatisch. Alternativ konfigurieren routeRules statische Header ohne zusätzliches Modul. Für maximale Kontrolle — z.B. unterschiedliche Header für API- und Frontend-Routen — nutzen Sie eine Nitro Server Middleware.

1 Implementierung

Erweiterte Header in Nuxt 3 konfigurieren

Der empfohlene Weg ist das nuxt-security Modul, das Origin-Agent-Cluster und X-DNS-Prefetch-Control automatisch setzt. Installation: npx nuxi module add nuxt-security. Für Projekte ohne nuxt-security nutzen Sie routeRules oder eine Nitro Middleware.

nuxt.config.ts Empfohlen
// nuxt.config.ts — Erweiterte Header mit nuxt-security
export default defineNuxtConfig({
  modules: ['nuxt-security'],

  security: {
    headers: {
      // Origin-Agent-Cluster: Prozess-Isolation
      'Origin-Agent-Cluster': '?1',

      // DNS-Prefetch deaktivieren (Privacy)
      'X-DNS-Prefetch-Control': 'off',

      // Cross-Domain-Policies blockieren
      'X-Permitted-Cross-Domain-Policies': 'none',

      // Cross-Origin Isolation (optional, strikt)
      'Cross-Origin-Opener-Policy': 'same-origin',
      'Cross-Origin-Embedder-Policy': 'require-corp',
      'Cross-Origin-Resource-Policy': 'same-origin',
    },
  },
})
nuxt.config.ts routeRules
// nuxt.config.ts — routeRules ohne nuxt-security
export default defineNuxtConfig({
  routeRules: {
    '/**': {
      headers: {
        'Origin-Agent-Cluster': '?1',
        'X-DNS-Prefetch-Control': 'off',
        'X-Permitted-Cross-Domain-Policies': 'none',
      },
    },
    // API-Routen: zusätzliche Isolation
    '/api/**': {
      headers: {
        'Origin-Agent-Cluster': '?1',
        'X-DNS-Prefetch-Control': 'off',
        'X-Permitted-Cross-Domain-Policies': 'none',
        'Cross-Origin-Resource-Policy': 'same-origin',
      },
    },
  },
})
server/middleware/advanced-headers.ts Middleware
// server/middleware/advanced-headers.ts
// Nitro Middleware für maximale Kontrolle
export default defineEventHandler((event) => {
  const headers = {
    'Origin-Agent-Cluster': '?1',
    'X-DNS-Prefetch-Control': 'off',
    'X-Permitted-Cross-Domain-Policies': 'none',
    'Cross-Origin-Opener-Policy': 'same-origin',
    'Cross-Origin-Resource-Policy': 'same-origin',
  };

  for (const [key, value] of Object.entries(headers)) {
    setHeader(event, key, value);
  }
})
Was bewirkt Origin-Agent-Cluster: ?1?

Der Header fordert den Browser auf, die Seite in einem eigenen Prozess (Agent Cluster) zu isolieren. Das verhindert Spectre-ähnliche Seitenkanalangriffe zwischen same-site Origins. Aktuell nur in Chromium-Browsern unterstützt — schadet aber nicht in anderen Browsern.

2 Verifizierung

Header verifizieren

Erstellen Sie einen Production-Build und prüfen Sie die erweiterten Header. Der Wolf-Agents Web Security Check analysiert alle Header-Kategorien und liefert eine Gesamtnote von A+ bis F.

Terminal Verifizieren
# Production-Build und Header prüfen
npx nuxi build
node .output/server/index.mjs

# Erweiterte Header prüfen
curl -sI https://ihre-domain.de | grep -iE "origin-agent|x-dns|x-permitted|cross-origin"

# Erwartete Ausgabe:
# origin-agent-cluster: ?1
# x-dns-prefetch-control: off
# x-permitted-cross-domain-policies: none
# cross-origin-opener-policy: same-origin

# API-Route separat prüfen
curl -sI https://ihre-domain.de/api/health | grep -i cross-origin-resource
# cross-origin-resource-policy: same-origin

Häufige Fehler

COEP bricht externe Ressourcen

Cross-Origin-Embedder-Policy: require-corp blockiert alle externen Ressourcen, die kein CORS oder Cross-Origin-Resource-Policy setzen. Google Fonts, Analytics und CDN-Assets werden blockiert. Nutzen Sie credentialless als Alternative.

nuxt-security überschreibt routeRules

Wenn nuxt-security aktiv ist, überschreibt es Header aus routeRules. Konfigurieren Sie Header entweder über nuxt-security oder routeRules — nicht beides gleichzeitig für denselben Header.

SSG-Build verliert Server-Header

nuxt generate erzeugt statische HTML-Dateien. Server-Header müssen auf dem Hosting-Anbieter konfiguriert werden — in vercel.json, Netlify _headers oder der CDN-Konfiguration.

COOP blockiert OAuth-Popups

Cross-Origin-Opener-Policy: same-origin verhindert window.opener-Zugriff von OAuth-Popups. Verwenden Sie same-origin-allow-popups wenn Ihre Anwendung OAuth-Login per Popup nutzt.

Compliance-Relevanz

Erweiterte Header sind Defense-in-Depth-Maßnahmen, die zusammen mit den Kern-Headern eine umfassende Sicherheitsarchitektur bilden. Origin-Agent-Cluster schützt gegen Spectre-ähnliche Seitenkanalangriffe. X-DNS-Prefetch-Control verhindert ungewollte DNS-Anfragen und schützt die Privacy der Nutzer. Cross-Origin-Isolation (COOP + COEP) ermöglicht den Zugriff auf leistungsstarke APIs wie SharedArrayBuffer bei gleichzeitiger Isolation. Der Wolf-Agents Web Security Check bewertet alle Header-Kategorien und liefert eine Gesamtnote von A+ bis F.

Wie steht Ihre Domain bei Erweiterte Header?

Prüfen Sie es jetzt — kostenlos, ohne Registrierung, mit 166 Prüfpunkte.