elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Curso de javascript por TickTack


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Mi primer generador de contraseñas en HTML+JS
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Mi primer generador de contraseñas en HTML+JS  (Leído 4,281 veces)
C4C3

Desconectado Desconectado

Mensajes: 4


Ver Perfil
Mi primer generador de contraseñas en HTML+JS
« en: 1 Agosto 2020, 13:54 pm »

Buenos días. tras unas semanas leyendo sobre JS he hecho mi primer generador básico, es un generador de contraseñas "seguras" sin limite de caracteres. Me gustaría saber que tal os parece el código y me deis sugerencias. Gracias.


Código
  1. <!DOCTYPE html>
  2. <html lang="es">
  3.    <head>
  4.        <meta charset="utf-8" />
  5. <center>
  6.        <title>
  7. Generador De Contraseñas
  8. </title>
  9. <p>No hay un máximo de caracteres, pero no se recomiendan mas de 25.</p>
  10. <p>Los numeros de generación de contraseñas siempre deben ser mayor que </p>
  11. <p>Ninguna de las contraseñas generadas se almacenan en este sitio web</p>
  12. <p>El sitio web es totalmente seguro</p>
  13. <p> Hecho Por Samuel (JavS15)</p>
  14. <script type="text/javascript">
  15. function generar(longitud)
  16. {
  17.  long=parseInt(longitud);
  18.  var caracteres = "abcdefghijkmnpqrtuvwxyzABCDEFGHIJKLMNPQRTUVWXYZ2346789";
  19.  var contraseña = "";
  20.  for (i=0; i<long; i++) contraseña += caracteres.charAt(Math.floor(Math.random()*caracteres.length));
  21.  document.getElementById("pass").innerHTML=contraseña;
  22. }
  23. </script>
  24. <p id="pass"></p>
  25. <form id="Form" name="aleatorio" method="post" action="javascript:generar(document.aleatorio.long.value)" >
  26. <input name="long" type="number" id="texto" autocomplete="o" placeholder="Longitud de la contraseña" required="">
  27. <button type="submit" >Generar la contraseña indicada</button>
  28. </center>
  29. </form>
  30.    </head>
  31.    <body>
  32.    </body>
  33. </html>


Mod: Obligatorio el uso de etiquetas GeSHi.


« Última modificación: 4 Agosto 2020, 07:34 am por #!drvy » En línea

@XSStringManolo
Hacker/Programador
Colaborador
***
Desconectado Desconectado

Mensajes: 2.397


Turn off the red ligth


Ver Perfil WWW
Re: Mi primer generador de contraseñas en HTML+JS
« Respuesta #1 en: 1 Agosto 2020, 17:27 pm »

+ <center> no hace nada en el head.
  - Los elementos en head no son visibles (por defecto).


+ Las etiquetas <p> en el head no se ven. Puedes usar comentarios de html.
  - No es necesario que elimines las etiquetas p, pero mete todo en un comentario.

+ El atributo type en script no sirve para nada.
  - Servia hace muchos años cuando había otros lenguajes comunes como vbscript. Ahora javascript es el standart.

+ long está contaminando el alcance global (window) porque se te olvidó var. Añade "use strict"; al inicio de tus scripts para que el navegador tire error y te avise de esta y otras malas prácticas.
  - <script>
"use script";
Tu código.
</script>

+ Utiliza la misma identación (espacios) en el código.
  - Te ayuda a detectar la falta de corchetes y otros errores a simple vista.

+ No uses innerHTML cuando en su lugar puedas usar innerText.
  - innerHTML es el punto de insercción más común de fallos de seguridad.

+ No escribas varias expresiones unas al lado de otras ni omitas los corchetes del cuerpo de funciones. Hay varios corner cases que no conoces y pueden causar errores por hacer esto. A parte dificultas la lectura del código.
  - Tampoco omitas los ; por el mismo motivo.

+ Los script por lo general deben estar al final del body para que los elementos estén cargados antes de trabajar con ellos.
  - También puedes usar window.onload = function() { tu codigo } o usar body.onload = function() { tu código } pero meter el script al final es mejor.

+ Evita utilizar inline javascript siempre que puedas por motivos de seguridad.
  - Puedes bloquear inline javascript, unsafe eval y añadir otras protecciones si añades tu código en un archivo externo <script src="miFuncion.js"></script> A parte que tu web ocupará menos espacio porque puedes reusar el código en varias páginas en lugar de copiar y pegarlo en todos los que lo necesites. Y si necesitas hacer un cambio en tu código no tendrás que ir documento a documento añadiendo ese cambio.

+ El form en tu código no pinta nada. Y el input submit menos aún porque te recarga la página. El atributo autocomplete="o" para qué es?
- En su lugar quita el form, deja el input, y cambia el input submit por un <button type="button" id="miBoton">Generar</button>
Y en lugar del action=javascript:llamadaATuFuncion obtienes el botón desde el javascript, le añades el evento click y la llamada dentro:
document.querySelector("#miBoton").addEventListener("click", function() {
  generar(document.querySelector("#texto").value);
});



En línea

Mi perfil de patrocinadores de GitHub está activo! Puedes patrocinarme para apoyar mi trabajo de código abierto 💖

Leguim


Desconectado Desconectado

Mensajes: 719



Ver Perfil
Re: Mi primer generador de contraseñas en HTML+JS
« Respuesta #2 en: 2 Agosto 2020, 01:31 am »

Probé tu código, y cumple con lo que debe hacer que es generar una contraseña y más todavía que uno le puede dar el ancho de caracteres que se quieran... De igual forma las criticas constructivas son necesarias para poder aprender..

Me gustó!  ;-)

Podes para la próxima intentar poner tu código entre etiquetas dependiendo el lenguaje...

"
Código
  1. //tu código
"

Código
  1. <!DOCTYPE html>
  2. <html lang="es">
  3.    <head>
  4.        <meta charset="utf-8" />
  5.      <center>
  6.        <title>
  7. Generador De Contraseñas
  8. </title>
  9. <p>No hay un máximo de caracteres, pero no se recomiendan mas de 25.</p>
  10. <p>Los numeros de generación de contraseñas siempre deben ser mayor que </p>
  11. <p>Ninguna de las contraseñas generadas se almacenan en este sitio web</p>
  12. <p>El sitio web es totalmente seguro</p>
  13. <p> Hecho Por Samuel (JavS15)</p>
  14. <script type="text/javascript">
  15. function generar(longitud)
  16. {
  17.  long=parseInt(longitud);
  18.  var caracteres = "abcdefghijkmnpqrtuvwxyzABCDEFGHIJKLMNPQRTUVWXYZ2346789";
  19.  var contraseña = "";
  20.  for (i=0; i<long; i++) contraseña += caracteres.charAt(Math.floor(Math.random()*caracteres.length));
  21.  document.getElementById("pass").innerHTML=contraseña;
  22. }
  23. </script>
  24. <p id="pass"></p>
  25. <form id="Form" name="aleatorio" method="post" action="javascript:generar(document.aleatorio.long.value)" >
  26. <input name="long" type="number" id="texto" autocomplete="o" placeholder="Longitud de la contraseña" required="">
  27. <button type="submit" >Generar la contraseña indicada</button>
  28. </center>
  29. </form>
  30.    </head>
  31.    <body>
  32.    </body>
  33. </html>
  34.  
« Última modificación: 2 Agosto 2020, 01:39 am por MiguelCanellas » En línea

AlbertoBSD
Programador y
Moderador Global
***
Desconectado Desconectado

Mensajes: 3.696


🏴 Libertad!!!!!


Ver Perfil WWW
Re: Mi primer generador de contraseñas en HTML+JS
« Respuesta #3 en: 2 Agosto 2020, 05:45 am »

 :silbar: :silbar:

https://albertobsd.dev/random?format=password&length=80

El mio yo lo hice en PHP, prefiero leer de /dev/urandom para obtener los caracteres random.

Saludos!
« Última modificación: 2 Agosto 2020, 05:47 am por AlbertoBSD » En línea

C4C3

Desconectado Desconectado

Mensajes: 4


Ver Perfil
Re: Mi primer generador de contraseñas en HTML+JS
« Respuesta #4 en: 3 Agosto 2020, 23:25 pm »

Muchas gracias a todos! Lo tomaré en cuenta! ya iré publicando otros códigos por aqui jajajaj Un saludo!!
En línea

#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.850



Ver Perfil WWW
Re: Mi primer generador de contraseñas en HTML+JS
« Respuesta #5 en: 4 Agosto 2020, 07:41 am »

Ahora que sabes hacerlo, igual te interesa mejorarlo.

http://www.passwordmeter.com/


Podrías intentar generar uno que cumpla con todas las condiciones que muestra esta página. Principalmente:

- Que haya una cantidad mínima de caracteres repetidos (esto varía en función de la longitud).
- Que no haya caracteres consecutivos (ABC)
- Que no haya repeticiones consecutivas (AAA)
- Que haya una cantidad mínima de letras consecutivas (ADZ1)
- Que haya una cantidad mínima de números consecutivos (132A)
- Que haya símbolos y que estos no sean consecutivos.


Tal y como está diseñado ahora mismo, se puede dar el caso de que tu contraseña generada solo tenga letras minúsculas, solo números o solo letras mayúsculas. El seed en el que te basas es muy normal y consecutivo, básicamente tienes el abecedario puesto seguido de números (sin el 1, curiosamente). Esto abre posibilidades a predicciones sobre el algoritmo. Podrías por ejemplo reordenar los caracteres de forma aleatoria cada vez que vayas a generar la contraseña.


PD: Intenta que el código que escribas este en ingles, mucho más practico y accesible a todo el mundo.


Saludos
« Última modificación: 4 Agosto 2020, 07:48 am por #!drvy » En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
[Batch] Generador de contraseñas seguras
Scripting
_m 3 5,040 Último mensaje 27 Enero 2009, 17:11 pm
por _m
Generador de contraseñas
Programación C/C++
..:ALT3RD:.. 6 8,891 Último mensaje 13 Noviembre 2011, 16:44 pm
por ..:ALT3RD:..
[Python]Generador de contraseñas
Scripting
Iluminadora 0 3,451 Último mensaje 21 Enero 2015, 10:59 am
por Iluminadora
MOVIDO: [Python]Generador de contraseñas
Programación General
Eleкtro 0 1,875 Último mensaje 21 Enero 2015, 12:44 pm
por Eleкtro
Ayuda con generador de contraseñas en python
Scripting
sulcud 4 3,025 Último mensaje 12 Junio 2017, 20:45 pm
por <Trocutor>
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines