En este Taller de Javascript vamos a realizar 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.

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.

Criterio para informar de la seguridad de una clave

La estrategia que vamos a seguir para valorar el grado de seguridad de una contraseña consiste en asignar una puntuación en función de distintos criterios. A medida que se van cumpliendo esos criterios, vamos asignando más valores de puntuación y por tanto vamos aumentando el grado de seguridad. Estas serán las puntuaciones que vamos a otorgar para los distintos conceptos:

• Tiene letras y números: +30%
• Tiene mayúsculas y minúsculas: +30%

Luego, para la longitud de la clave asignaremos uno de estos valores de seguridad:

• Tiene entre 4 y 5 caracteres: +10%
• Tiene entre 6 y 8 caracteres: +30%
• Tiene más de 8 caracteres: +40%

El objetivo de este artículo es ofrecerte una vía y un modo de trabajo para poder validar la seguridad de la clave. No pretendemos llegar a complicarlo demasiado, para que se pueda entender el proceso, por lo que el sistema podría ser más riguroso. Por tanto, podríamos haber escogido cualquier otra puntuación para la seguridad de la contraseña o incluso haber considerado otros criterios, como colocar caracteres especiales. Pero esta valdrá. En cualquier caso, para que quede claro este baremo, pongo un par de ejemplos:

1. 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.
2. 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.

Función que calcula la seguridad de una clave

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 getPasswordSecurity(password) {
  let secValue;
  let lengthSecurityValues = [0, 0, 0, 0, 10, 10, 30, 30, 30];
  if(password.length >= lengthSecurityValues.length) {
    secValue = 40;
  } else {
    secValue = lengthSecurityValues[password.length];
  }
  if (tiene_numeros(password) && tiene_letras(password)) {
    secValue += 30;
  }
  if (tiene_minusculas(password) && tiene_mayusculas(password)) {
    secValue += 30;
  }
  return secValue;
}

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" id="passwd">
  <i>seguridad:</i> <span id="seg">0%</span>
</form>

Como vemos, tenemos un campo INPUT de tipo PASSWORD donde escribiremos la clave. Además encontramos un SPAN en el que volcaremos luego con Javascript el valor calculado de la seguridad.

Luego tenemos que asignar un evento ONKEYUP, que se ejecuta cuando el usuario pulsa una tecla, disparándose en el momento de soltarla. Esa función manejadora será la encargada de hacer que se visualice la seguridad de la clave.

El código para conseguir ese efecto es el siguiente:

document.getElementById('passwd').addEventListener('keyup', function(e) {
  document.getElementById('seg').innerText = getPasswordSecurity(e.target.value) + "%";
});

En el código anterior asignamos como contenido de texto al <span> el valor que nos devuelve getPasswordSecurity(), enviando el contenido del campo de password. No tiene mucho más misterio.

Te dejamos un código del ejemplo completo donde puedes ver las funciones de verificación de los strings que hemos usado para conseguir esta comprobación de la seguridad de la clave.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Seguridad de una clave</title>
</head>
<body>
  
  <form>
    Clave: <input type="password" size=15 name="clave" id="passwd">
    <i>seguridad:</i> <span id="seg">0%</span>
  </form>


  <script>

    function tiene_numeros(texto) {
      var numeros = "0123456789";
      for (i = 0; i < texto.length; i++) {
        if (numeros.indexOf(texto.charAt(i), 0) != -1) {
          return 1;
        }
      }
      return 0;
    }

    function tiene_letras(texto) {
      var letras = "abcdefghyjklmnñopqrstuvwxyz";
      texto = texto.toLowerCase();
      for (i = 0; i < texto.length; i++) {
        if (letras.indexOf(texto.charAt(i), 0) != -1) {
          return 1;
        }
      }
      return 0;
    }

    function tiene_minusculas(texto) {
      var letras = "abcdefghyjklmnñopqrstuvwxyz";
      for (i = 0; i < texto.length; i++) {
        if (letras.indexOf(texto.charAt(i), 0) != -1) {
          return 1;
        }
      }
      return 0;
    }

    function tiene_mayusculas(texto) {
      var letras_mayusculas = "ABCDEFGHYJKLMNÑOPQRSTUVWXYZ";
      for (i = 0; i < texto.length; i++) {
        if (letras_mayusculas.indexOf(texto.charAt(i), 0) != -1) {
          return 1;
        }
      }
      return 0;
    }

    function getPasswordSecurity(password) {
      let secValue;
      let lengthSecurityValues = [0, 0, 0, 0, 10, 10, 30, 30, 30];
      if(password.length >= lengthSecurityValues.length) {
        secValue = 40;
      } else {
        secValue = lengthSecurityValues[password.length];
      }
      if (tiene_numeros(password) && tiene_letras(password)) {
        secValue += 30;
      }
      if (tiene_minusculas(password) && tiene_mayusculas(password)) {
        secValue += 30;
      }
      return secValue;
    }

    document.getElementById('passwd').addEventListener('keyup', function(e) {
      document.getElementById('seg').innerText = getPasswordSecurity(e.target.value) + "%";
    });


  </script>
</body>
</html>

Las funciones están copiadas y pegadas del artículo mencionado. No me gustan demasiado porque están en español sus nombres y ahora se considera mejor práctica poner los identificadores de las funciones en inglés. También repite unos valores de array que se podrían compartir de alguna manera. En todo caso, cuando actualice ese artículo mejoraré esas funciones.

Otra cosa que estaría muy interesante es encapsular este comportamiento en un componente reutilizable, por ejemplo en un Custom Element del estándar de Web Components, ya que nos daría pie a reutilizar el código en distintos lugares.