@hellosct1
@hellosct1@mamot.fr
Christophe Villeneuve
Le futur de l’authentification WebAuthn
Lizard Secu – Meetup – 27 Août 2020
@hellosct1
Aujourd’hui
●
WebAuthn : Qu’est ce ?
●
En pratique
●
Plus loin
●
WebAuthn : Qu’est ce ?
●
En pratique
●
Plus loin
@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.
@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
@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.
@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
@hellosct1
Workflow
●
WebAuthn : Qu’est ce ?
●
En pratique
●
Plus loin
@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
@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)
@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
@hellosct1
En PHP
●
Demo
https://github.com/web-auth/webauthn-framework/tree/v3.2/src/webauthn
@hellosct1
Tester en ligne WebAuthn
●
Demo par yubico
– https://demo.yubico.com/webauthn/
●
WebAuthn : Qu’est ce ?
●
En pratique
●
Plus loin
@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
@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
@hellosct1
Christophe Villeneuve
@hellosct1
@hellosct1@mamot.fr
Merci
Le futur de l’authentification WebAuthn

Le futur de l'authentification webAuthn

  • 1.
    @hellosct1 @hellosct1@mamot.fr Christophe Villeneuve Le futurde l’authentification WebAuthn Lizard Secu – Meetup – 27 Août 2020
  • 2.
  • 3.
  • 4.
    @hellosct1 WebAuthn ● Interface d'authentification desutilisateurs 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 2mots ● 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.
  • 9.
  • 10.
    @hellosct1 Etape 1 : Opérationd’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 : Etaped’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 : Etaped’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.
  • 14.
    @hellosct1 Tester en ligneWebAuthn ● Demo par yubico – https://demo.yubico.com/webauthn/
  • 15.
  • 16.
    @hellosct1 Enfin ● Côté développeurs – Implémenterl’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.