Niveau : Expert

Formulaires HTML5 : Élément keygen

Tutoriel par (WebDesigner grapilleur de Kiwiz, Strasbourg)
Créé le , mis à jour le (27747 lectures)
Tags : formulaire, html5, keygen

Sommaire


Élément <keygen>

Cet élément nécessite un certain bagage technique pour en comprendre et maitriser les usages.
Essayons d'en résumer les grandes lignes.

<keygen> permet de générer un jeu de clefs pour le cryptage et le décryptage d'informations (enregistrées en base de données ou transmises d'un serveur à l'autre par exemple).
Le jeu équivaut à une paire de clefs, l'une dite publique, l'autre dite privée. La clef privée est stoquée localement dans votre navigateur, tandis que la clef publique est envoyée au le serveur.

L'utilisation de cet élément doit être couplée à un système de gestion de certificats électroniques et permet de créer un système d'authentification basé sur un certificat client plutôt que sur un schéma classique d'authentification par mot de passe. C'est utile pour les services qui ont besoin d'une authentification forte comme par exemple les sites de banques. Ce système d'authentification par certicat ne fonctionne que sur un système utilisant SSL/TLS (sites en HTTPs)

Différents niveaux de cryptage existent et correspondent à un niveau de sécurité plus ou moins élevé (high pour 2048 bits ou medium pour 1024 bits).
Voici un aperçu sous Chrome Mobile pour Android.

Exemple de parcours

Une implémentation classique peut se présenter sous le forme suivante :

  1. Un formulaire est présente à l'utilisateur et lui demande de choisir la taille de la clé à l'aide de l'élément keygen.
  2. À la soumission du formulaire le serveur reçoit le clé publique et la signe avec un certificat émanent d'une autorité de certification et sa clé associée
  3. Le certificat est renvoyé au navigateur client qui le stocke.
  4. À partir de là l'utilisateur est authentifié par le service grâce à ce certificat.

L'attribut keytype

Lié à l'élément keygen cet attribut permet de renseigner le type de clef attendue. Par défaut il a pour valeur la clé de type RSA (Rivest, Shamir et Adleman, les inventeurs de la méthode de cryptage), mais il peut également accepter DSA et EC.

<keygen keytype="rsa" name="key">

L'attribut keyparams

Cet attribut est nécessaire lorsque la valeur de l'attribut keytype est DSA ou EC. Pour la valeur RSA, cet attribut est ignoré même si renseigné par vos soins.

Concernant sa valeur :

  • pour DSA il s'agit des paramètres DSA PQG encodé en DER,
  • pour EC il s'agit du nom de la courbe elliptique à utiliser

L'attribut challenge

Cet attribut ajoute une chaîne de caractère envoyée avec la clef publique. Elle a pour valeur par défaut une chaîne vide.

<keygen keytype="rsa" challenge="sel_de_mer" name="key">

Propriétés de l'élément <keygen>

Propriété Détails
Modèles de contenu autorisés Élément vide
Parents autorisés Tout élément pouvant contenir des éléments de phrasé, excepté <a> et <button>
Omission de balise La balise ouvrante est obligatoire. Pas de balise fermante.
Style par défaut L'élément propose une apparence de type "menulist"

Compatibilité de l'élément <keygen>

Navigateurs Versions Détails
Firefox

Firefox 3.6+
Firefox Mobile (Android 4)

Propose deux niveaux.
Aucun fallback. Bogue au focus.
Chrome Chrome 6+
Chrome Mobile (Android 4)
Propose deux niveaux : 2048 et 1024
Idem sur mobile.
Opera Opera 10.6+
Opera Mobile (Android 4)
Propose 13 niveaux : de 1024 à 4096
Idem sur mobile.
Safari Safari 5+ (Mac uniquement)
Safari Mobile (iOS 5)
Propose 3 niveaux : 2048, 1024 et 512
Aucun fallback

Démonstration

Plus d'informations sur : https://developer.mozilla.org/fr/docs/Web/HTML/Element/Keygen
E
xemple d'implémentation d'authentification par certificat utilisant l'élément keygen en PHP et avec OpenSSL  : https://openweb.or.kr/html5/e_keygen.php

Merci à jb_gfx pour certains compléments d'article.