Vamos a ver un sencillo script en Javascript para comprobar el grado de seguridad de una clave escrita por el usuario. Como es un script javascript del lado del cliente, permitirá mostrar el nivel de seguridad de la clave al mismo tiempo que el usuario la escribe en un campo de formulario.

Este script lo podremos utilizar libremente en nuestras páginas, de modo que ofrezcamos a los visitantes una información sobre lo segura o insegura que es la clave que están eligiendo, lo que les motivará a escribir claves más seguras que las que habitualmente se escriben.

Podemos ver un ejemplo del objetivo buscado antes de continuar.

En un artículo anterior del taller de Javascript estuvimos mostrando la manera de hacer varias funciones para comprobar un string y saber si tiene letras, números, mayúsculas y minúsculas. Estas funciones las utilizaremos ahora para este script de información de seguridad de la contraseña.

Para valorar el grado de seguridad de una contraseña vamos a tener en cuenta estas puntuaciones sobre distintos conceptos:

Tiene letras y números: +30%
Tiene mayúsculas y minúsculas: +30%
Tiene entre 4 y 5 caracteres: +10%
Tiene entre 6 y 8 caracteres: +30%
Tiene más de 8 caracteres: +40%

Podríamos haber escogido cualquier otra puntuación para la seguridad de la contraseña, pero esta valdrá. También podríamos haber creado otros criterios para decidir el grado de seguridad. En cualquier caso, para que quede claro este baremo, pongo un par de ejemplos:

A) Una clave con números y letras, con 7 caracteres tendría: 30% por letras y números + 30% por tener entre 6 y 8 caracteres = 60% de seguridad.
B) Otra clave con letras mayúsculas y minúsculas, sin números, y con 8 caracteres: 30% por mayúsculas y minúsculas + 40% por más de 8 caracteres = 70% de seguridad.

Para controlar la seguridad, apoyándonos en las funciones de validación alfanumérica de strings vistas anteriormente, haremos una función como esta:

function seguridad_clave(clave){
   var seguridad = 0;
   if (clave.length!=0){
      if (tiene_numeros(clave) && tiene_letras(clave)){
         seguridad += 30;
      }
      if (tiene_minusculas(clave) && tiene_mayusculas(clave)){
         seguridad += 30;
      }
      if (clave.length >= 4 && clave.length <= 5){
         seguridad += 10;
      }else{
         if (clave.length >= 6 && clave.length <= 8){
            seguridad += 30;
         }else{
            if (clave.length > 8){
               seguridad += 40;
            }
         }
      }
   }
   return seguridad            
}   

Vamos comprobando si el string tiene diversas cosas, como letras, números, mayúsculas, minúsculas, así como su longitud, para ir asignando un mayor valor a la seguridad.

Ejemplo de uso en un formulario que pide una clave

Ahora, veamos un sencillo ejemplo de uso de la función en un formulario, que muestra la seguridad de una clave escrita por el usuario:

El formulario podría ser como este:

<form>
Clave: <input type="password" size=15 name="clave" onkeyup="muestra_seguridad_clave(this.value, this.form)">
<i>seguridad:</i> <input name="seguridad" type="text" style="border: 0px; background-color:ffffff; text-decoration:italic;" onfocus="blur()">
</form>

Como vemos, tenemos 1 campo INPUT de tipo PASSWORD donde escribiremos la clave. A este campo se le ha introducido un evento ONKEYUP que se ejecuta cuando el usuario pulsa una tecla, pero en el momento de soltarla. Esa función será la encargada de hacer que se visualice la seguridad de la clave.

Pero además, hemos colocado otro campo de texto, para colocar el valor de seguridad de la contraseña. Este campo lo hemos forzado a que no se pueda escribir en él con el evento onfocus="blur()">. Sólo se podrá modificar mediante Javascript.

Veamos la función muestra_seguridad_clave(), que es la que se encarga de recibir tanto la clave escrita como el formulario donde se encuentra, para actualizar el valor de seguridad.

function muestra_seguridad_clave(clave,formulario){
   seguridad=seguridad_clave(clave);
   formulario.seguridad.value=seguridad + "%";
}

Como vemos, se hace uso de la función que devuelve la seguridad de un string que se va a utilizar como contraseña. Luego se mete ese valor en el campo de texto adicional que hay en el formulario.

Podemos ver el ejemplo en una página aparte.