keygen HTML5: Un nuevo campo para la generación de claves

Con keygen HTML5 seguimos descubriendo las nuevas etiquetas de HTML5.

Esta etiqueta sirve para enviar claves en el autentificado web. Al enviarse el formulario se crean 2 claves, una pública que se envía al servidor y que posteriormente se usará para seguir auntentificándonos en el sistema, y otra privada que se almacena localmente en el navegador.

Etiqueta obsoleta

Esta etiqueta está obsoleta desde 2018.

Sintaxis de HTML5 keygen

Su sintaxis es muy sencilla, aquí os pongo su código:

<keygen name="clave">

1	<keygen name="clave">

Como podéis ver, es una etiqueta a la que se le asigna un nombre.

Atributos importantes de Keygen

keytype: Tipo de clave enviada, por defecto es RSA. Otros tipos de clave son: EC y DSA.
challenge: Especifica si la clave cambia tras el envío del form.
form: Id del form al que pertenece la clave.

Más info sobre la keygen de HTML5 en este enlace.

Ejemplo de keygen HTML5

En el siguiente ejemplo de keygen HTML5 veremos el valor de la clave pública enviada. Y dependiendo del navegador el tipo de cifrado que se puede elegir. Una vez pulsado el botón de envío, veréis como sale un recuadro calculando la clave.

<form action="formu.php" method="post">
    User: <input type="text" name="usuario">
    <!-- añadimos el campo de typo keygen -->
    Pass: <keygen name="clave">
    <input type="submit" value="Enviar">
</form>

User: <input type="text" name="usuario">

Pass: <keygen name="clave">

</form>

Os pongo el código PHP para obtener la clave pública enviada por POST.

<?php 
if ($_POST['clave'])
echo "clave pública enviada: " .$_POST['clave'];
?>

<?php

if ($_POST['clave'])

echo "clave pública enviada: " .$_POST['clave'];

Listado de los nuevos input y etiquetas HTML5

En esta url tenéis el listado completo de los nuevos input y etiquetas de HTML5.

Listado de los nuevos atributos HTML5

En esta otra url tenéis todos los nuevos atributos HTML5 para inputs y formularios.