4 min de lectura

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.

Compartir
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.

30 COMENTARIOS

  1. Hola Michelle, quiero saber si puedes ayudarme, aclaro de antemano que soy autodidacta y no se nada programar en java pero entiendo lo que pasa en el codigo, generalmente uso php y HTML. Vi tu artículo y quise ponerlo en práctica en una página que estoy haciendo, conseguí el sha1.js que mencionas pero no he podido hacer que cifre. Hasta copié tu el código que escribiste pero nada, el “pass” passssa tal cual. ¿Qué me omití o que estoy haciendo mal?. Saludos y Gracias.

    • Que tal Alejandro, puedes ir revisando lo que va haciendo tu código de JS en el debugger del navegador, por ejemplo Chrome.
      De esta manera podrías ver si tu cadena si fue cifrada y si además si la estas asignando a tu variable.

  2. Existe un problema… Si un hacker usa un sniffer para capturar el paquete, bien porque no sabe la contraseña del usuario, pero igual tiene acceso al sistema. Otro problema es que los usuarios son descuidados y repiten su contraseña en muchos servidores; hay que sumar contraseñas comunes de diccionario. Entonces aunque el hacker no pueda descifrar sha1, puede usar un diccionario, y si está usar la contraseña en otro sistema. Una solución es: “sha1(correo+contraseña)”. Eso dificulta el trabajo de un hacker con un buen diccionario de contraseñas y su sha1.
    Pero bien, siempre se puede tener acceso al sistema con sniffer. Por eso la mejor solución es usar SSL, el problema son los precios.

      • Tienes razón, siempre existirán herramientas que por fuerza bruta (en el peor de los casos) o por algoritmos recuperar contraseñas cifradas md5.
        No existe la seguridad absoluta, lo importante es usar cifrados cada vez mas complejos.

  3. solo para decirte que tienes un erro en tu pagina es un erro de php en este post

    Warning: fopen(/home/www/michelletorres.mx/wordpress/wp-content/plugins/social/debug_log.txt): failed to open stream: Permission denied in /home/www/michelletorres.mx/wordpress/wp-content/plugins/social/lib/social/log.php on line 23

    Warning: fclose() expects parameter 1 to be resource, boolean given in /home/www/michelletorres.mx/wordpress/wp-content/plugins/social/lib/social/log.php on line 24

  4. disculpa, ¿cómo puedo descargar el archivo sha1.js para poder hacer el cifrado?, es que la pagina esta en ingles y no le entiendo, me gustaria que me explicaras como lo puedo descargar. Saludos

  5. Interesante solo tengo una cuestion. en el caso del login, solo brinda seguridad para cuando los datos se envian por GET, luego es igual, sea texto claro o hash. Si hay un sniffer, pues no le interesa saber cual es el texto claro de la contraseña, puesto que NO se puede a partir de un hash obtener la cadena origen, simplemente copiar y pegar, para luego enviar a traves de un formulario personalizado el usuario y el hash capturado. Me parece mejor usar un cifrado simétrico para enviar los datos, luego uno tipo hash a nivel bbdd para las contraseñas.

    • Así es Federico, lo ideal es usar cifrado tanto en front como en back de manera simétrica, así como negar en tu API los push por métodos no esperados.

  6. Si valídas los campos vacios antes de encriptar el valor de los inputs hace que sea más agradable a la vista si al usuario se le va la mano y envia el formulario incompleto (lo desordena al crearse un hash de los espacios vacíos) bonito blog n_n

    var input_pass = document.getElementById(“passwd”);
    var input_user = document.getElementById(“username”);
    if(input_pass.value !== “” && input_user.value !== “”){
    input_pass.value = sha1(input_pass.value);
    input_user.value = sha1(input_user.value);
    }

  7. Hola disculpa te corrijo, lo que haces es aplicar una funcion hash sobre tu contraseña, esto la protege pero es imposible recuperar el texto al que se aplico la funcion hash (texto original) por lo que no es cifrado.

  8. excelente aporte a pesar de ser del 2013 hay muchisimos sitios que no consideran esto y solo se preocupan de cifrar el trafico por HTTPS

DEJA UNA RESPUESTA

Please enter your comment!
Please enter your name here