Best Practices für Webberechtigungen

Marian Harbach

Thomas Steiner

Berechtigungsanfragen 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 möchten Browser dafür sorgen, dass ein Nutzer beabsichtigt, der anfragenden Website Zugriff auf die betreffende Funktion zu gewähren. Berechtigungsanfragen werden für eine Reihe von APIs verwendet, darunter Medienaufnahme (Kamera und Mikrofon), Standortermittlung, Speicherzugriff, MIDI und Benachrichtigungen. Weitere Informationen finden Sie in der Dokumentation zur Permissions API auf MDN.

In diesem Leitfaden werden die Best Practices für die Anzeige von Berechtigungsanfragen an Nutzer beschrieben. Dabei werden Chrome-Nutzungsstatistiken und Nutzerstudien berücksichtigt. Wenn Sie diese Best Practices einhalten, sollten Nutzer weniger unnötige Prompts sehen, was dazu führt, dass Entwickler weniger Blockierungsentscheidungen erhalten. Der Artikel endet mit einigen Codemustern für die Arbeit mit berechtigungsgesteuerten APIs und Best Practices für die Wiederherstellung von Nutzern aus einem blockierten Zustand.

Best Practices für Prompts

Sie sollten nach einer Nutzerinteraktion um Erlaubnis bitten, wenn Nutzer verstehen können, warum Sie fragen und welchen Vorteil sie davon haben. Nach Möglichkeit sollten Sie Nutzern die Möglichkeit geben, die gleiche Funktion auf alternative Weise auszuführen. Als allgemeine Richtlinie gilt: Je seltener Sie um Berechtigungen bitten und je sorgfältiger Sie die Zeitpunkte für die Anfragen auswählen, desto geringer ist die Wahrscheinlichkeit, dass Ihre Nutzer in einen blockierten Zustand geraten, aus dem sich nur schwer wieder befreien lässt. Die folgenden Best Practices enthalten weitere Informationen zu den einzelnen Vorschlägen.

Nie beim Laden der Seite oder ohne Nutzerinteraktion fragen

Wenn Sie Nutzer beim Seitenaufbau um Erlaubnis bitten, ist das so, als würden Sie einen Kunden in einem Geschäft um vertrauliche Informationen bitten. Wenn Nutzer eine Berechtigungsanfrage sehen (möglicherweise unter mehreren anderen Anfragen zur Newsletteranmeldung und Cookie-Einwilligung), ist das sehr irritierend. Die Nutzer werden nicht verstehen, warum sie gefragt werden und welche Vorteile sie daraus ziehen.

Selbst wenn Ihre Webanwendung nicht ohne Zugriff auf eine bestimmte Funktion funktionieren kann, sollten Sie den Nutzern die Möglichkeit geben, zu verstehen, warum sie benötigt wird. Sie können beispielsweise vor dem Berechtigungsprompt einen eigenen Prompt einfügen, in dem Sie die Notwendigkeit erläutern und den Nutzern eine Wahlmöglichkeit geben. Beispielsweise können Sie nach Möglichkeit alternative Möglichkeiten zur Verfügung stellen, um dieselbe Funktion zu nutzen. Falls Ihnen gerade kein besserer Moment einfällt, als beim Seitenaufbau um Erlaubnis zu bitten, finden Sie weiter unten in diesem Leitfaden einige Beispiele.

Ähnlich ungünstig ist die Frage nach einer Berechtigung ohne vorherige Nutzerinteraktion (auch als vorübergehende Nutzeraktivierung bezeichnet). Die Chrome-Telemetrie zeigt, dass 77 % der Berechtigungsanfragen in Chrome auf dem Computer ohne ein solches einfaches Signal zur Nutzerabsicht angezeigt werden. Daher werden nur 12 % dieser Anfragen zugelassen. Nach einer Nutzerinteraktion steigen die Raten auf 30 % an. Bitten Sie daher erst um Erlaubnis, nachdem der Nutzer auf irgendeine Weise mit der Seite interagiert hat.

Fragen Sie nur, wenn Nutzer verstehen können, warum Sie fragen.

Entscheidungen über Berechtigungen sind oft Datenschutzentscheidungen. Basierend auf dem Kontextintegritätskonzept wissen wir, dass Datenschutzentscheidungen stark kontextabhängig sind. Zu verstehen, warum ein Zugriff erforderlich ist, kann ein wichtiger Aspekt dabei sein. Daher sollten Sie nur Funktionen anfordern, die Sie benötigen, um Nutzern einen Mehrwert zu bieten, und bei denen die Nutzer wahrscheinlich der Meinung sind, dass sie einen Mehrwert erhalten. Außerdem sollten Sie um Erlaubnis bitten, wenn für den Nutzer klar ist, warum die Funktion hilfreich ist. Das Ziel besteht darin, es Nutzern so einfach wie möglich zu machen, den Nutzungskontext zu verstehen.

Unsere Nutzerstudien haben gezeigt, dass Nutzer den Zugriff wesentlich eher zulassen, wenn sie verstehen, warum eine Website den Zugriff anfordert, und einen Vorteil darin sehen. Außerdem erwarten Nutzer, dass sie unbekannte Websites zuerst erkunden können, um besser zu verstehen, welchen Vorteil sie durch den Zugriff erhalten. In der Zwischenzeit schließen sie Berechtigungsanfragen häufig einfach weg oder ignorieren sie. Mit einmaligen Berechtigungen kann es sein, dass ein einzelner Besuch zuerst zugelassen wird. Ihre Anwendung muss diese Verhaltensweisen unterstützen.

Alternativen bieten, um dieselbe Funktionalität nach Möglichkeit zu erreichen

Das Ergebnis einiger Funktionen ist für Nutzer möglicherweise nicht hilfreich. So kann beispielsweise die Standortermittlung eines Desktop-Geräts ohne GPS-Sensor 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 die Kontrolle behalten und diese Ereignisse mit Tastenkombinationen manuell auslösen möchten. In solchen Situationen 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 Nutzer selbst eine Postleitzahl oder Adresse eingeben können. Achten Sie darauf, dass kopierte Elemente auch über eine Tastenkombination oder das Kontextmenü ausgewählt und kopiert werden können. Bieten Sie Nutzern an, Benachrichtigungen per E-Mail statt per Push zu erhalten.

Es ist sinnvoll, die alternative UI auch als Erklärung dafür zu verwenden, warum der Zugriff vorteilhaft sein könnte. Wenn Nutzer neben einer Schaltfläche, die die Geolocation API auslöst, die Option zum Eingeben eines Standorts sehen, haben sie 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 die Wahl haben, Benachrichtigungen per Push oder E-Mail zu erhalten oder an einer Videokonferenz teilzunehmen, ohne den Zugriff auf Kamera und Mikrofon zuzulassen, können sie die Vor- und Nachteile besser nachvollziehen.

Vermeiden Sie eine Blockierung, da diese nur schwer wieder rückgängig gemacht werden kann.

Sobald ein Nutzer den Zugriff auf eine berechtigungsgesteuerte Funktion dauerhaft nicht zugelassen hat, wird diese Entscheidung im Browser berücksichtigt. Wenn es möglich wäre, Nutzer immer wieder um Zugriff zu bitten, würden böswillige Websites sie weiterhin mit Aufforderungen bombardieren. Daher erfordert die Wiederherstellung aus dem blockierten Zustand einer Funktion absichtlich etwas Aufwand für den Nutzer. Fragen Sie Nutzer daher nicht um Erlaubnis, wenn es wahrscheinlich ist, dass viele Nutzer den Zugriff nicht zulassen.

Eine gängige Methode hierfür ist die Verwendung einer sogenannten Voreingabeaufforderung, bei der Sie den Nutzern erklären, was als Nächstes passieren wird und warum Ihre Anwendung die gewünschte Funktion benötigt. Nur wenn Nutzer auf eine solche Vorabankündigung positiv reagieren, sollten Sie die Berechtigungsanfrage des Browsers auslösen. Es gibt Situationen, in denen Nutzer aus legitimen Gründen aus diesem Zustand herauskommen müssen. Weitere Informationen finden Sie im Abschnitt Nutzer bei der Wiederherstellung nach einer Blockierung unterstützen.

Auf Inhalte von Dritten achten

Es gibt eine unerwartete Quelle von Berechtigungsaufforderungen, die Sie beachten sollten. Wenn Sie Scripts von Drittanbietern auf Ihrer Website einbinden, werden möglicherweise Berechtigungsaufforderungen ausgelöst, die Sie nicht beabsichtigt haben. Das kann sich auf die Nutzerfreundlichkeit Ihrer Website auswirken, insbesondere wenn solche Prompts nicht den bereits beschriebenen Best Practices entsprechen. Damit Sie die Kontrolle über die Nutzererfahrung behalten, sollten Sie die Dokumentation aller Bibliotheken und Scripts von Drittanbietern sorgfältig lesen, die Sie Ihrem eigenen Code hinzufügen.

Wann um Erlaubnis bitten?

Hier sind einige Beispiele für Situationen, in denen Sie um Erlaubnis bitten können, wobei Sie die bereits beschriebenen Best Practices beachten sollten:

• Nachdem ein Nutzer neben einem Formularfeld, in das eine Adresse manuell eingegeben werden kann, auf die Schaltfläche „Meinen Standort verwenden“ geklickt hat.
• Ein Nutzer hat einen Videokanal oder Beiträge abonniert und in einem Dialogfeld auf eine Schaltfläche geklickt, in dem beschrieben wird, dass die Updates als E-Mails oder Benachrichtigungen an sein Smartphone oder seinen Computer gesendet werden können.
• Ein Nutzer wird auf eine Seite weitergeleitet, auf der er sich auf einen Videoanruf vorbereitet und in einem Vorabankündigungsprompt bestätigt, dass er gesehen und gehört werden möchte (siehe diese Fallstudie zu Google Meet).

Codemuster für die Berechtigungsanfrage

Je nach API gibt es unterschiedliche Möglichkeiten, die Berechtigung zur Nutzung einer API zu erhalten. Bei einigen (in der Regel älteren) APIs wird ein Modell verwendet, bei dem der Browser automatisch um Erlaubnis bittet, wenn Sie die API zum ersten Mal verwenden. Ein Beispiel ist die Geolocation API beim Aufruf 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äufig verwendete DeviceOrientationEvent.requestPermission(), das Teil der Device Orientation Events API ist. Einige Browser gewähren bestimmten APIs möglicherweise automatisch eine Berechtigung. Chrome lässt beispielsweise immer den Zugriff auf die Ausrichtung des Geräts zu, während Safari eine Eingabeaufforderung anzeigt.

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. */
}

Status von Berechtigungen prüfen

Mit der Methode navigator.permissions.query() der Berechtigungs-API können Sie prüfen, ob Sie eine bestimmte API verwenden können.

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, nach einer Blockierung wiederhergestellt zu werden

Um Nutzern bei der Behebung von Zugriffsproblemen zu helfen, solltest du feststellen, dass sie den Zugriff über die Permissions API blockiert haben, und ihnen eine Anleitung zum Ändern ihrer Einstellungen anbieten. Wenn Nutzer beispielsweise mit UI-Elementen interagieren, die mit einer berechtigungsgeschützten 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 bietet es sich an, passende Beschreibungen basierend auf dem User-Agent-String und für die in Ihrem Produkt am häufigsten verwendeten Browser anzubieten.

Nutzer müssen in Chrome die Websitekontrollen aufrufen, indem sie auf das Feinabstimmungssymbol auf der linken Seite der Adressleiste klicken. Hier können sie die entsprechende Berechtigung aktivieren. In einigen Fällen muss die Seite möglicherweise neu geladen werden, bevor sie die Funktion verwenden können. In diesem Fall wird oben im Fenster eine Nachrichtenleiste angezeigt, über die Sie die Seite durch Klicken auf die entsprechende Schaltfläche neu laden können.

Ähnliche Benutzeroberflächen zur Steuerung von Berechtigungen gibt es auch in anderen Browsern. Informationen zu Firefox