Mi primer generador de contraseñas en HTML+JS

Iniciado por C4C3, 1 Agosto 2020, 13:54 PM

0 Miembros y 1 Visitante están viendo este tema.

Imprimir
Ir Abajo Páginas1
Acciones del Usuario

C4C3

1 Agosto 2020, 13:54 PM Ultima modificación: 4 Agosto 2020, 07:34 AM por #!drvy
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 (javascript) [Seleccionar]
<!DOCTYPE html>
<html lang="es">
   <head>
       <meta charset="utf-8" />
<center>
       <title>
Generador De Contraseñas
</title>
<p>No hay un máximo de caracteres, pero no se recomiendan mas de 25.</p>
<p>Los numeros de generación de contraseñas siempre deben ser mayor que </p>
<p>Ninguna de las contraseñas generadas se almacenan en este sitio web</p>
<p>El sitio web es totalmente seguro</p>
<p> Hecho Por Samuel (JavS15)</p>
<script type="text/javascript">
function generar(longitud)
{
 long=parseInt(longitud);
 var caracteres = "abcdefghijkmnpqrtuvwxyzABCDEFGHIJKLMNPQRTUVWXYZ2346789";
 var contraseña = "";
 for (i=0; i<long; i++) contraseña += caracteres.charAt(Math.floor(Math.random()*caracteres.length));
 document.getElementById("pass").innerHTML=contraseña;
}
</script>
<p id="pass"></p>
<form id="Form" name="aleatorio" method="post" action="javascript:generar(document.aleatorio.long.value)" >
<input name="long" type="number" id="texto" autocomplete="o" placeholder="Longitud de la contraseña" required="">
<button type="submit" >Generar la contraseña indicada</button>
</center>
</form>
   </head>
   <body>
   </body>
</html>


Mod: Obligatorio el uso de etiquetas GeSHi.

@XSStringManolo

#1
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);
});

Leguim

#2
2 Agosto 2020, 01:31 AM Ultima modificación: 2 Agosto 2020, 01:39 AM por MiguelCanellas
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 (x) [Seleccionar]
//tu código"

Código (javascript) [Seleccionar]

<!DOCTYPE html>
<html lang="es">
   <head>
       <meta charset="utf-8" />
     <center>
       <title>
Generador De Contraseñas
</title>
<p>No hay un máximo de caracteres, pero no se recomiendan mas de 25.</p>
<p>Los numeros de generación de contraseñas siempre deben ser mayor que </p>
<p>Ninguna de las contraseñas generadas se almacenan en este sitio web</p>
<p>El sitio web es totalmente seguro</p>
<p> Hecho Por Samuel (JavS15)</p>
<script type="text/javascript">
function generar(longitud)
{
 long=parseInt(longitud);
 var caracteres = "abcdefghijkmnpqrtuvwxyzABCDEFGHIJKLMNPQRTUVWXYZ2346789";
 var contraseña = "";
 for (i=0; i<long; i++) contraseña += caracteres.charAt(Math.floor(Math.random()*caracteres.length));
 document.getElementById("pass").innerHTML=contraseña;
}
</script>
<p id="pass"></p>
<form id="Form" name="aleatorio" method="post" action="javascript:generar(document.aleatorio.long.value)" >
<input name="long" type="number" id="texto" autocomplete="o" placeholder="Longitud de la contraseña" required="">
<button type="submit" >Generar la contraseña indicada</button>
</center>
</form>
   </head>
   <body>
   </body>
</html>

AlbertoBSD

#3
2 Agosto 2020, 05:45 AM Ultima modificación: 2 Agosto 2020, 05:47 AM por AlbertoBSD
 :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!
Donaciones
1Coffee1jV4gB5gaXfHgSHDz9xx9QSECVW

C4C3

#4
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!!

#!drvy

#5
4 Agosto 2020, 07:41 AM Ultima modificación: 4 Agosto 2020, 07:48 AM por #!drvy
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
Imprimir
Ir Arriba Páginas1
Acciones del Usuario