9/3/2016

Cifrar contraseas en formulario de HTML - michelletorres.mx

Blog

Acerca de

Escribe lo que estas buscando...

Buscar

michelletorres.mx
Desarrollo web,
tecnologa y otras
cosas.
Inicio

MySQL

Programacin

Programacin Web

Software libre

Home / Curso Programacin Web / Curso JS / Cifrar contraseas en formulario de HTML

Bsqueda
Escribe lo que estas buscando...
Buscar

Cifrar contraseas en formulario de

HTML
Posted on 2 October, 2013 by Michelle Torres in Curso JS, Curso Programacin
Web, HTML5, Programacin Web, Seguridad with 26 Comments

Al enviar un formulario HTML, la informacin es enviada por medio de

la red hasta llegar a su destino final indicado en el action. An cuando
el action no sea definido, la informacin viaja por la red para ser
enviada al mismo archivo.
La idea de este tutorial es explicar como hacer para cifrar la
contrasea y as evitar que viaje como texto plano por la red.

Qu es cifrado?
Segn la madre Wikipedia,es un procedimiento que utilizando un
algoritmo (algoritmo de cifrado) con ciertaclave(clave de cifrado)
transforma un mensaje, sin atender a su estructura lingstica o
significado, de tal forma que sea incomprensible o, al menos, difcil 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 funcin hash se puede entender como un algoritmo que toma

Los mas vistos

Listas desplegables en los
formularios HTML

Padres, hijos y hermanos en

jQuery

Como imprimir en pantalla

un carcter utilizando su
cdigo ascii

Cmo Cmo crear diagramas ER en

crear mysql workbench
diagra
mas ER
en
mysql
workbe
nch

Diferencias entre WAMP y

XAMPP

una cadena y la convierte en otra cadena de un tamao finito.

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

http://michelletorres.mx/cifrar-contrasenas-en-formulario-de-html/

Pensandoen

1/10

9/3/2016

Cifrar contraseas en formulario de HTML - michelletorres.mx

SHA

Como no tengo inters 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

Pensandoen
humedades?
Solucionesdemostradas
LlameaHogarSeco

Cifrar contraseas en un
formulario HTML
Temticas

1. El formulario
1 <h2>Registro</h2>
2 <form id="formulario_registro" action="" method="POST">
3
4

<label for="mail">Correo</label>
<input type="email" id="mail" name="mail" placeholder

bootstrap

c++

canonmx

cifrado

divec fest

divecfest

ensamblador

cadenas
css

examen

facebook

gnome

google inc

6
7

grabar escritorio

8 >
9
10

html

html5

jQuery
<button id="enviar" type="submit">Enviar</button>

</form>

Debemos tener ya listo el formulario con HTML e idealmente el CSS

para hacerlo bello.
El mtodo por recomendacin debera estar siempre en POST para
evitar que los datos sean tan claros, an as, podemos ver los datos
cuando se envin.

2. Revisar los datos enviados

1. Abre tu formulario en el navegador Chrome
2. Abre las herramientas de desarrollador en la pestaada de
Network
3. Recarga el sitio

omijal
php

Firebug

grids

java

kazam

michelletorres

debug

estructura

="tucorreo@dominio.com" required/>
5
<label for="pass">Contrasea</label>
<input type="password" id="pass" name="pass" required/

calc

git

hc12

javascript

libre office
mysql

linux

nube

parametros por referencia

programacion

programacion web
servidores
sublime
windows

seguridad

software libre
ubuntu

utzmg

wordpress

Me ayudas con un
donativo?
Si el contenido de este sitio te ha
gustado o te ha sido til, espero que
puedas ayudarme con un donativo.

4. La primera peticin fue a tu misma pgina, y si le das clic podrs

ver los datos que fueron enviados por POST.

http://michelletorres.mx/cifrar-contrasenas-en-formulario-de-html/

2/10

9/3/2016

Cifrar contraseas en formulario de HTML - michelletorres.mx

3. Agreguemos una biblioteca para

cifrar
La biblioteca que yo uso para el cifrado con SHA1 es tomado del
proyecto php.jsque utiliza la funcin 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.
1 <body>
2
.
3

4
5

<form>
.

6
7
8
9
10

.
</form>
.
.
<script src="js/sha1.js"></script>

11 </body>

4. Evento en el submit para cifrar la

contrasea
Necesitamos detener de algn modo el evento del submit para cifrar
la contrasea.
Es fcil lograrlo si ejecutamos un evento al momento de dar clic en el
botn de Enviar.
En nuestro caso nuestra funcin se llamar cifrar
http://michelletorres.mx/cifrar-contrasenas-en-formulario-de-html/

3/10

9/3/2016

Cifrar contraseas en formulario de HTML - michelletorres.mx

1 <form id="formulario_registro" action="" method="POST">

2
<label for="mail">Correo</label>
3

<input type="email" id="mail" name="mail" placeholder

="tucorreo@dominio.com" required/>

4
5
6

<label for="pass">Contrasea</label>
<input type="password" id="pass" name="pass" required/>

7
8

<button id="enviar" type="submit" onclick="cifrar()">En

v
i
a
r
</button>
9
</form>

5. Cambiar la contrasea original

por la cifrada
1
2

.
.

<script src="js/sha1.js"></script>

<script>

function cifrar(){

6
7 s");

var input_pass = document.getElementById("pas

8
9
10

input_pass.value = sha1(input_pass.value);
}
</script>
</body>

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

http://michelletorres.mx/cifrar-contrasenas-en-formulario-de-html/

4/10

9/3/2016

Cifrar contraseas en formulario de HTML - michelletorres.mx

Espero que este tutorial te sirva y te acostumbres a aplicar siempre

cifrado en tus desarrollos web.
Compartir:

52

More

Like this:

Like
Be the first to like this.

Anterior

Siguiente

About Michelle Torres

Licenciada en Informtica con Maestra en Tecnologas de la
Informacin. Docente por conviccin con trece aos de
experiencia, desarrolladora desde hace nueve aos trabajando
actualmente con desarrollo WEB para alta disponibilidad, adems
de ser consultor independiente y capacitador. Participe del
movimiento del software libre como fiel apasionada, reconocida
por su actividad en la comunidad y su participacin en la inclusin.
View all posts by Michelle Torres

Related Posts
Formato a

reas de texto

texto con CSS

dentro de un
formulario
HTML
Colores en CSS

Solucin a:
Agent admitted
failure to sign
using the key

MITSupplyChainMaster's

http://michelletorres.mx/cifrar-contrasenas-en-formulario-de-html/

5/10

9/3/2016

Cifrar contraseas en formulario de HTML - michelletorres.mx

MITSupplyChainMaster's
MasterinSupplyChainManagementandLogistics.RequestInfoNow!

Profile
Sign in with Twitter Sign in with Facebook
or
Comment

Name

Email
Not published

Website

Post It
Notify me of follow-up comments by email.
Notify me of new posts by email.
26 Replies
20 Comments
0 Tweets
6 Facebook
0 Pingbacks
Last reply was 5 months ago

1. View 3 October, 2013

Gracias por el artculo, lo pondr en practica en mis desarrollos
Reply

replied:
View 4 October, 2013
Que gusto.
Y cualquier cosa, no dudes en ponerte en contacto.
Reply
http://michelletorres.mx/cifrar-contrasenas-en-formulario-de-html/

6/10

9/3/2016

Cifrar contraseas en formulario de HTML - michelletorres.mx

2. View 25 October, 2013

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 artculo y quise ponerlo en
prctica en una pgina que estoy haciendo, consegu el sha1.js que
mencionas pero no he podido hacer que cifre. Hasta copi tu el cdigo que
escribiste pero nada, el pass passssa tal cual. Qu me omit o que estoy
haciendo mal?. Saludos y Gracias.
Reply

replied:
View 26 October, 2013
Que tal Alejandro, puedes ir revisando lo que va haciendo tu cdigo de JS
en el debugger del navegador, por ejemplo Chrome.
De esta manera podras ver si tu cadena si fue cifrada y si adems si la
estas asignando a tu variable.
Reply

replied:
View 12 November, 2013
Gracias Michelle. Por cierto, tal vez no sea tu especialidad, pero no
pierdo nada en preguntar, estoy tratando de migrar al software libre
todava me falta encontrar sustituto para el AutoCAD, pero para
sustituir 3ds Max empleo Blender, sabrs de algn lugar donde den
cursos por ac el D.F. sobre este software.
Reply

replied:
View 12 November, 2013
Alejandro,
Conozco a los mejores =D.
Claudia es la administradora de la comunidad G-Blender y da
cursos muy buenos.
http://www.cursosblender.com/category/cursos-online/
Reply

3. View 13 January, 2014

Muy interesante y util tu articulo, gracias por compartir.
Reply

replied:
View 13 January, 2014
Que gusto leer que te sea til =D
Esa es la intencin de este sitio.
http://michelletorres.mx/cifrar-contrasenas-en-formulario-de-html/

7/10

9/3/2016

Cifrar contraseas en formulario de HTML - michelletorres.mx

Reply

4. View 26 May, 2014

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

replied:
View 9 September, 2014
Gracias por la aportacion, pero hay decodificadores que te lo traducen,
como le hariamos para que si tienen la cadena no la decodifiquen ?
Reply

replied:
View 19 September, 2014
Tienes razn, siempre existirn herramientas que por fuerza bruta
(en el peor de los casos) o por algoritmos recuperar contraseas
cifradas md5.
No existe la seguridad absoluta, lo importante es usar cifrados cada
vez mas complejos.
Reply

5. View 19 December, 2014

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/wpcontent/plugins/social/debug_log.txt): failed to open stream: Permission
denied in /home/www/michelletorres.mx/wordpress/wpcontent/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/wpcontent/plugins/social/lib/social/log.php on line 24
Reply

6. View 16 January, 2015

Interesante, era lo que buscaba, gracias Michelle!
http://michelletorres.mx/cifrar-contrasenas-en-formulario-de-html/

8/10

9/3/2016

Cifrar contraseas en formulario de HTML - michelletorres.mx

Reply

7. View 10 months ago

disculpa, cmo 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
Reply

replied:
View 9 months ago
Hola Marco,
Solo debes copiar la funcin y guardarla en un archivo con extensin js.
http://phpjs.org/functions/sha1/
Reply

8. View 8 months ago

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 contrasea, 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 simtrico para enviar los datos, luego uno tipo hash a nivel
bbdd para las contraseas.
Reply

replied:
View 8 months ago
As es Federico, lo ideal es usar cifrado tanto en front como en back de
manera simtrica, as como negar en tu API los push por mtodos no
esperados.
Reply

9. View 5 months ago

Como puedo descargar el archivo sha1.js, he ido a la pagina pero no lo he
podido encontrar, gracias de antemano y muy bueno el articulo.
Reply

replied:
View 5 months ago
Toda la informacin para su descarga esta en la pgina de la funcin.
http://phpjs.org/functions/sha1/
http://michelletorres.mx/cifrar-contrasenas-en-formulario-de-html/

9/10

9/3/2016

Cifrar contraseas en formulario de HTML - michelletorres.mx

Reply

10. View 5 months ago

Si valdas los campos vacios antes de encriptar el valor de los inputs hace
que sea ms 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
vacos) 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);
}
Reply

2013 michelletorres.mx All rights reserved.

http://michelletorres.mx/cifrar-contrasenas-en-formulario-de-html/

10/10