WebAuthn dans la vraie vie

Qu'est-ce que WebAuthn et pourquoi est-il nécessaire

• si le mot de passe est simple - vous pouvez le récupérer;
• si le même mot de passe est utilisé dans plusieurs services, puis en cassant l'un d'eux, l'attaquant a accès à tous les autres;
• les mots de passe sont vulnérables aux attaques de phishing;
• des mots de passe forts et uniques sont difficiles à retenir, donc l'utilisateur est obligé d'écrire le mot de passe sur l'autocollant et de le coller sur le moniteur, d'où il peut être facilement espionné, volé ou perdu.

Fonctionnement de WebAuthn

• Client (WebAuthn Client) - un navigateur qui prend en charge l'API WebAuthn;
• Application Web - une application exécutée sur le client à l'aide de l'API WebAuthn pour interagir avec les informations d'identification;
• informations d'identification (informations d'identification de clé publique) - une paire de clés cryptographiques publiques et privées associées à un compte d'utilisateur;
• Authenticator - un appareil ou un programme - crée les informations d'identification de l'utilisateur et signe les demandes de la partie utilisatrice avec ces informations d'identification (un autre nom est une clé électronique);
• la partie de confiance (WebAuthn Relying Party) - le serveur web - stocke la clé publique associée au compte utilisateur, vérifie la validité de la signature de leurs demandes avec la clé privée stockée dans l'authentificateur.

Création d'informations d'identification ( MakeCredential )

const credential = await navigator.credentials.create({
    publicKey: publicKeyMakeCredentialOptions
});

Signature d'une demande avec des informations d'identification déjà créées ( GetAssertion )

const assertion = await navigator.credentials.get({
    publicKey: publicKeyGetAssertionOptions
});

Clés électroniques

• clés indépendantes de la plateforme (authentificateurs itinérants);
• Authentificateurs de plate-forme

const credential = await navigator.credentials.create({
    publicKey: {
        authenticatorSelection: {
            authenticatorAttachment: 'cross-platform',
        },
        ...,
    },
});

Avantages sociaux chez WebAuthn

• L'utilisateur n'a pas besoin de se souvenir et de saisir des mots de passe, et le serveur ne stocke pas les mots de passe des utilisateurs, respectivement, tous les défauts que les mots de passe avaient disparus. Voler un authentifiant physique à un utilisateur est beaucoup plus difficile que d'intercepter un mot de passe transmis électroniquement via une connexion non sécurisée, et une fuite de clés publiques sur le site n'ouvrira pas la clé privée cachée dans l'appareil.
• origin , . origin . , (thesslstore.com, yubico.com) .
• WebAuthn - . - web- , .
• WebAuthn lui-même en tant qu'API fournit aux développeurs une abstraction sur la mise en œuvre des authentificateurs et vous permet d'écrire du code une fois, qui fonctionnera ensuite avec tous les types et types de clés électroniques. Ainsi, WebAuthn est une solution évolutive pour l'authentification des utilisateurs.

Prise en charge de WebAuthn

les fenêtres

Linux

Android

iOS

macOS

Enregistrement d'authentificateur

const credential = await navigator.credentials.create({
    publicKey: {
        attestation: 'direct',
         ...,
    },
});

WebAuthn travaille sur différents sous-domaines

const credential = await navigator.credentials.create({
    publicKey: {
        rp: {
            name: 'Mail.ru Group',
            id: 'mail.ru',
        },
        ...,
    },
});

WebAuthn fonctionne dans iframe

1. dans l'application d'autorisation lors de l'utilisation de WebAuthn, nous déterminons si nous sommes maintenant ouverts à l'intérieur de l'iframe ou non;
2. si nous sommes ouverts à l'intérieur de l'iframe, alors au lieu d'appeler l'API du navigateur WebAuthn, nous sérialisons les paramètres d'appel et les envoyons via la postMessagefenêtre parent;
3. dans la fenêtre parente, nous désérialisons ces paramètres et appelons les méthodes WebAuthn;
4. lorsque nous recevons une réponse, nous la sérialisons de la même manière et l'envoyons à l' postMessageintérieur d'un iframe, où nous acceptons cette réponse et effectuons un traitement supplémentaire.

Automatisation des tests WebAuthn

//    WebAuthn   
navigator.credentials.create = (options) => {
    window.credentialsCreateArgs = options;

    return new Promise((resolve, reject) => {
        window.credentialsCreateSuccess = resolve;
        window.credentialsCreateFail = reject;
    });
};

// -    
const credentialsCreateResponse = { /* constant object */ };

window.credentialsCreateSuccess(credentialsCreateResponse);

• vérifier si le client forme et transfère correctement les paramètres dans les fonctions WebAuthn;
• vérifier l'exactitude des modifications du backend lors du roulement des versions du backend.

// -    
const credentialsCreateResponse =
    calcCredentialsCreateResponse(window.credentialsCreateArgs);
 
window.credentialsCreateSuccess(credentialsCreateResponse);

1. obtenir les arguments avec lesquels les méthodes WebAuthn ont été appelées;
2. nous exécutons ces arguments via une fonction qui implémente les mêmes algorithmes qu'à l'intérieur d'authentificateurs réels;
3. nous obtenons le résultat et le renvoyons de nos fonctions remplacées;
4. tout le reste du code de notre service traite ces réponses dans le mode habituel et, par conséquent, tout le comportement du service ne diffère pas de son comportement pour les utilisateurs réels.

Le présent et l'avenir de WebAuthn

Sinon, comment pouvez-vous utiliser WebAuthn?

Questions et réponses populaires

Où puis-je acheter une clé électronique?

• Sécurité des voies de données
• Softline

Et si je perds ma clé électronique?

Que dois-je faire si quelqu'un d'autre a accès à ma clé électronique?

Maintenant, mes données biométriques seront stockées sur les serveurs Mail.ru/Google/Microsoft?

Conclusion

• lors de l'utilisation de WebAuthn, il n'est pas nécessaire de se souvenir et d'entrer les mots de passe;
• WebAuthn - , ;
• WebAuthn ;
• WebAuthn — .

Matériaux additionnels

• Web Authentication: An API for accessing Public Key Credentials Level 1
• herrjemand/awesome-webauthn: A curated list of awesome WebAuthn/FIDO2 resources
• artifact-project/webauthn: A set of tools for building an API and interacts with WebAuthn
• Getting started with security keys
• 4 Password Authentication Risk & How to Avoid Them
• WebAuthn ,
• Getting Started with WebAuthn with Nick Steele
• Key generation in Yubico U2F Keys