Entradas etiquetadas como ‘► JavaScript’

Cifrar password con javascript

La  seguridad en nuestras aplicaciones web es esencial, por lo que almacenar un registro con el campo de contraseña en texto plano es una debilidad en nuestro sistema.

Para cifrar nuestros passwords podemos usar “algoritmos de cifrado no reversibles” como es md5 o SHA-1 , los lenguajes de programación tiene funciones predefinidas, como:

1295149174_application-pgp-signature

 

PHP –> SHA1 | MD5

JAVA –> SHA1 | MD5

 

 

Todas estas funciones se ejecutan del lado del servidor, pero que pasa si necesitamos cifrar el password del lado del cliente. Pues para eso podemos utilizar una función en JavaScript para cifrar.

Utilizaremos una librería de JavaScript ( ojo: es “BSD License” )  y aunque esta en su modo Beta, funciona bastante bien, la podemos descargar de aqui .

Para nuestro ejemplo primero, descargaremos el archivo que contiene las funciones en JavaScript  (carpeta: jshash-2.2) enseguida crearemos un archivo HTML de la siguiente forma:

   1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

   2: <html xmlns="http://www.w3.org/1999/xhtml">

   3: <head>

   4: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

   5: <title>Documento sin título</title>

   6: </head>

   7: <script src="jshash-2.2/sha1.js" type="text/javascript"></script>

   8:  

   9:  

  10: <body>

  11: <form id="form1" name="form1" method="post" action="">

  12:   <p>

  13:     <label for="Password"></label>

  14:     Password Natural:

  15:     <input type="text" name="Password" id="Password" />

  16:     <input type="button" name="encripta" id="encripta" value="Encripta" onClick="psw_pass.value = hex_sha1(Password.value);" />

  17:   </p>

  18:   <p>Password Encript:

  19:     <label for="psw_pass"></label>

  20:     <input type="text" name="psw_pass" id="psw_pass" />

  21:   </p>

  22: </form>

  23: </body>

  24: </html>

Como podemos observar que incluimos la librería sha1.js

   1: <script src="jshash-2.2/sha1.js" type="text/javascript"></script>

La forma de utilizarlo es:

   1: onClick="psw_pass.value = hex_sha1(Password.value);"

Así de fácil 🙂 , pero para que quede mas claro dejo los archivos fuentes:

Archivo_zipDescargar

 

Fuente:

http://pajhome.org.uk/crypt/md5

Unos post divertidos sobre C# en Visual Studio:

http://developersdotnet.com/blogs/marcos/archive/2007/06/05/criptograf-237-a-algoritmos-asim-233-tricos.aspx

Anuncios

Medir la seguridad de tu Password con JavaScript

Cuando realizamos una aplicación es común que tengamos algún control de usuarios, y que estos mismos definan una contraseña para entrar al sistema, pero muchas veces estas contraseñas no son seguras así que para dar un toque de profesionalismo y ayudar a los usuarios a tener passwords mas seguros podemos implementar un medidor de “Fuerza de passwords”.
image

¿Que tan seguro es tu clave / password?

Para no complicarnos la vida, podemos utilizar un medidor de fuerza de password Open Source como por ejemplo: Ajax password strength que gracias a jQuery puede medir la fuerza del password de forma visual , además que es sencillo de configurar, teniendo opciones como:
  • Mensajes personalizados
  • Definir minimo tamaño de password
  • Restringir palabras inseguras para que no puedan ser utilizadas como password
  • Colores personalizados
  • etc..
Que mejor … que ver un ejemplo de este maravilloso código.
2.-Descomprime
3.-Prueba
Update 01/02/2011 – Se corrigió el link http://simplythebest.net/scripts/ajax/ajax_password_strength.html (antes tenia una A mayúscula y no encontrava la pagina.)

Mostrar y ocultar elementos con JavaScript

Ya parezco revista semanal (por que solo posteo una vez a la semana). Pero como siempre intento mostrar cosas útiles, para que no batallen como yo buscando información.

Casi siempre es necesario ocultarle cosas al usuario por “X” razón, y esto parece muy complejo en ambiente web (por que no encontramos algo como en Visual Basic -modificando solo la propiedad visible=”false”), pero JavaScript nos facilitara esta tarea

¡Vallamos al grano!

Escenario: Tenemos que hacer un formulario en el cual guardaremos los clientes de una empresa, pero resulta ser que nuestros clientes pueden ser personas físicas(Una persona cualquiera) o personas morales (Empresas *grupo de personas), entonces dependiendo de lo que sean, tendremos que almacenar diferentes datos:

Personas Físicas:

-Apellido Paterno

-Apellido Materno

-Nombre(s)

Personas Morales:

-Razón Social (nombre de la empresa)

Como podemos ver, si un cliente es una persona física tendremos que mostrar los campos para introducir Apellido Paterno, Apellido Materno y Nombre(s), al mismo tiempo ocultar el campo de Razón Social, pero si un cliente es persona moral tendremos que mostrar el campo Razón Social y ocultar los campos Apellido Paterno, Apellido Materno y Nombre(s).

Para solucionar esto basta con poner un Grupo de opción (radio buttons) , para que cuando elijan el tipo de persona el script realice la acción de ocultar o mostrar dichos campos.

image

El código es muy fácil :

   1: <html>
   2: <head>
   3: <title>Muestra y oculta div</title>
   4:
   5: <script language="JavaScript">
   6:
   7: function oculta(id){
   8:      var elDiv = document.getElementById(id); //se define la variable "elDiv" igual a nuestro div
   9:      elDiv.style.display='none'; //damos un atributo display:none que oculta el div     
  10:     }
  11:
  12: function muestra(id){
  13:      var elDiv = document.getElementById(id); //se define la variable "elDiv" igual a nuestro div
  14:      elDiv.style.display='block';//damos un atributo display:block que  el div     
  15:     }
  16:
  17:
  18: window.onload = function(){/*hace que se cargue la función */
  19: /* "Mandamos como parametro el nombre de la Div para ocultar" */
  20: oculta('Pmoral'); /*Ocultamos Pmoral*/
  21: }
  22: </script>
  23:
  24: </head>
  25:
  26: <body>
  27:
  28: <!--Al hacer llamado de la función solo tienes que idicar el nombre del DIV entre parentesis-->
  29: <p>
  30:   <label>
  31:    <input type="radio" name="pers_cte" value="Fisica"  id="per_0" onClick="muestra('Pfisica'); oculta('Pmoral')" checked > <!-- Al cambiar "onClick" el valor del radio llamamos la funcion ocultando los campos de Pfisica y mostrando Pmoral-->
  32:     Fisica</label>
  33:   <br>
  34:   <label>
  35:    <input type="radio" name="pers_cte" value="Moral" id="per_1" onClick="muestra('Pmoral'); oculta('Pfisica')">
  36:     Moral</label>
  37:   <br>
  38: </p>
  39:
  40: <div id="Pfisica">
  41: <p>Este contenido es para persona Fisica</p>  <!--Div para ocultar o mostrar de Persona Fisica -->
  42: </div>
  43:
  44: <div id="Pmoral">
  45: <p>Este contenido es para persona Moral</p>   <!--Div para ocultar o mostrar de Persona moral -->
  46: </div>
  47: </body>
  48: </html>

*El código esta comentado =) para que no se espanten.

Demo[Espera a que cargué por completo la pagina]

Download Código

[Si, si lo se hay mucho código en internet que nos ayuda con esto, pero creo yo que este es muy fácil, sencillo y pequeño]

Inspirado| http://blogandweb.com/javascript/ocultar-o-mostrar-un-div-con-javascript/

Calendario jQuery

Pues ahora posteo una pequeña contribución personal; muchas veces en nuestros proyectos web necesitamos de un calendario y pues tenemos infinidad de opciones para hacerlo (de igual forma aquí dejo una pagina que enumera una lista de calendarios).

En este caso yo decidí probar jQuery UI Datepicker, mas que nada por que tenia un fabuloso Widget para Dreamweaver.

El instalarlo es sencillo simplemente lo bajas e instalas el archivo con Adobe Extension Manager con eso aparecerá una pestaña en Dreamweaver como la de la siguiente figura:

image

Al insertar este componente nos pedirá guardar algunos componentes

image

estos componentes tienen información importante para el calendario.

Y de igual forma esta el código fuente 🙂

 

 

El problema de usar el Widget, es que el calendario esta en ingles por lo que decidí traducirlo de forma parcial (“solo lo importante”) al español 😉 espero que sea de utilidad solo tienen que sustituir el siguiente archivo:ui.datepicker.js

Archivo_zip Descarga la traducción de ui.datepicker.js

Dreamweaver Web Widgets | Descargar calendario

Nube de etiquetas