Generador de contraseñas seguras con JavaScript

Código de generador de contraseñas en JavaScript

En este artículo vamos a ver cómo crear un generador de contraseñas seguras mediante JavaScript. De esta manera podemos implementarlo fácilmente en nuestra web o blog. El programa está  pensado para ser modificado fácilmente. De hecho, tengo previstas algunas modificaciones para la versión 2.0, que incluirán:

  • Poder modificar la longitud de la contraseña, con un mínimo de 9. Se introducirá al ejecutarlo, mediante el teclado.
  • Poder modificar el número de cada tipo de caracter, con un mínimo de 1 para cada uno. También se introducirá mediante el teclado.
  • Poder crear una nueva contraseña al pulsar un botón, en lugar de tener que refrescar la página.

Ahora que lo tenemos claro, ¡vamos al lío!

¿Por qué un generador de contraseñas seguras?

Mediante páginas como How secure is my password podemos comprobar lo rápido que es conseguir una contraseña mediante ataques de fuerza bruta.

Con los programas adecuados y el tiempo suficiente se pueden romper contraseñas de menos de 9 caracteres en tiempos que van desde menos de 1 segundo hasta 3 días como máximo.

Gracias a este sencillo programa podemos crear nuestras propias contraseñas de manera que cumpla con nuestros criterios. Como añadido sabemos que no se está guardando en ningún sitio extraño 😉

 

¿Por qué un generador de contraseñas seguras con JavaScript?

JavaScript es el lenguaje de programación que se usa para el lado cliente de las páginas web. Es decir, se ejecuta en el navegador de tu ordenador. Al entrar en una página web, se descarga en forma de texto plano y se puede ver de manera sencilla mirando el código fuente de la página. Esto hace que cualquiera que acceda a la web pueda ver qué es lo que hace el programa de manera transparente.

Esto no ocurre con lenguajes de servidor como PHP, que se ejecutan en el lado del servidor y devuelven código HTML puro y duro, por lo que no podemos ver qué es lo que hace el  programa propiamente dicho, a no ser que seamos el administrador de dicha página.

Ejemplo de funcionamiento del generador de contraseñas seguras con JavaScript

Al abrir el fichero en un navegador como Mozilla Firefox, Internet Explorer, Opera, Google Chrome o cualquier otro que admita JavaScript, verás el siguiente resultado:

Resultado del generador de contraseñas seguras con JavaScript

La idea era poder ver el resultado directo desde aquí, pero uso el CDN de CloudFlare y a pesar de sus muchas ventajas, me inyecta código JavaScript en la web y me modifica mi programa, por lo que no es viable. Aún así, recomiendo el uso de algún CDN para mejorar la velocidad y seguridad de vuestra web 😉 La explicación detallada es tema para otro artículo.

De momento puedes ver mi artículo sobre cómo configurar un subdominio en un CDN como ClodFlare

Descargar el código del generador de contraseñas seguras con JavaScript

Desde el siguiente enlace puedes descargar el código correspondiente.

creador-de-password-seguros-con-javascript.zip

Pero te recomiendo  crear un fork  del proyecto desde mi repositorio de Github. Si todavía no usas Github, te recomiendo que hagas este curso que comento en otro de mis artículos, es gratuito y te va a facilitar la vida mucho como programador.

Vamos a ver el código puro y duro

Aquí tienes el código. Ahora lo veremos poco a poco y explicando cada parte.

 

 

Declaración de variables

En esta primera parte del script simplemente declaramos las variables que vamos a usar posteriormente. Es importante usar siempre la palabra reservada var para limitar el alcance o scope de dicha variable, es decir, desde dónde es reconocida. En este programa sencillito y con mis nombres de variables tan descriptivos no tendríamos problemas si se nos olvidara, pero como siempre, hay que coger buenas costumbres.

Los nombres de las variables son muy descriptivos. Podemos cambiar fácilmente los parámetros, para obtener una contraseña más larga o con mayor número de caracteres o símbolos, por ejemplo.

 

Función genera_aleatorio()

Ésta es una sencilla función que nos devuelve un número aleatorio (redondeando a entero) dentro de un rango que le indicamos al pasar el límite inferior y superior como parámetros.

 

Función genera_caracter()

Esta función nos devuelve un carácter en base al tipo que le pasamos como parámetro.

El tipo de carácter que nos devuelva será:

  • Letra minúscula
  • Letra mayúscula
  • Número
  • Símbolo
  • Aleatorio (uno de los otros tipos)

Es importante tener en cuenta que no todos los caracteres, números o símbolos se van a utilizar. Por claridad y seguridad se han omitido algunos como la “i” mayúscula o la “l” minúscula. El juego de caracteres concreto se ha definido en la propia función, en la variable lista_de_caracteres.

 

 

Flujo del programa

El programa arranca en el body de la página, llamado a la función generar_contraseña().

 

 

Función generar_contraseña()

En esta función es donde se ejecuta la lógica del programa. Vamos a ir viendo sus partes.

La lógica del programa está formada por 5 bucles de tipo while que generan caracteres de cada tipo hasta llegar a la cantidad que hemos indicado previamente; en este caso 1.

Si tras crear cada tipo de caracter no hemos llegado al tamaño de las contraseñas, el último bucle genera caracteres aleatorios hasta completarla.

 

¿Dudas? ¿Preguntas? Y si te ha gustado, ¡comparte!

Si algo no te ha quedado claro puedes dejar un comentario. Y si te ha gustado, ya sabes, puedes compartirlo 🙂

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *