Best Practices für Webberechtigungen

Marian Harbach

Thomas Steiner

Berechtigungsaufforderungen sind der wichtigste Mechanismus im Web, um leistungsstarke Funktionen zu schützen, die potenziell gefährlich für den Datenschutz und die Sicherheit der Nutzer sind. Mit Berechtigungsaufforderungen soll in Browsern sichergestellt werden, dass ein Nutzer der anfragenden Website tatsächlich Zugriff auf die betreffende Funktion gewähren möchte. Berechtigungsaufforderungen werden für eine Reihe von APIs verwendet, darunter Media Capture (Kamera und Mikrofon), Geolocation, Speicherzugriff, MIDI und Benachrichtigungen. Weitere Informationen finden Sie in der Dokumentation zur Permissions API auf MDN.

In diesem Leitfaden werden Best Practices für die Anzeige von Berechtigungsaufforderungen für Nutzer basierend auf Chrome-Nutzungsstatistiken und Nutzerstudien beschrieben. Wenn Sie diese Best Practices befolgen, sollten Nutzer weniger unnötige Aufforderungen erhalten, was dazu führt, dass Entwickler weniger „Blockieren“-Entscheidungen erhalten. Der Artikel endet mit einigen Codemustern für die Arbeit mit berechtigungsbeschränkten APIs und Best Practices, die Nutzern helfen, sich von einem blockierten Status zu erholen.

Best Practices für die Prompt-Erstellung

Sie sollten die Berechtigung nach einer Nutzerinteraktion anfordern, wenn Nutzer verstehen können, warum Sie sie anfordern und welchen Vorteil sie durch die Erteilung der Berechtigung haben. Wenn möglich, sollten Sie Nutzern eine alternative Möglichkeit bieten, dieselbe Funktion zu nutzen. Als allgemeine Richtlinie gilt: Wenn Sie Berechtigungen seltener anfordern und die Momente, in denen Sie dies tun, sorgfältig auswählen, sinkt die Wahrscheinlichkeit, dass Ihre Nutzer in einen blockierten Zustand geraten, aus dem sie sich nur schwer wieder befreien können. In den folgenden Best Practices werden diese Vorschläge genauer erläutert.

Nie beim Laden der Seite oder ohne Nutzerinteraktion fragen

Nutzer beim Laden der Seite um Erlaubnis zu bitten, entspricht dem, einen Kunden beim Betreten eines Ladengeschäfts nach sensiblen Informationen zu fragen. Wenn Nutzer eine Berechtigungsaufforderung sehen (möglicherweise neben mehreren anderen Aufforderungen zur Newsletteranmeldung und Cookie-Einwilligung), ist das sehr störend. Nutzer verstehen nicht, warum sie gefragt werden und welche Vorteile sie haben.

Auch wenn Ihre Webanwendung ohne Zugriff auf eine bestimmte Funktion nicht funktioniert, sollten Sie Nutzern die Möglichkeit geben, zu verstehen, warum sie benötigt wird. Sie können dem Berechtigungs-Prompt beispielsweise einen eigenen Prompt voranstellen, in dem Sie den Bedarf erläutern und den Nutzern eine Auswahlmöglichkeit bieten (z. B. indem Sie, sofern möglich, alternative Möglichkeiten zur Ausführung derselben Funktion anbieten). Wenn Sie sich keinen besseren Zeitpunkt als beim Laden der Seite vorstellen können, um um die Berechtigung zu bitten, finden Sie weiter unten in diesem Leitfaden einige Beispiele.

Eine ähnlich ungünstige Situation, um nach einer Berechtigung zu fragen, ist ohne vorherige Nutzerinteraktion (auch als vorübergehende Nutzeraktivierung bezeichnet). Die Chrome-Telemetrie zeigt, dass 77% der Berechtigungsaufforderungen in Desktop-Chrome ohne ein so grundlegendes Signal für die Nutzerabsicht angezeigt werden. Folglich werden nur 12 % dieser Aufforderungen zugelassen. Nach einer Nutzerinteraktion kann die Rate auf 30 % steigen. Fordern Sie die Berechtigung also erst an, nachdem der Nutzer in irgendeiner Form mit der Seite interagiert hat.

Nur fragen, wenn Nutzer verstehen können, warum Sie fragen

Berechtigungsentscheidungen sind oft Datenschutzentscheidungen. Basierend auf dem Framework für kontextbezogene Integrität wissen wir, dass Datenschutzentscheidungen stark kontextabhängig sind. Ein wichtiger Aspekt ist dabei, zu verstehen, warum ein Zugriff erforderlich ist. Fordern Sie daher nur Funktionen an, die Sie benötigen, um Nutzern einen Mehrwert zu bieten (und bei denen Nutzer wahrscheinlich zustimmen, dass sie tatsächlich einen Mehrwert erhalten). Außerdem sollten Sie die Berechtigung zu einem Zeitpunkt anfordern, an dem für den Nutzer ersichtlich ist, warum die Funktion hilfreich ist. Ziel ist es, den Nutzungskontext für Ihre Nutzer so einfach wie möglich zu gestalten.

Unsere Nutzerstudien haben gezeigt, dass Nutzer den Zugriff deutlich eher zulassen, wenn sie verstehen, warum eine Website Zugriff anfordert, und einen Vorteil darin sehen. Wir haben auch festgestellt, dass Nutzer erst unbekannte Websites aufrufen möchten, um besser zu verstehen, welchen Mehrwert sie im Gegenzug für den Zugriff erhalten. Sie lehnen Berechtigungsaufforderungen dann oft ab oder ignorieren sie. Bei einmaligen Berechtigungen kann es sein, dass sie zuerst nur einen einzelnen Besuch zulassen. Ihre Anwendung muss diese Verhaltensweisen unterstützen.

Stellen Sie nach Möglichkeit alternative Methoden zur Verfügung, um dieselbe Funktion auszuführen.

Die Ergebnisse einiger Funktionen sind für Nutzer möglicherweise nicht hilfreich. Die Geolocation eines Desktopgeräts ohne GPS-Sensor kann beispielsweise den falschen Standort zurückgeben, weil die Person mit einem VPN verbunden ist. Andere Nutzer möchten möglicherweise keinen Zugriff auf die Zwischenablage gewähren, da sie lieber die Kontrolle behalten und diese Ereignisse manuell mit Tastenkombinationen auslösen möchten. In solchen Fällen ist es wichtig, eine alternative Möglichkeit zu bieten, um dieselben Ergebnisse zu erzielen. Wenn Sie beispielsweise die Berechtigung zur Standortbestimmung anfordern, bieten Sie ein Textfeld an, in dem Ihre Nutzer selbst eine Postleitzahl oder Adresse eingeben können. Achten Sie bei der Zwischenablage darauf, dass Elemente, die kopiert werden sollen, auch über eine Tastenkombination oder das Kontextmenü ausgewählt und kopiert werden können. Mit Benachrichtigungen können Sie anbieten, dass Nutzer E‑Mails anstelle von Push-Benachrichtigungen erhalten.

Ein nützliches Muster ist, die alternative Benutzeroberfläche auch als Erklärung dafür zu verwenden, warum der Zugriff von Vorteil sein könnte. Nutzer, die neben einer Schaltfläche, mit der die API für die Standortbestimmung ausgelöst wird, die Option zum Eingeben eines Standorts sehen, haben das Gefühl, die Kontrolle darüber zu haben, was passiert, da sie wissen, dass sie auch einfach ihre Adresse eingeben können. Wenn Nutzer beispielsweise zwischen Push- und E-Mail-Benachrichtigungen wählen oder an einer Videokonferenz teilnehmen können, ohne Kamera- und Mikrofonzugriff zu gewähren, verstehen sie die damit verbundenen Kompromisse besser.

Vermeiden Sie es, dass Ihr Konto gesperrt wird. Es ist schwierig, den Zugriff wiederherzustellen.

Wenn ein Nutzer sich entschieden hat, den Zugriff auf eine berechtigungsgeschützte Funktion dauerhaft zu verweigern, berücksichtigen Browser diese Entscheidung. Wenn es möglich wäre, weiterhin nach Zugriff zu fragen, würden bösartige Websites Nutzer mit Prompts bombardieren. Daher ist es mit etwas Aufwand verbunden, eine blockierte Funktion wieder zu aktivieren. Bitten Sie Nutzer daher nicht um die Berechtigung in Situationen, in denen viele Nutzer den Zugriff wahrscheinlich nicht zulassen.

Eine gängige Methode hierfür ist die Verwendung eines sogenannten Pre-Prompts, in dem Sie Ihren Nutzern erklären, was passieren wird und warum Ihre Anwendung die Funktion benötigt, die Sie anfordern möchten. Nur wenn Nutzer positiv auf einen solchen Pre-Prompt reagieren, sollten Sie den Berechtigungs-Prompt des Browsers auslösen. Es gibt Situationen, in denen Nutzer sich möglicherweise aus diesem Zustand erholen müssen. Weitere Informationen finden Sie im Abschnitt Nutzern helfen, den blockierten Status zu beheben.

Inhalte von Drittanbietern beachten

Es gibt eine unerwartete Quelle für Berechtigungsaufforderungen, die Sie beachten sollten. Wenn Sie Drittanbieterskripts auf Ihrer Website einbinden, können dadurch Berechtigungsaufforderungen ausgelöst werden, die Sie nicht anzeigen lassen wollten. Dies kann sich auf die Nutzerfreundlichkeit Ihrer Website auswirken, insbesondere wenn solche Aufforderungen nicht den bereits beschriebenen Best Practices entsprechen. Damit Sie die Kontrolle über die Nutzererfahrung behalten, sollten Sie die Dokumentation aller Drittanbieterbibliotheken und ‑skripts, die Sie Ihrem eigenen Code hinzufügen, sorgfältig lesen.

Wann Sie um Erlaubnis bitten sollten

Hier sind einige Beispiele für Momente, in denen Sie nach den bereits beschriebenen Best Practices um Erlaubnis bitten können:

• Nachdem ein Nutzer neben einem Formularfeld zum manuellen Eingeben einer Adresse auf die Schaltfläche „Meinen Standort verwenden“ geklickt hat.
• Nachdem ein Nutzer einen Videokanal oder Beiträge abonniert und in einem Dialogfeld, in dem beschrieben wird, dass Updates als E‑Mails oder Benachrichtigungen auf sein Smartphone oder seinen Computer gesendet werden können, auf eine bestätigende Schaltfläche geklickt hat.
• Nachdem ein Nutzer auf einer Seite angekommen ist, auf der er sich auf die Teilnahme an einem Videoanruf vorbereiten kann, und in einem Pre-Prompt (siehe diese Fallstudie zu Google Meet) bestätigt hat, dass er gesehen und gehört werden möchte.

Code-Muster zum Anfordern von Berechtigungen

Die Berechtigung zur Verwendung einer API wird je nach API auf unterschiedliche Weise erteilt. Bei einigen (in der Regel älteren) APIs wird der Nutzer beim ersten Versuch, die API zu verwenden, automatisch vom Browser um die Erlaubnis gebeten. Ein Beispiel ist die Geolocation API beim Aufrufen von navigator.geolocation.getCurrentPosition().

try {
  navigator.geolocation.getCurrentPosition((pos) => console.log(pos));
} catch (error) {
  console.error(error);
}

Bei anderen APIs müssen Sie die Berechtigung zuerst explizit mit einer statischen Methode anfordern. Ein gutes Beispiel ist Notification.requestPermission(), um Benachrichtigungen zuzulassen, oder das weniger häufige DeviceOrientationEvent.requestPermission(), das Teil der Device Orientation Events API ist. Beachten Sie, dass einige Browser bestimmten APIs möglicherweise automatisch die Berechtigung erteilen. In Chrome ist beispielsweise immer der Zugriff auf die Ausrichtung eines Geräts zulässig, während in Safari eine Aufforderung angezeigt wird.

const result = await DeviceOrientationEvent.requestPermission();
console.log(`The user's decision when prompted to use the Device Orientation
Events API was: ${result}.`);
if (result === 'granted') {
  /* Use the API. */
}

Berechtigungsstatus prüfen

Wenn Sie prüfen möchten, ob Sie eine bestimmte API verwenden können, verwenden Sie die Methode navigator.permissions.query() aus der Permissions API.

const result = await navigator.permissions.query({ name: 'geolocation' });
console.log(`The result of querying for the Geolocation API is:
${result.state}.`);
if (result.state === 'granted') {
  // Use the API.
}

Nutzern helfen, den blockierten Status zu beheben

Um Nutzern bei der Fehlerbehebung von Zugriffsproblemen zu helfen, erkennen Sie, dass sie den Zugriff über die Permissions API blockiert haben, und bieten Sie ihnen eine Anleitung zum Ändern ihrer Einstellungen an. Wenn Nutzer beispielsweise mit UI-Elementen interagieren, die mit einer berechtigungsbeschränkten Funktion verknüpft sind, verwenden Sie das im vorherigen Abschnitt beschriebene Muster und öffnen Sie ein Dialogfeld zur Fehlerbehebung. Die genauen Schritte zum Ändern des Berechtigungsstatus variieren je nach Browser. Daher sollten Sie entsprechende Beschreibungen basierend auf dem User-Agent-String und für die am häufigsten verwendeten Browser in Ihrem Produkt anbieten.

In Chrome sollten Nutzer auf das Symbol „Abstimmung“ links neben der Adressleiste klicken, um zu den Website-Einstellungen zu gelangen. Hier können sie die entsprechende Berechtigung aktivieren. In einigen Fällen müssen sie die Seite neu laden, bevor sie die Funktion nutzen können. In diesem Fall wird oben im Fenster eine Meldungsleiste angezeigt, in der Sie durch Klicken auf die entsprechende Schaltfläche die Seite neu laden können.

Ähnliche Benutzeroberflächen zum Steuern von Berechtigungen gibt es auch in anderen Browsern. Hier erfahren Sie, wie das in Firefox funktioniert.