IAZARA/Juego_Ciberseguridad
GitHub: IAZARA/Juego_Ciberseguridad
Stars: 0 | Forks: 0
CyberShield
Un taller interactivo y gamificado para aprender ciberseguridad e higiene digital desde escenarios reales.
Vista previa · Cómo se usa · Niveles · Stack · Ejecución local · Docker · Despliegue
| 
| 
|
## Sobre el Proyecto
CyberShield es una experiencia educativa mobile-first que entrena una habilidad clave para sobrevivir online:
El juego transforma conceptos de seguridad en decisiones concretas: detectar phishing, reconocer enlaces sospechosos, evitar trampas con QR, responder ante robo de dispositivos y crear contraseñas robustas.
## Etiquetas
`cybersecurity` `digital-hygiene` `phishing` `education` `game` `mobile-first` `javascript` `express` `railway`
## Cómo se Usa
CyberShield se juega desde el navegador, idealmente en una pantalla móvil o con vista responsive. El usuario elige idioma, avanza por los 7 niveles y resuelve decisiones de seguridad simuladas. Cada pantalla entrega feedback inmediato para reforzar el criterio: leer la situación, pensar el riesgo y actuar con cuidado.
Para talleres o clases:
1. Proyecta o comparte la URL del juego.
2. Pide a cada participante que complete los niveles desde su celular.
3. Usa los errores y aciertos como disparadores de conversación.
4. Cierra con el checklist final de higiene digital.
Para uso individual:
1. Abre la app.
2. Selecciona idioma.
3. Completa los desafíos en orden.
4. Repite los niveles donde hayas fallado para reforzar el aprendizaje.
## Niveles
| # | Módulo | Aprendizaje principal |
|---|--------|------------------------|
| 1 | Trampa de permisos | Leer antes de aceptar condiciones invasivas. |
| 2 | Detective phishing | Identificar remitentes, urgencias falsas y enlaces peligrosos. |
| 3 | Escenarios interactivos | Resolver situaciones de juice jacking, WiFi público, QRishing y vishing. |
| 4 | Protocolo de emergencia | Ordenar acciones críticas ante el robo de un celular. |
| 5 | Contraseña segura | Construir una clave fuerte con feedback en tiempo real. |
| 6 | Digital Shield | Validar hábitos de protección como 2FA, parches y desconfianza cero. |
| 7 | Certificado | Cerrar el taller con un logro compartible. |
## Stack
| Área | Tecnología |
|------|------------|
| Frontend | HTML5, CSS3, JavaScript vanilla |
| UI | CSS custom, Google Material Symbols, utilidades Tailwind via CDN |
| Backend | Node.js + Express |
| Arquitectura | Single Page Application servida desde `public/` |
| Contenedor | Docker + Docker Compose |
| Deploy | Railway, Render o cualquier host Node.js/Docker |
## Estructura
.
|-- public/
| |-- index.html
| |-- styles.css
| |-- game.js
| `-- translation.js
|-- docs/
| `-- assets/
| |-- cybershield-banner.png
| |-- preview-splash.png
| |-- preview-phishing.png
| `-- preview-password.png
|-- server.js
|-- Dockerfile
|-- docker-compose.yml
|-- SECURITY.md
|-- package.json
`-- README.md
## Ejecución Local
git clone https://github.com/IAZARA/Juego_Ciberseguridad.git
cd Juego_Ciberseguridad
npm install
npm start
Luego abre:
http://localhost:3000
Si el puerto `3000` está ocupado, puedes usar otro puerto:
PORT=3001 npm start
En PowerShell:
$env:PORT=3001
npm start
Comandos útiles para revisar el proyecto antes de compartirlo:
npm run check
npm run audit
## Docker
La forma más simple de ejecutar CyberShield sin configurar Node.js localmente es usando Docker.
### Opción 1: Docker Compose
docker compose up --build
Luego abre:
http://localhost:3000
Para detenerlo:
docker compose down
### Opción 2: Docker CLI
docker build -t cybershield-game .
docker run --rm -p 3000:3000 cybershield-game
También puedes usar los scripts incluidos:
npm run docker:build
npm run docker:run
El contenedor corre en modo producción, expone el puerto `3000`, usa un usuario no-root, remueve gestores de paquetes del runtime final y tiene un healthcheck HTTP.
## Seguridad
El servidor Express aplica headers defensivos para una app estática:
- `Content-Security-Policy` restringida a recursos propios, Google Fonts y las imágenes educativas usadas por el juego.
- `X-Frame-Options: DENY` y `frame-ancestors 'none'` para evitar clickjacking.
- `X-Content-Type-Options: nosniff`.
- `Permissions-Policy` bloqueando cámara, micrófono, geolocalización y pagos.
- `Strict-Transport-Security` cuando la app corre detrás de HTTPS.
- `x-powered-by` deshabilitado.
## Despliegue
El repositorio está listo para desplegarse en Railway, Render o cualquier plataforma compatible con Node.js o Docker.
1. Crea un nuevo proyecto.
2. Selecciona este repositorio desde GitHub.
3. Usa `npm start` como comando de inicio.
4. Genera el dominio público desde el panel del proveedor.
Si tu proveedor permite Docker, también puedes desplegar directamente desde el `Dockerfile`.
## Autor
Creado por **Iván Agustín Zárate**.
## Licencia
Distribuido bajo licencia MIT. Consulta [LICENSE](LICENSE) para más información.标签：自定义脚本