Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: C4C3 en 1 Agosto 2020, 13:54 pm


Título: Mi primer generador de contraseñas en HTML+JS
Publicado por: C4C3 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.

Título: Re: Mi primer generador de contraseñas en HTML+JS
Publicado por: @XSStringManolo 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);
});


Título: Re: Mi primer generador de contraseñas en HTML+JS
Publicado por: Leguim 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.  

Título: Re: Mi primer generador de contraseñas en HTML+JS
Publicado por: AlbertoBSD 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!

Título: Re: Mi primer generador de contraseñas en HTML+JS
Publicado por: C4C3 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!!

Título: Re: Mi primer generador de contraseñas en HTML+JS
Publicado por: #!drvy 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


Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines