Signatur
Beschreibung
navigator.permissions gibt ein Permissions-Objekt zurück. Es gehört zur Permissions API und bietet eine einheitliche Schnittstelle, über die du den aktuellen Berechtigungsstatus einer API abfragen kannst, zum Beispiel für Geolokalisierung, Benachrichtigungen, Kamera, Mikrofon oder Zwischenablage. Dabei wird der Nutzer nicht mit einem Berechtigungsdialog unterbrochen.
Die wichtigste Methode ist permissions.query({ name }). Sie gibt ein Promise<PermissionStatus> zurück. Dessen Eigenschaft state hat einen der Werte "granted", "denied" oder "prompt". Über das change-Ereignis des PermissionStatus erfährst du außerdem, wenn der Nutzer die Berechtigung später in den Browser-Einstellungen ändert.
Typischer Einsatz: Bevor du eine Berechtigung anforderst, prüfst du den Status und passt die Oberfläche an. Ist der Status "denied", zeigst du einen Hinweis statt eines Buttons, der ohnehin nichts bewirkt. Ist er "prompt", erklärst du vorher, wozu du die Berechtigung brauchst. Die eigentliche Anfrage läuft weiterhin über die jeweilige API, etwa Notification.requestPermission() oder navigator.geolocation.getCurrentPosition().
Die Eigenschaft gibt es auch in Web Workern als WorkerNavigator.permissions. Sie steht nur in sicheren Kontexten (HTTPS) zur Verfügung.
Rückgabewert
Permissions-Objekt mit der Methode query(). Die Methoden request() und revoke() sind veraltet bzw. experimentell und sollten nicht verwendet werden.Beispiele
Status der Geolokalisierung abfragen
const checkGeo = async () => {
const status = await navigator.permissions.query({ name: 'geolocation' });
console.log(`Geolokalisierung: ${status.state}`);
return status.state;
};
checkGeo();Oberfläche passend zum Benachrichtigungs-Status anzeigen
const button = document.querySelector('#notify-btn');
const hint = document.querySelector('#notify-hint');
const updateUI = (state) => {
button.hidden = state !== 'prompt';
hint.textContent = state === 'denied'
? 'Benachrichtigungen sind blockiert. Bitte in den Browser-Einstellungen freigeben.'
: state === 'granted' ? 'Benachrichtigungen sind aktiv.' : '';
};
const init = async () => {
const status = await navigator.permissions.query({ name: 'notifications' });
updateUI(status.state);
// Auf spätere Änderungen durch den Nutzer reagieren
status.addEventListener('change', () => updateUI(status.state));
};
button.addEventListener('click', () => Notification.requestPermission());
init();Robuste Abfrage mit Feature-Erkennung und Fehlerbehandlung
const getPermissionState = async (name) => {
if (!('permissions' in navigator)) return 'unsupported';
try {
const { state } = await navigator.permissions.query({ name });
return state;
} catch (err) {
// TypeError, wenn der Browser den Namen nicht kennt
console.warn(`Berechtigung "${name}" nicht abfragbar:`, err.message);
return 'unsupported';
}
};
const names = ['camera', 'microphone', 'clipboard-read', 'geolocation'];
const results = await Promise.all(names.map(getPermissionState));
console.table(Object.fromEntries(names.map((n, i) => [n, results[i]])));// Wichtig · Fallstricke
- Unterschiedlich unterstützte Namen: Welche Namen
query()akzeptiert, ist je nach Browser verschieden. Firefox und Safari lehnen zum Beispiel"clipboard-read","clipboard-write"oder teils"camera"und"microphone"mit einemTypeErrorab. Setzequery()deshalb immer intry/catch. - Nur sichere Kontexte: Auf HTTP-Seiten ist
navigator.permissionsnicht vorhanden. Prüfe mit'permissions' in navigator. - Der Status ist nicht verbindlich:
"granted"bedeutet nicht, dass der API-Aufruf garantiert klappt. Hardware kann fehlen, und Richtlinien wie die Permissions-Policy in iframes können den Zugriff trotzdem sperren. Behandle Fehler deshalb immer auch in der eigentlichen API. - Keine Anfrage beim Nutzer:
query()zeigt nie einen Berechtigungsdialog an. Nutze zum Anfordern die jeweilige API.Permissions.request()undrevoke()sind nicht standardisiert bzw. entfernt. - Datenschutz: Manche Browser melden
"prompt", obwohl der Status in Wirklichkeit"denied"ist. So erschweren sie Fingerprinting.