Vérification de la détection des fonctionnalités de l'API Credential Management

Eiji Kitamura

Résumé

WebAuthn contribue à renforcer la sécurité en apportant l'authentification basée sur les identifiants à clé publique sur le Web. Il sera bientôt compatible avec Chrome, Firefox et Edge (avec la spécification mise à jour). Il ajoute un nouveau type d'objet Credential, qui peut toutefois endommager les sites Web qui utilisent l'API Credential Management sans détecter les types d'identifiants spécifiques qu'ils utilisent.

Si vous utilisez actuellement cette méthode pour la détection de caractéristiques

if (navigator.credentials && navigator.credentials.preventSilentAccess) {
    // use CM API
}

Essayez plutôt ces exercices

if (window.PasswordCredential || window.FederatedCredential) {
    // Call navigator.credentials.get() to retrieve stored
    // PasswordCredentials or FederatedCredentials.
}

if (window.PasswordCredential) {
    // Get/Store PasswordCredential
}

if (window.FederatedCredential) {
    // Get/Store FederatedCredential
}

if (navigator.credentials && navigator.credentials.preventSilentAccess) {
    // Call navigator.credentials.preventSilentAccess()
}

Consultez les modifications apportées à l'exemple de code.

Pour en savoir plus, poursuivez votre lecture !

Remarque  : Si vous utilisez Google Identity comme principal moyen de connexion pour vos utilisateurs, envisagez d'utiliser la bibliothèque JavaScript Inscription One Tap et connexion automatique basée sur l'API Credential Management. Elle combine la connexion Google et la connexion par mot de passe en un seul appel d'API, et permet de créer un compte d'un simple geste.

Qu'est-ce que l'API Credential Management ?

L'API Credential Management (API CM) permet aux sites Web d'accéder de manière programmatique au magasin d'identifiants de l'user-agent pour stocker/récupérer les identifiants utilisateur de l'origine de l'appel.

Les API de base sont les suivantes :

• navigator.credentials.get()
• navigator.credentials.store()
• navigator.credentials.create()
• navigator.credentials.preventSilentAccess()

La spécification d'origine de l'API CM définit deux types d'identifiants :

• PasswordCredential
• FederatedCredential

PasswordCredential est un identifiant qui contient l'ID et le mot de passe de l'utilisateur. FederatedCredential est un identifiant qui contient l'ID de l'utilisateur et une chaîne représentant un fournisseur d'identité.

Grâce à ces deux identifiants, les sites Web peuvent :

• Permettre à l'utilisateur de se connecter avec un identifiant fédéré ou basé sur un mot de passe précédemment enregistré dès qu'il arrive sur la page (connexion automatique)
• Stockez l'identifiant fédéré ou basé sur un mot de passe avec lequel l'utilisateur s'est connecté.
• Maintenir à jour les identifiants de connexion de l'utilisateur (par exemple, après un changement de mot de passe)

Qu'est-ce que WebAuthn ?

WebAuthn (Web Authentication) ajoute des identifiants de clé publique à l'API CM. Par exemple, elle fournit aux sites Web un moyen standardisé d'implémenter l'authentification à deux facteurs à l'aide d'appareils d'authentification conformes à la norme FIDO 2.0.

Sur le plan technique, WebAuthn étend l'API CM avec l'interface PublicKeyCredential.

Quel est le problème ?

Auparavant, nous guidions les développeurs pour qu'ils détectent les fonctionnalités de l'API CM avec le code suivant :

if (navigator.credentials && navigator.credentials.preventSilentAccess) {
  // Use CM API
}

But as you can see from the descriptions above, the `navigator.credentials` is
now expanded to support public-key credentials in addition to password
credentials and federated credentials.

The problem is that user agents don't necessarily support all kinds of
credentials. If you continue feature detect using `navigator.credentials`, your
website may break when you are using a certain credential type not supported by
the browser.

**Supported credential types by browser<s**
table class="properties with-head><ing-t><in>t<&q><uot>;<tb>odytr
th/th
thPasswordCredential / Feder<ate>d<Cr>edential/th
thPubli<cKe>y<Cre><de><nt>ial/th
</tr><tr>thChrome
/<tht><dA>vailable
/tdtdI<n d><eve><lo><pm>ent
/td/<trt><rt>hFir<efo><x<>/span>
/thtdN/A
/tdtdAiming <to ><shi><p ><on> 60
/<td/><tr>trth<Edg><e<>/span>
/thtdN/A
/tdtdImp<lemented with a href="https://blogs.windows.com/msedgedev/2016/04/12/a-world-without-passwords-windows-hello->in-micros<of>t-edge/"older API/a. New API (navigator.cr<ede><nti><als) c><oming >soon.
/td/tr/tbody/table


## The solution
You can avoid this by modifying feature detection code as follows to explicitly
test for the credential type that you intend to use.

```js
if (window.PasswordCredential || window.FederatedCredential) {
    // Call navigator.credentials.get() to retrieve stored
    // PasswordCredentials or FederatedCredentials.
}

if (window.PasswordCredential) {
    // Get/Store PasswordCredential
}

if (window.FederatedCredential) {
    // Get/Store FederatedCredential
}

if&& (navigator.credentials  navigator.credentials.preventSilentAccess) {
    // Call navigator.credentials.preventSilentAccess()
}

Consultez les modifications réelles apportées à l'exemple de code.

À titre de référence, voici comment détecter l'ajout de PublicKeyCredential dans WebAuthn :

if (window.PublicKeyCredential) {
    // use CM API with PublicKeyCredential added in the WebAuthn spec
}

Chronologie

La première implémentation disponible de WebAuthn est Firefox, et elle devrait être stable vers début mai 2018.

Enfin

Si vous avez des questions, envoyez-les à @agektmr ou à [e-mail].