Bonnes pratiques pour les autorisations Web

Marian Harbach

Thomas Steiner

Les invites d'autorisation sont le principal mécanisme du Web pour protéger les utilisateurs contre les fonctionnalités puissantes qui pourraient être dangereuses pour leur confidentialité et leur sécurité. Les navigateurs visent à confirmer que l'utilisateur souhaite autoriser une fonctionnalité sur un site Web spécifique. Vous pouvez implémenter des autorisations pour un certain nombre d'API, y compris la capture multimédia (appareil photo et micro), la géolocalisation, l'accès au stockage, MIDI et les notifications.

Suivez ces pratiques lorsque vous affichez des invites d'autorisation aux utilisateurs, en vous basant sur les statistiques d'utilisation de Chrome et les études utilisateur. Si vous les suivez, vos utilisateurs devraient rencontrer moins d'invites inutiles, ce qui devrait entraîner moins de décisions de blocage.

Ce document se termine par quelques modèles de code pour les API avec autorisation et explique comment aider les utilisateurs à se sortir d'un état bloqué.

Bonnes pratiques concernant les prompts

Demandez l'autorisation après une interaction de l'utilisateur, lorsqu'il dispose du contexte nécessaire pour comprendre pourquoi vous la demandez et quels avantages il peut en tirer.

Si possible, proposez d'autres moyens d'accomplir la même tâche. En choisissant soigneusement le bon moment pour poser la question, vous réduisez les risques que vos utilisateurs se retrouvent dans un état bloqué dont il est difficile de se sortir.

Ne jamais demander lors du chargement de page ou sans interaction de l'utilisateur

Demander l'autorisation lors du chargement de page revient à demander des informations sensibles à un client lorsqu'il entre dans un magasin physique. L'affichage d'une invite d'autorisation, éventuellement parmi plusieurs autres invites d'inscription à la newsletter et de consentement aux cookies, est une expérience désagréable. Les utilisateurs ne comprendront pas pourquoi ils sont invités à le faire et quels avantages ils en tireront.

Même si votre application Web ne peut pas fonctionner sans accéder à une certaine fonctionnalité, donnez aux utilisateurs la possibilité de comprendre pourquoi elle est nécessaire. Par exemple, expliquez pourquoi l'invite d'autorisation est nécessaire et donnez le choix aux utilisateurs (par exemple, en proposant d'autres moyens d'accomplir la même fonctionnalité). Si vous ne trouvez pas de meilleur moment pour demander l'autorisation que lors du chargement de la page, vous trouverez quelques exemples plus loin dans ce guide.

Demander une autorisation sans interaction préalable de l'utilisateur est également inefficace. C'est ce qu'on appelle l'activation utilisateur transitoire. La télémétrie Chrome montre que 77% des invites d'autorisation sur ordinateur s'affichent sans signal d'intention de l'utilisateur. Par conséquent, seulement 12% de ces invites sont autorisées. Après une interaction de l'utilisateur, le taux d'autorisation passe à 30%.

Ne demandez l'autorisation qu'après que l'utilisateur a interagi avec la page.

Ne demandez l'accès que lorsque les utilisateurs peuvent comprendre pourquoi

Les décisions concernant les autorisations sont souvent des décisions liées à la confidentialité. D'après le cadre d'intégrité contextuelle, nous savons que les décisions concernant la confidentialité sont très contextuelles. Il est essentiel de comprendre pourquoi l'accès est nécessaire. Vous ne devez demander que les fonctionnalités dont vous avez besoin pour apporter de la valeur, là où les utilisateurs sont susceptibles d'être d'accord pour dire qu'ils y trouveront de la valeur. Demandez également l'autorisation lorsque l'utilisateur comprend pourquoi la fonctionnalité est utile. Aidez les utilisateurs à mieux comprendre le contexte d'utilisation.

Nos études sur les utilisateurs montrent qu'ils sont beaucoup plus susceptibles d'autoriser l'accès lorsqu'ils comprennent pourquoi un site le demande et qu'ils perçoivent un avantage. Nous avons également constaté que les utilisateurs s'attendaient à explorer d'abord les sites inconnus pour mieux comprendre la valeur qu'ils pouvaient obtenir en échange de l'autorisation d'accès. En attendant, ils ignorent ou ferment souvent les invites d'autorisation. Avec les autorisations ponctuelles, ils peuvent d'abord autoriser une seule visite. Prenez en charge ces comportements dans votre application.

Proposer des alternatives

Le résultat de certaines fonctionnalités peut ne pas être utile aux utilisateurs. Par exemple, la géolocalisation d'un ordinateur de bureau sans capteur GPS peut renvoyer le mauvais emplacement, car la personne est connectée à un VPN. D'autres utilisateurs peuvent ne pas vouloir autoriser l'accès au presse-papiers, car ils préfèrent garder le contrôle et déclencher manuellement ces événements avec des combinaisons de touches. Dans ces situations, proposez une autre façon d'obtenir les mêmes résultats.

Par exemple, si vous demandez l'autorisation de géolocalisation, proposez un champ de texte dans lequel les utilisateurs peuvent saisir un code postal ou une adresse. Autoriser la sélection et la copie d'éléments dans le presse-papiers à l'aide d'un raccourci clavier ou du menu contextuel. Pour les notifications, proposez l'envoi d'e-mails plutôt que de notifications push.

Un modèle utile consiste à utiliser l'UI alternative également comme explication des raisons pour lesquelles l'accès peut être bénéfique. Les utilisateurs qui voient une option permettant de saisir une position à côté d'un bouton qui déclenche l'API de géolocalisation ont l'impression d'avoir le contrôle, car ils comprennent qu'ils peuvent saisir leur adresse. De même, si les utilisateurs ont le choix entre recevoir des notifications par notification push ou par e-mail, ou rejoindre une réunion sans autoriser l'accès à la caméra et au micro, ils comprennent les compromis.

Éviter les états bloqués

Une fois qu'un utilisateur a refusé définitivement l'accès à une fonctionnalité protégée par une autorisation, les navigateurs respectent cette décision. Si les sites malveillants pouvaient continuer à demander l'accès, ils bombarderaient les utilisateurs de requêtes. La récupération de l'état bloqué d'une fonctionnalité nécessite intentionnellement un effort. Évitez de demander l'autorisation dans des situations où les utilisateurs sont peu susceptibles d'accorder l'accès.

Une façon courante de procéder consiste à utiliser un pré-prompt, qui permet d'expliquer à vos utilisateurs ce qui va se passer et pourquoi votre application a besoin de la fonctionnalité que vous allez demander. Vous ne devez déclencher l'invite d'autorisation du navigateur que lorsque les utilisateurs réagissent positivement à une telle pré-invite. Il existe des situations dans lesquelles les utilisateurs peuvent légitimement avoir besoin de se remettre de cet état. Pour en savoir plus, consultez la section Aider les utilisateurs à se sortir d'un état bloqué.

Faites attention aux contenus tiers

Méfiez-vous des sources inattendues d'invites d'autorisation. Les scripts tiers sur votre site peuvent déclencher des invites d'autorisation non souhaitées. Cela peut affecter l'expérience de vos utilisateurs, en particulier si les invites ne suivent pas les bonnes pratiques. Pour garder le contrôle de l'expérience utilisateur, lisez la documentation de toutes les bibliothèques et de tous les scripts tiers que vous ajoutez à votre code.

Quand demander l'autorisation

Voici quelques exemples de moments où il est judicieux de demander l'autorisation, en suivant les bonnes pratiques :

• Après qu'un utilisateur a cliqué sur Utiliser ma position à côté d'un champ de formulaire, lorsqu'il saisit manuellement une adresse.
• Lorsqu'un utilisateur s'abonne à une chaîne ou à un post vidéo, et qu'il clique sur un bouton d'acceptation dans une boîte de dialogue indiquant que les mises à jour peuvent être envoyées par e-mail ou par notification.
• Après qu'un utilisateur est arrivé sur une page qui le prépare à rejoindre un appel vidéo et qu'il a répondu par l'affirmative dans une invite préalable indiquant qu'il souhaite être vu et entendu. Pour en savoir plus, consultez l'étude de cas sur Google Meet.

Schémas de code

L'autorisation d'utiliser une API est accordée de différentes manières, selon l'API. Certaines API plus anciennes utilisent un modèle dans lequel le navigateur demande automatiquement l'autorisation la première fois que vous essayez d'utiliser l'API. Par exemple, l'API Geolocation lors de l'appel de navigator.geolocation.getCurrentPosition().

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

D'autres API utilisent un modèle dans lequel vous demandez explicitement l'autorisation en premier avec une méthode statique. Un bon exemple est Notification.requestPermission() pour autoriser les notifications, ou le moins courant DeviceOrientationEvent.requestPermission(), qui fait partie de l'API Device Orientation Events.

Certains navigateurs accordent automatiquement l'autorisation à certaines API. Par exemple, Chrome autorise toujours l'accès à l'orientation d'un appareil, tandis que Safari affiche une invite.

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

Vérifier l'état des autorisations

Pour vérifier si vous pouvez utiliser une API spécifique, utilisez la méthode navigator.permissions.query() de l'API Permissions.

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

Aider les utilisateurs à sortir d'un état bloqué

Pour aider les utilisateurs à résoudre les problèmes d'accès, détectez qu'ils ont bloqué l'accès à l'aide de l'API Permissions et proposez-leur un guide sur la façon de modifier leurs paramètres. Lorsque les utilisateurs interagissent avec des éléments d'UI associés à une fonctionnalité protégée par des autorisations, vérifiez l'état des autorisations et ouvrez une boîte de dialogue de dépannage.

La procédure exacte pour modifier l'état des autorisations varie selon le navigateur. Nous vous proposons donc des descriptions correspondantes en fonction de la chaîne user-agent pour les navigateurs les plus couramment utilisés.

Dans Chrome, les utilisateurs peuvent modifier les autorisations depuis Afficher les informations sur le site > Paramètres du site, qui se trouve dans la barre d'adresse. Dans certains cas, ils devront peut-être recharger la page avant d'utiliser une fonctionnalité. Dans ce cas, une barre de message s'affiche en haut de la fenêtre et propose de recharger le site.

Des interfaces utilisateur similaires pour contrôler les autorisations existent dans d'autres navigateurs, comme Firefox.