Permissions Policy für Nuxt 3 konfigurieren
Schritt-für-Schritt: Browser-APIs wie Kamera, Mikrofon und Geolocation in Nuxt 3 einschränken — per nuxt-security, routeRules oder Nitro Middleware.
Permissions Policy in Nuxt 3
Die Permissions Policy kontrolliert, welche Browser-APIs Ihre Website nutzen darf. APIs wie Kamera, Mikrofon, Geolocation oder USB können gezielt gesperrt oder auf bestimmte Origins beschränkt werden. Mit 10 von 166 Punkten ist die Permissions Policy ein relevanter Faktor im Wolf-Agents Web Security Check.
Das nuxt-security Modul setzt automatisch eine restriktive Permissions Policy. Ohne das Modul konfigurieren Sie den Header über routeRules in nuxt.config.ts oder per Nitro Server Middleware.
Permissions Policy konfigurieren
Die sicherste Strategie: Alle APIs sperren und nur die benötigten gezielt freigeben. In Nuxt 3 stehen drei Konfigurationswege zur Verfügung — das nuxt-security Modul bietet die übersichtlichste Syntax.
// nuxt.config.ts — nuxt-security Modul
export default defineNuxtConfig({
modules: ['nuxt-security'],
security: {
headers: {
permissionsPolicy: {
'camera': ['()'],
'microphone': ['()'],
'geolocation': ['()'],
'payment': ['()'],
'usb': ['()'],
'autoplay': ['()'],
'display-capture': ['()'],
'fullscreen': ['(self)'],
},
},
},
})// nuxt.config.ts — routeRules
export default defineNuxtConfig({
routeRules: {
'/**': {
headers: {
'Permissions-Policy':
'camera=(), microphone=(), geolocation=(), payment=(), usb=(), autoplay=(), display-capture=(), fullscreen=(self)',
},
},
},
})// server/middleware/permissions.ts — Nitro Middleware
export default defineEventHandler((event) => {
setHeader(event,
'Permissions-Policy',
'camera=(), microphone=(), geolocation=(), payment=(), usb=(), autoplay=(), display-capture=(), fullscreen=(self)'
);
})Direktiven gezielt anpassen
Wenn Ihre Nuxt-Anwendung bestimmte APIs benötigt — z.B. Geolocation für eine Filialsuche — erlauben Sie diese gezielt mit (self) oder spezifischen Origins. Alle anderen APIs bleiben gesperrt.
() vs. (self) () sperrt die API vollständig. (self) erlaubt sie nur für die eigene Domain. ("https://maps.google.com") erlaubt sie für eine spezifische externe Domain.
Header verifizieren
Prüfen Sie den Permissions-Policy-Header im Production-Build. Der Wolf-Agents Web Security Check bewertet jede Direktive einzeln und zeigt fehlende Einschränkungen.
# Permissions-Policy-Header prüfen
curl -sI https://ihre-domain.de | grep -i permissions-policy
# Erwartete Ausgabe:
# Permissions-Policy: camera=(), microphone=(), geolocation=(), payment=(), usb=(), autoplay=(), display-capture=(), fullscreen=(self)Häufige Fehler
nuxt-security überschreibt routeRules
Wenn nuxt-security aktiv ist, werden manuelle Permissions-Policy-Header in routeRules ignoriert. Konfigurieren Sie den Header nur an einer Stelle.
Falsche Syntax: Semikolon statt Komma
Permissions-Policy-Direktiven werden mit Komma getrennt, nicht mit Semikolon. Falsch: camera=(); microphone=(). Richtig: camera=(), microphone=().
iframe-Kontext ignoriert
Permissions Policy gilt auch für eingebettete iframes. Wenn ein iframe Geolocation benötigt, muss die Policy dies explizit erlauben — sonst wird die API im iframe blockiert.
Compliance-Relevanz
Die Permissions Policy unterstützt das Prinzip der minimalen Rechte — ein Grundsatz jeder Sicherheitsarchitektur. DSGVO fordert Privacy-by-Design — das Sperren unnötiger APIs wie Kamera und Mikrofon erfüllt diese Anforderung. Der Wolf-Agents Web Security Check bewertet die Permissions Policy mit bis zu 10 Punkten.
Wie steht Ihre Domain bei Permissions Policy?
Prüfen Sie es jetzt — kostenlos, ohne Registrierung, mit 166 Prüfpunkte.