Permissions Policy für Vercel konfigurieren
Schritt-für-Schritt-Anleitung: Browser-APIs per vercel.json einschränken — Kamera, Mikrofon, Geolocation und Payment API sperren.
Permissions Policy auf Vercel
Permissions Policy kontrolliert, welche Browser-APIs Ihre Website und eingebettete Iframes verwenden dürfen. Der Header ersetzt den veralteten Feature-Policy-Header und ist mit 10 von 166 Punkten ein relevanter Faktor im Wolf-Agents Web Security Check.
Auf Vercel setzen Sie Permissions Policy am einfachsten per vercel.json — der Header ist statisch und ändert sich nicht pro Request. Wenn Sie bereits eine Edge Middleware nutzen, können Sie den Header auch dort setzen. Vercel setzt standardmäßig keine Permissions Policy.
Permissions Policy per vercel.json
Fügen Sie den Permissions-Policy-Header in die vercel.json ein. Mit camera=() sperren Sie die Kamera-API für Ihre Seite und alle eingebetteten Iframes. Die leere Klammer () bedeutet: keine Herkunft darf diese API nutzen.
// vercel.json — Permissions Policy
{
"headers": [
{
"source": "/(.*)",
"headers": [
{
"key": "Permissions-Policy",
"value": "camera=(), microphone=(), geolocation=(), payment=(), usb=(), magnetometer=(), gyroscope=(), accelerometer=()"
}
]
}
]
}Alternative: Edge Middleware
Wenn Sie bereits eine middleware.ts für andere Header (z.B. CSP-Nonces) verwenden, setzen Sie Permissions Policy im gleichen File. Bei Kollision mit vercel.json gewinnt die Middleware — definieren Sie den Header an genau einem Ort, um Verwirrung zu vermeiden.
// middleware.ts — Permissions Policy per Edge Middleware
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
export function middleware(request: NextRequest) {
const response = NextResponse.next();
response.headers.set(
'Permissions-Policy',
'camera=(), microphone=(), geolocation=(), payment=(), usb=(), magnetometer=(), gyroscope=(), accelerometer=()'
);
return response;
}Wenn Ihre Anwendung Geolocation oder Kamera tatsächlich benötigt, verwenden Sie geolocation=(self) statt geolocation=(). Das erlaubt die API für Ihre eigene Domain, sperrt sie aber für eingebettete Iframes.
Header verifizieren
Prüfen Sie den Permissions-Policy-Header nach dem Deployment. Der Wolf-Agents Web Security Check zeigt alle gesperrten und erlaubten APIs in der Detail-Ansicht an und bewertet die Konfiguration automatisch.
# Permissions-Policy prüfen
curl -sI https://ihre-domain.de | grep -i permissions-policy
# Erwartete Ausgabe:
permissions-policy: camera=(), microphone=(), geolocation=(), payment=(), usb=(), magnetometer=(), gyroscope=(), accelerometer=()Häufige Fehler
Syntax-Fehler im Header-Wert
Permissions Policy verwendet = statt : und Klammern statt Anführungszeichen. Falsch: camera: 'none'. Richtig: camera=().
Edge Middleware überschreibt vercel.json
Bei identischem Header-Key gewinnt die Edge Middleware. Wenn Sie Permissions Policy in beiden setzen, wird der vercel.json-Wert ignoriert — das führt zu unerwarteten Policies.
Vercel CDN cached alte Header
Nach einer Änderung in vercel.json sehen Sie den neuen Header erst nach einem neuen Deployment. Das Edge Network cached Responses — testen Sie immer mit einem frischen Deployment.
Compliance-Relevanz
Permissions Policy reduziert die Angriffsfläche Ihrer Anwendung. NIS2 fordert angemessene technische Maßnahmen — das Sperren ungenutzter Browser-APIs gehört dazu. DSGVO verlangt Privacy by Design — Permissions Policy verhindert unbeabsichtigte Kamera- oder Standort-Zugriffe durch eingebettete Inhalte. Der Wolf-Agents Web Security Check bewertet die Permissions-Policy-Konfiguration im Detail.
Wie steht Ihre Domain bei Permissions Policy?
Prüfen Sie es jetzt — kostenlos, ohne Registrierung, mit 166 Prüfpunkte.