Cifrar contraseñas en formulario de HTML

Al enviar un formulario HTML, la información es enviada por medio de la red hasta llegar a su destino final indicado en el action. Aún cuando el action no sea definido, la información viaja por la red para ser enviada al mismo archivo.

La idea de este tutorial es explicar como hacer para cifrar la contraseña y así evitar que viaje como texto plano por la red.

 

¿Qué es cifrado?

Según la madre Wikipedia, es un procedimiento que utilizando un algoritmo (algoritmo de cifrado) con cierta clave (clave de cifrado) transforma un mensaje, sin atender a su estructura lingüística o significado, de tal forma que sea incomprensible o, al menos, difícil de comprender, a toda persona que no tenga la clave secreta (clave de descifrado) del algoritmo que se usa para poder descifrarlo (algoritmo de descifrado).

 

¿Cifrar con hash?

Una función hash se puede entender como un algoritmo que toma una cadena y la convierte en otra cadena de un tamaño finito.

Entre los algoritmos de cifrado de hash mas conocidos se tiene MD5 y SHA

Como no tengo interés alguno en pelear por el cual es el mejor, pues en lo personal considero que ninguno de los dos es “lo perfectamente seguro” entonces este tutorial hará el cifrado con SHA1

 

Cifrar contraseñas en un formulario HTML

 

1. El formulario

Debemos tener ya listo el formulario con HTML e idealmente el CSS para hacerlo bello.

El método por recomendación debería estar siempre en POST para evitar que los datos sean “tan” claros, aún así, podemos ver los datos cuando se envián.
 

2. Revisar los datos enviados

  1. Abre tu formulario en el navegador Chrome
  2. Abre las herramientas de desarrollador en la pestañada de Network
  3. Recarga el sitio
  4. La primera petición fue a tu misma página, y si le das clic podrás ver los datos que fueron enviados por POST.

Datos de envio

 
 

3. Agreguemos una biblioteca para cifrar

La biblioteca que yo uso para el cifrado con SHA1 es tomado del proyecto php.js que utiliza la función SHA1 y la de ut8_decode.

Incluimos la biblioteca en nuestro documento HTML, de preferencia al final justo antes de cerrar el body. Recuerdo que cargar los scripts al final mejora la carga del sitio en lugar de cargarlos en el head.

 

4. Evento en el submit para cifrar la contraseña

Necesitamos detener de algún modo el evento del submit para cifrar la contraseña.

Es fácil lograrlo si ejecutamos un evento al momento de dar clic en el botón de Enviar.

En nuestro caso nuestra función se llamará cifrar 

 

5. Cambiar la contraseña original por la cifrada

 

 6. Comprobación

Ahora solo queda revisar que las cosas esten funcionando. Para eso hacemos lo mismo que en el paso 2

Contraseña cifrada

 
 
Espero que este tutorial te sirva y te acostumbres a aplicar siempre cifrado en tus desarrollos web.

About Michelle Torres

Licenciada en Informática con Maestría en Tecnologías de la Información. Docente por convicción con trece años de experiencia, desarrolladora desde hace nueve años trabajando actualmente con desarrollo WEB para alta disponibilidad, además de ser consultor independiente y capacitador. Participe del movimiento del software libre como fiel apasionada, reconocida por su actividad en la comunidad y su participación en la inclusión.