Présentation effectuée au Meetup Lizard Secu (27 aout 2020)par Christophe Villeneuve sur "Le futur de l'authentification WebAuthn". Vous allez voir comment se passer du mot de passe en utilisant WebAuthn

1. @hellosct1
@hellosct1@mamot.fr
Christophe Villeneuve
Le futur de l’authentification WebAuthn
Lizard Secu – Meetup – 27 Août 2020

2. @hellosct1
Aujourd’hui
●
WebAuthn : Qu’est ce ?
●
En pratique
●
Plus loin

3. ●
WebAuthn : Qu’est ce ?
●
En pratique
●
Plus loin

4. @hellosct1
WebAuthn
●
Interface d'authentification des utilisateurs aux applications
Web
A l'aide de clés asymétriques
●
Norme de sécurité
– Développé par W3C & contribué avec la FIDO
– Publié en 2018
●
Permet orchestrer un système de défis cryptographiques
entre 3 entités
– Des applications, appelée Relying Party (RP)
– L’utilisateur souhaitant s’authentifier à l’application
– L’authenticateur : Elément sécurisé en charge de la crypto et de
la protection des secrets.

5. @hellosct1
WebAuthn : En 2 mots
●
Norme viserait à éliminer
→ La nécessité de saisir des mots de passe
lorsque les utilisateurs se connectent à Internet
●
Le but
– Sécuriser l’accès aux applications web,
– Empêcher les attaques de phishing,
●
Ex : Les utilisateurs des sites bancaires ou B2B / B2C
●
Méthode
– C’est une méthode de connexion plutôt que les mots de passe
– Approche alternative
→ comme deuxième méthode de vérification

6. @hellosct1
API Web Authentification
●
Compatible :
– Firefox 60 +
– Chrome 67 +
– Edge 18 +
– Opera 54 +
●
Solution SaaS
– Implémentation dans votre application permettant aux
utilisateurs de créer un compte et de se connecter.
– Appelée webauthn.me
●
Solution Auth0
– Simplifier en quelque sorte l’implémentation de cette spécification.

7. @hellosct1
Fonctionnement
●
Déroulement en plusieurs étapes :
– Enregistrer le nouvel utilisateur
– Touchez votre dispositif de sécurité
– Votre nouvel identifiant
– Authentification avec un identifiant
– Touchez votre dispositif de sécurité
USB
– Authentification
© https://en.wikipedia.org/wiki/WebAuthn

8. @hellosct1
Workflow

9. ●
WebAuthn : Qu’est ce ?
●
En pratique
●
Plus loin

10. @hellosct1
Etape 1 : Opération d’enregistrement
navigator.credentials
.create({
publicKey: {
challenge: base64url.decode("<%= challenge %>"),
rp: {
name: "Awesome Corp" // sample relying party
},
user: {
id: base64url.decode("<%= id %>"),
name: "<%= name %>",
displayName: "<%= displayName %>"
},
authenticatorSelection: { userVerification: "preferred" },
attestation: "direct",
pubKeyCredParams: [
{
type: "public-key",
alg: -7 // "ES256" IANA COSE Algorithms registry
}
]
}
})
.then(res => {
var json = publicKeyCredentialToJSON(res);
post("/webauthn/register", {
state: "<%= state %>",
provider: "<%= provider %>",
res: JSON.stringify(json)
});
})
.catch(console.error);
Générer une clé aléatoire
(16 caractères)
relying party
Utilisateur
Réponse en JSON
Envoyé vers le serveur

11. @hellosct1
Etape 2 : Etape d’authentification (1/2)
navigator.credentials
.get({
publicKey: {
challenge: base64url.decode("<%= challenge %>"),
allowCredentials: [
{
id: base64url.decode("<%= id %>"),
type: "public-key"
}
],
timeout: 15000,
authenticatorSelection: { userVerification: "preferred" }
}
})
Générer une clé aléatoire
(16 caractères)

12. @hellosct1
Etape 2 : Etape d’authentification (2/2)
.then(res => {
var json = publicKeyCredentialToJSON(res);
post("/webauthn/authenticate", {
state: "<%= state %>",
provider: "<%= provider %>",
res: JSON.stringify(json)
});
})
.catch(err => {
alert("Invalid FIDO device");
});
Réponse en JSON
Envoyé vers le serveur

13. @hellosct1
En PHP
●
Demo
https://github.com/web-auth/webauthn-framework/tree/v3.2/src/webauthn

14. @hellosct1
Tester en ligne WebAuthn
●
Demo par yubico
– https://demo.yubico.com/webauthn/

15. ●
WebAuthn : Qu’est ce ?
●
En pratique
●
Plus loin

16. @hellosct1
Enfin
●
Côté développeurs
– Implémenter l’API WebAuthn
●
Côté utilisateurs
– Attendre la mise en place de Généralisation
●
FIDO2 / WebAuthn
●
Côté des sites webs et des smartphones
●
Manière générale
– Délégation de l’authentification (vers les services Web)
→ OpenID Connect / OIDC

17. @hellosct1
Plus loin...
●
Guide WebAuthn
– https://webauthn.guide/
●
Demo par yubico
– https://demo.yubico.com/webauthn/
●
PHP
– https://github.com/web-auth/webauthn-framework
●
Javascript
– https://www.npmjs.com/package/webauthn

18. @hellosct1
Christophe Villeneuve
@hellosct1
@hellosct1@mamot.fr
Merci
Le futur de l’authentification WebAuthn