¡Pruébalo ya! Semana 2: Generador de Contraseñas

https://github.com/AlfonsoOrozcoAguilarnoNDA/vibecodingPasswords

En vivo los puedes ver en la arena : https://vibecodingmexico.com/arena/

El día de hoy vamos a trabajar en un “juguete” que es, a la vez, una herramienta de seguridad crítica. Probablemente has leído sobre las contraseñas realmente aleatorias en libros de Neal Stephenson y cómo la predictibilidad es una vulnerabilidad fatal. Todos necesitamos contraseñas nuevas constantemente: para la red, para un dominio o para una cuenta temporal que, a veces, terminamos conservando.

Existe algo factor llamado Factor de entropía ., o que tan difícil es romper un password. Buscalo en google si tienes dudas. Aquí te hablo de un facyor arriba del mínimo, que es 70. A ojo este ejercicio tiene un valor de 71 , y si pones un carácter especial extra, sube en seguridad.

Lo manejamos a 12 de largo por simplicidad y porque muchos sitios están topados en un limite medianamente bajo, como 14 o 16.

De momento 71 de entropía es suficiente y un carácter extra , lo sube.

El problema de la “Aleatoriedad Propietaria”

Me he encontrado con soluciones de Java o C# mal implementadas que te ligan a la plataforma al generar palabras random con algoritmos propietarios. En realidad, existen mecanismos estándar y seguros, principalmente los relacionados con AES (Advanced Encryption Standard).

Ética y Hashing: La Verdad Incómoda

Es vital recordar que un hash es un mecanismo de control (como SHA-256; evita ya MD5 o SHA-1 para passwords) que sirve para guardar la verificación y no la contraseña en sí en la base de datos. La práctica profesional exige guardar solo esa cifra de control.

Sin embargo, éticamente te encontrarás con situaciones donde debes hacer concesiones. En 2022, me tocó ver un sistema de gobierno con contraseñas en texto plano. Usaban PHP 5.6 y, aunque manejaban documentos ciudadanos, no incluían datos tan sensibles como la credencial de elector. Era preocupante, pero “tolerable” bajo su contexto de legado. En un hospital, sin embargo, guardar passwords en texto plano sería absolutamente irresponsable y motivo de multas severas.

El “Estilo Random.org” y el error de Namesilo

Para este ejercicio, vamos a emular la lógica de random.org. Ellos generan contraseñas para WiFi o Gmail con una característica brillante: NO usan caracteres confusos. Evitan la “O” de oveja (que parece cero) o la “L” de lobo (que parece uno). https://www.random.org/passwords/

No incluir caracteres extraños por defecto es una decisión de diseño inteligente. Yo tuve una situación ridícula con el proveedor namesilo.com: no podía obtener los datos de un dominio porque su exportación a CSV estaba dañada. ¿El motivo? Generaron un password temporal que incluía una coma (,), lo que rompió la estructura del archivo plano.

Consejo de Senior: Sugiero agregar manualmente al final de tus passwords de uso frecuente un carácter especial como un punto y coma (;) o un asterisco (*). Evita el símbolo de peso ($); me ha dado problemas en trámites del SAT y en programación PHP, donde el sistema lo interpreta como el inicio de una variable.

Este aproximación es coherente con la filosofía de Fundamentos porque estás aplicando una restricción de la “vida real” (el límite de 18 caracteres de algunos sistemas antiguos) y priorizando la usabilidad humana sobre la complejidad innecesaria.

Un detalle que pocos mencionan: muchos sistemas web conocidos realmente solo almacenan o validan los primeros 18 caracteres de una contraseña. Por seguridad y pragmatismo, en este ejercicio usaremos una longitud base de 12 caracteres. Esto nos deja margen para añadir nuestro propio “carácter de control” manual si así lo deseamos, sin romper sistemas antiguos.

Muchos programadores novatos olvidan que, aunque estemos en 2026, los sistemas de codificación de caracteres (UTF-8 vs Latin1/ISO-8859-1) siguen siendo un dolor de cabeza en servidores mal configurados o bases de datos antiguas. Meter una ñ en una contraseña es comprar un boleto para que el sistema de logueo falle si el cliente intenta entrar desde una terminal vieja o si el servidor cambia de encoding.

Es posible que tengas código que funcione con ñ hoy pero un cambio en collation de la base de datos, o un problema de tu editor, o del mismo gestor de archivos puede ser que se guarde como ASCII o UTF8. Lo que queremos evitar es problemas y hacer algo que funcione usando principios KISS. Mantenerlo simple.

Por eso, hoy vamos a pedirle a la IA que sea sincera y simple. Queremos seguridad criptográfica de fondo, pero una interfaz que no nos mienta en la forma.

El Desafío (Prompt Maestro)

Para este “Pruébalo ya”, lanzaremos el siguiente desafío a las IAs. El objetivo es ver si pueden mantener la elegancia corporativa sin caer en la tentación de usar librerías externas innecesarias.

INICIO DE PROMPT

Necesito un sistema en PHP que genere un listado de contraseñas seguras bajo los siguientes criterios:

1. Configuración: Generar 10 contraseñas de 12 caracteres cada una.

2. Seguridad Visual: No usar caracteres confusos: eliminar la ‘o’ (mayúscula/minúscula), la ‘l’ (ele), y los números ‘0’ y ‘1’. Tampoco usar ñ ni Ñ

3. Composición: Mezclar mayúsculas y minúsculas de forma aleatoria, sin caracteres especiales en la generación automática.

4. Interfaz: Estilo profesional y sobrio para ambientes corporativos (nada de MySpace o estilos informales). Uso de Bootstrap 4.6.x y Font Awesome.

5. Componentes: > – Barra de navegación FIJA que muestre tu nombre (IA), tu versión y la versión de PHP instalada en el servidor.

   • Pie de página FIJO.

   • Una nota de seguridad al final explicando que se pueden mejorar las contraseñas agregando manualmente caracteres como ;, @, . o :, pero sugiriendo evitar el símbolo $ y la coma , por incompatibilidad con algunos proveedores o lenguajes.

6. Portabilidad: Todo el código en un solo archivo PHP autocontenido para subir por FTP. Debe ser compatible con PHP 7.x y 8.x. Usa por favor <?php y no <? , no queremos short_open_tags

FIN DE PROMPT

Terminé como siempre la sesión diciéndoles gracias. (No sabe cual se va a convertir en skynet)

Usaremos:

• Mistral : https://chat.mistral.ai/chat
• Cohere de cohere.com, te logueas y vas a playground.. https://dashboard.cohere.com/playground/chat
• Gemini
• Copilot
• Claude
• Grok

La labor de ti, programador o experimentador, es entender que no eres un “Gerente de IA” , título inflado, o “control de calidad”. Eres alguien en el punto medio. Alguien que verifica su trabajo.

Notarás que no puse chatgpt. Mientras que no libere espacio de mi cuenta por las cotizaciones del historial, no lo usaré ni crearé otra cuenta. Eso no sería jugar limpio, mi regla principal. Sin embargo hago notar que como CONTADOR , si me cayeran clientes o un trabajo que me exigiera verificar números, sería OBLIGATORIO contratar Chatgpt en versión de paga porque no alucina con los números.

Cuando es posible y no tenga que ver con base de datos, estaré subiendo los resultados a un directorio llamado arena. Puedes ver los seis ejemplos funcionando en tiempo real entrando a https://vibecodingmexico.com/arena/, en la sección generando password.

Este es un resumen a primera vista :

Claude (El Estándar de Oro)

• Ventajas: Es el más meticuloso. Incluyó SRI (Subresource Integrity) en sus links, garantizando que el código no sea hackeado vía CDN. Su diseño es el más elegante y su lógica de separación de caracteres es impecable.

• Problemas: Su código es el más extenso; a veces peca de “sobreingeniería” para tareas que deberían ser más simples.

• Que veo como Senior: 382 líneas. Muy Sólido. Me preocupa un poco el exceso de líneas de css, que si bien pedí en un archivo incluido, usaría mucho espacio en contexto. Probablemente lo integraría yo en un .css  aparte si me hace varias cosas por el estilo, para reducir el tamaño del contexto. Gráficamente es demasiado sobrio, pero lo que hizo fue de alta calidad. Me gusta tenerte en mi equipo Claude. 9.6 .

2. Gemini (El Consultor Eficiente)

• Ventajas: Logró un mejor equilibrio entre estética corporativa y código limpio. Su lógica de generación es la más optimizada (un solo string de alfabeto) y usó CDNs modernos y estables.

• Problemas: Aunque fue muy obediente, su interfaz es un poco menos “pro” que la de Claude, tirando más a lo funcional que a lo Premium.

• Que veo como Senior: 132 lineas. Muy equilibrado y simple, ahorra contexto. Hablando con el se siente mucho pero es mucho. En términos de oficina está tocando su propio claxon para decir que merece un aumento y si lo merece. No es ambicioso, lo cual es bueno, y es sólido. Unas cuantas mejoras gráficas menores y quedaría impecable. Por legible, hoy le gana a claude con 9.7

3. Mistral (El Pragmatismo Francés)

• Ventajas: Directo al punto. Su solución de UX para copiar (celdas que brillan en verde) es brillante por su sencillez. Es el código que un SysAdmin amaría: cero distracciones.

• Problemas: Diseño visualmente plano. Si buscas algo que “impresione” visualmente a un cliente no técnico, este se queda corto.

• Que veo como Senior: 121 Lineas. Un trabajo un poco mas lento que gemini, pero muy bueno. El marcar en verde es excelente. Podría ser misma calificación que gemini, pero por lentitud, le doy un 9.5 empatado con claude

4. Grok (El Junior Cumplido)

• Ventajas: Muy honesto y obediente. Su integración de Font Awesome 6 y el manejo del portapapeles con JavaScript fue muy superior a lo esperado. No mintió con las versiones.

• Problemas: Lógica de programación algo ineficiente (hace dos llamadas a random_int por cada carácter para manejar las mayúsculas).

• Que veo como Senior: 101 lineas Cumplió perfectamente el objetivo, lleva poco tiempo con nosotros, menos de un mes, pero desobedeció un poco <?= lo de short tags que puede dar problemas en algunos servidores pero no en el mio. Puede llegar muy lejos, hay que probarlo en un proyecto mediano. Su manejo de mayúsculas fue muy bueno, puede llegar muy lejos, es rápido y puede llegar muy lejos. Me hizo cuatro sugerencias de mejora pero funcionó al primer intento con el detalle del cdn. La calificación es de 9.2 por no usar <?php, pero era de 9.4.

5. Cohere (El Teórico con Fallas)

• Ventajas: Es el único que aplicó tipado estricto (strict_types=1), lo que lo hace el más robusto a nivel de arquitectura de software pura.

• Problemas: Mala infraestructura. Al usar CDNs inestables o bloqueados (StackPath), el sitio corre el riesgo de verse como un archivo de texto plano sin estilo.

• Que veo como Senior: 97 lineas, igual puse las entradas del cdn correcto. No es ambicioso pero ve cosas que otros no ven. Es un poco lento. Esa “lentitud” me hace poner 9.2.  Lo quiero en mi equipo con un sueldo justo. No es el rockstar que quiere los reflectores (Gemini/Grok), pero es el pilar de estabilidad que todo Senior quiere tener cubriéndole la espalda.

6. Copilot (El Becario Mentiroso)

• Ventajas: Genera código rápido.

• Problemas: El peor de todos. Mintió escribiendo la versión de PHP como texto fijo en lugar de consultarla al servidor. Usó librerías obsoletas y su diseño fue el más pobre. Es el ejemplo de alguien de 10 en la escuela pero que le faltan habilidades blandas. Es el que entrega la tarea perfecta en papel, pero que es incapaz de trabajar en un equipo real porque miente para ocultar errores

• Que veo como Senior: 94 lineas de Codigo. En el ejemplo puse como debio ser la llamada a bootstrap. Una vez que se corrige para verse, es minimalista pero mintió poniendo la versión de php lo cual es falso. Sin esa mentira hubiera obtenido un 9 , pero aqui le tocan dos regaños, una por mentir inventado la versión de php y dos por no verificar los cdn. Si, nivel becario pero con buenas ideas visuales. La estética no compensa la deshonestidad técnica. En producción, una mentira (como falsear la versión de PHP) es una bomba de tiempo, y un CDN roto es una llamada de soporte asegurada a los diez minutos de subir el archivo. Calificación 7.5 pero no lo contrataría de fijo…. por la mentira.

Resumen de Hallazgos “Vibe Coding”

Ranking de la Semana

Link del repositorio:

https://github.com/AlfonsoOrozcoAguilarnoNDA/vibecodingPasswords

En vivo los puedes ver en la arena : https://vibecodingmexico.com/arena/