Permissions Policy für Next.js konfigurieren
Schritt-für-Schritt-Anleitung: Permissions Policy in Next.js einrichten — statischer Header in next.config.js, kein Middleware nötig.
Permissions Policy in Next.js
Permissions Policy kontrolliert, welche Browser-APIs Ihre Next.js-Anwendung und eingebettete iFrames nutzen dürfen. In Next.js konfigurieren Sie den Header über die headers()-Funktion in der next.config.js — ein statischer Header, der keine Middleware erfordert. Das unterscheidet Permissions Policy von CSP, wo dynamische Nonces Middleware voraussetzen.
Permissions Policy ist mit 10 von 166 Punkten ein Faktor im Wolf-Agents Web Security Check. Die Konfiguration funktioniert mit dem App Router und dem Pages Router gleichermaßen und wird auch bei Vercel-Deployment automatisch übernommen.
Permissions-Policy-Header konfigurieren
Fügen Sie den Permissions-Policy-Header in Ihrer next.config.js hinzu. Das /:path*-Pattern matcht alle Routen Ihrer Anwendung — inklusive API-Routes und statischer Assets.
// Permissions Policy — Browser-APIs einschränken
const securityHeaders = [
{
key: 'Permissions-Policy',
value: 'camera=(), microphone=(), geolocation=(), payment=(), usb=()'
}
];
module.exports = {
async headers() {
return [{
source: '/:path*',
headers: securityHeaders,
}];
},
};Permissions Policy ist ein statischer Header — derselbe Wert für jeden Request. Die headers()-Funktion in next.config.js ist die effizienteste Methode. Middleware wäre nur nötig, wenn der Header-Wert pro Request variieren müsste.
Header verifizieren
Starten Sie den Entwicklungsserver neu und verifizieren Sie den Header mit curl oder den Browser DevTools. Bei Production Builds testen Sie nach next build && next start.
# Entwicklungsserver neu starten
npm run dev
# Permissions-Policy-Header prüfen
curl -sI http://localhost:3000 | grep -i permissions
# Erwartete Ausgabe:
# Permissions-Policy: camera=(), microphone=(), geolocation=(), payment=(), usb=()next.config.js erfordern einen Neustart des Dev-Servers. Hot Reload greift bei Konfigurationsänderungen nicht. Wie steht Ihre Domain bei Permissions Policy?
Prüfen Sie es jetzt — kostenlos, ohne Registrierung, mit 166 Prüfpunkte.
Häufig gestellte Fragen
Brauche ich Middleware für Permissions Policy in Next.js?
Nein. Im Gegensatz zu CSP (wo Nonces dynamisch pro Request generiert werden) ist Permissions Policy ein statischer Header. Die headers()-Funktion in next.config.js genügt vollständig — Middleware wäre unnötiger Overhead.
Funktioniert die Konfiguration mit dem App Router und dem Pages Router?
Ja. Die headers()-Funktion in next.config.js wird von beiden Routern unterstützt. Das source-Pattern /:path* matcht alle Routen in beiden Routing-Systemen.
Wird der Header auch bei API-Routes gesetzt?
Ja, das Pattern /:path* matcht alle Pfade inklusive /api/*. Für API-Routes ist Permissions Policy zwar weniger relevant (sie liefern keine HTML-Seiten), aber der zusätzliche Header schadet nicht.
Was passiert bei Vercel-Deployment?
Die headers()-Konfiguration funktioniert auch auf Vercel. Vercel übernimmt die Header-Konfiguration aus next.config.js automatisch. Alternativ können Sie Header auch in der vercel.json definieren.
Kann ich verschiedene Policies für verschiedene Routen setzen?
Ja. Definieren Sie mehrere Einträge in der headers()-Funktion mit unterschiedlichen source-Patterns. Zum Beispiel kann eine Videocall-Seite camera=(self) erlauben, während der Rest der Website camera=() setzt.