🔐 Cybersecurity Learning Platform

A full-stack web application designed to teach developers about common web vulnerabilities through intentionally insecure code examples. This platform demonstrates real-world security risks including SQL injection and Cross-Site Scripting (XSS) attacks.

🎯 Purpose

This project is an educational tool for learning about web application security vulnerabilities. It provides a safe environment to understand SQL injection, XSS, and authentication mechanisms by exposing them in a controlled learning environment.

📋 Project Overview

Architecture

The application consists of three main components:

┌─────────────────────────────────────────────────────┐
│          Frontend (Next.js + React + TS)            │
│  • Authentication UI                                │
│  • CRUD interface for Ingredients, Models, Process  │
│  • Intentionally vulnerable XSS demo               │
└──────────────────────┬──────────────────────────────┘
                       │ API Calls (JSON)
┌──────────────────────▼──────────────────────────────┐
│       Backend (Express.js + PostgreSQL)             │
│  • JWT Authentication                               │
│  • Raw SQL queries (vulnerable)                     │
│  • RESTful API endpoints                            │
│  • Intentional SQL injection vulnerabilities        │
└──────────────────────┬──────────────────────────────┘
                       │ Database Operations
┌──────────────────────▼──────────────────────────────┐
│       Database (PostgreSQL)                         │
│  • Ingredients table                                │
│  • Models table                                     │
│  • Processes table                                  │
└─────────────────────────────────────────────────────┘

API Endpoints

Authentication:

• POST /auth/login - Generate JWT token (any non-empty username/password accepted for demo)
• GET /health - Health check

Ingredients:

• POST /ingredients - Create new ingredient
• GET /ingredients?q=<query> - Search ingredients (vulnerable to SQL injection)
• PUT /ingredients/:id - Update ingredient
• DELETE /ingredients/:id - Delete ingredient

Models:

• POST /models - Create new model
• GET /models?q=<query> - Search models
• PUT /models/:id - Update model
• DELETE /models/:id - Delete model

Processes:

• POST /processes - Create new process
• GET /processes?q=<query> - Search processes
• PUT /processes/:id - Update process
• DELETE /processes/:id - Delete process

🚀 Getting Started

Prerequisites

• Docker & Docker Compose (recommended)
• OR
• Node.js 16+, PostgreSQL 12+, npm

Quick Start with Docker

# Clone the repository
git clone https://github.com/slimskhab/cybersecurity.git
cd cybersecurity

# Start all services (db, backend, frontend)
docker-compose up

# The application will be available at:
# Frontend: <http://localhost:3000>
# Backend:  <http://localhost:4000>
# Database: <localhost:5432>

Manual Setup (without Docker)

1. Database Setup

# Create PostgreSQL database
createdb cybersecurity

2. Backend Setup

cd backend
npm install

# Create .env file
cat > .env << EOF
NODE_ENV=development
PORT=4000
PGHOST=localhost
PGPORT=5432
PGUSER=postgres
PGPASSWORD=postgres
PGDATABASE=cybersecurity
JWT_SECRET=dev-secret
EOF

# Start backend
npm run dev  # Development mode with auto-reload
# or
npm start   # Production mode

3. Frontend Setup

cd frontend
npm install

# Create .env.local file (if backend on different host)
echo "NEXT_PUBLIC_API_URL=http://localhost:4000" > .env.local

# Start frontend
npm run dev

Open http://localhost:3000 in your browser.

🔓 Security Vulnerabilities (Learning Focus)

1. SQL Injection Vulnerability

Location: Search endpoints (GET /ingredients?q=<payload>)

Vulnerable Code Pattern:

// Backend uses raw SQL string concatenation
const query = `SELECT * FROM ingredients WHERE name LIKE '%${searchTerm}%'`;

Attack Examples:

GET /ingredients?q=%' OR 1=1 --
GET /ingredients?q=%' UNION SELECT * FROM users --
GET /ingredients?q=%'; DROP TABLE ingredients; --

Learning: How parameterized queries and prepared statements prevent SQL injection.

2. Cross-Site Scripting (XSS) Vulnerability

Location: Item descriptions in the frontend

Vulnerable Code Pattern:

// React component rendering user input without sanitization
<div dangerouslySetInnerHTML={{ __html: item.description }} />

Attack Examples:

<img src=x onerror=alert('XSS')>
<script>alert('Stored XSS successfully')</script>
<svg onload=fetch('/api/steal-data')>

Learning: How to properly sanitize user input and use safe rendering methods.

3. Authentication

Method: JWT (JSON Web Tokens)

Credentials: Any non-empty username/password combination works (for demo purposes)

Response:

{
  "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
}

Usage: Include token in Authorization: Bearer <token> header for protected endpoints.

📁 Project Structure

cybersecurity/
├── backend/
│   ├── src/
│   │   ├── index.js              # Express app setup
│   │   ├── controllers/          # Request handlers
│   │   │   ├── ingredientController.js
│   │   │   ├── modelController.js
│   │   │   └── processController.js
│   │   ├── middleware/
│   │   │   └── auth.js           # JWT verification
│   │   ├── routers/              # Route definitions
│   │   │   ├── ingredientRouter.js
│   │   │   ├── modelRouter.js
│   │   │   └── processRouter.js
│   │   ├── services/
│   │   │   ├── db.js             # Database connection
│   │   │   ├── ingredientService.js
│   │   │   ├── modelService.js
│   │   │   └── processService.js
│   │   └── models/
│   │       └── README.md
│   ├── Dockerfile
│   ├── package.json
│   └── .env (create locally)
│
├── frontend/
│   ├── src/
│   │   ├── app/
│   │   │   ├── page.tsx          # Home (redirects to /ingredients or /login)
│   │   │   ├── layout.tsx        # Root layout
│   │   │   ├── globals.css       # Global styles
│   │   │   ├── login/
│   │   │   │   └── page.tsx      # Login page
│   │   │   ├── ingredients/
│   │   │   │   └── page.tsx      # Ingredients CRUD + search (SQL injection demo)
│   │   │   ├── models/
│   │   │   │   └── page.tsx      # Models CRUD
│   │   │   └── processes/
│   │   │       └── page.tsx      # Processes CRUD
│   │   ├── components/
│   │   │   ├── AuthProvider.tsx  # Auth context provider
│   │   │   ├── Protected.tsx     # Protected route wrapper
│   │   │   ├── CrudSuite.tsx     # Reusable CRUD component
│   │   │   └── Nav.tsx           # Navigation bar
│   │   └── lib/
│   │       ├── api.ts            # API client utilities
│   │       └── auth.ts           # Token management
│   ├── Dockerfile
│   ├── package.json
│   ├── next.config.ts
│   ├── tsconfig.json
│   └── .env.local (create if needed)
│
├── docker-compose.yml            # Multi-container setup
└── README.md                      # This file

🛠️ Technology Stack

Backend

• Runtime: Node.js
• Framework: Express.js v5.1.0
• Database: PostgreSQL 16 (Alpine)
• Authentication: JWT (jsonwebtoken)
• Middleware: CORS, body-parser, dotenv

Frontend

• Framework: Next.js 15.5.3
• Language: TypeScript
• UI Framework: React 19.1.0
• Styling: Tailwind CSS 4
• Package Manager: npm

DevOps

• Containers: Docker & Docker Compose
• Database Image: postgres:16-alpine
• Node Image: node:latest (default from alpine)

📚 Learning Outcomes

After working through this platform, you will understand:

1. SQL Injection Attacks

   • How to identify vulnerable SQL patterns
   • Impact of unsanitized user input in queries
   • Proper mitigation using parameterized queries

2. XSS (Cross-Site Scripting)

   • Reflected vs. Stored XSS vulnerabilities
   • DOM-based XSS attacks
   • Content Security Policy (CSP) headers
   • Safe HTML rendering techniques

3. Authentication & Authorization

   • JWT token generation and validation
   • Token expiration and refresh mechanisms
   • Bearer token authentication

4. Secure Development Practices

   • Input validation and sanitization
   • Output encoding
   • Environment variable management
   • HTTPS/CORS considerations

⚠️ Important Security Warnings

DO NOT USE THIS CODE IN PRODUCTION!

This codebase is intentionally vulnerable for educational purposes only. Never deploy applications with:

• SQL string interpolation
• Unsanitized dynamic HTML rendering
• Weak secret keys
• Demo authentication logic

For production applications, implement:

• Parameterized queries / ORMs (Sequelize, TypeORM, Prisma)
• Input validation libraries (joi, yup, validator)
• Output encoding / HTML escaping (xss, sanitize-html)
• Proper secret management (AWS Secrets Manager, HashiCorp Vault)
• Rate limiting, HTTPS, CSRF protection, etc.

🧪 Testing & Experimentation

Using cURL

# Login
curl -X POST <http://localhost:4000/auth/login> \
  -H "Content-Type: application/json" \
  -d '{"username":"admin","password":"password"}' \
  | jq '.token' # Extract token

# Use token for protected endpoints
TOKEN="<your-token-here>"
curl -H "Authorization: Bearer $TOKEN" \
  <http://localhost:4000/health>

# Try SQL injection
curl -H "Authorization: Bearer $TOKEN" \
  "<http://localhost:4000/ingredients?q=%27%20OR%201=1%20-->"

Using the Web Interface

1. Navigate to http://localhost:3000
2. Login with any credentials (e.g., username: admin, password: password)
3. Try entering SQL injection payloads in search fields
4. Try entering XSS payloads in description fields

📖 Resources

• OWASP Top 10: https://owasp.org/Top10/
• SQL Injection: https://owasp.org/www-community/attacks/SQL_Injection
• XSS Prevention: https://owasp.org/www-community/attacks/xss/
• NIST Cybersecurity Framework: https://www.nist.gov/cyberframework

📝 License

This educational project is provided as-is for learning purposes.

🤝 Contributing

Suggestions for additional vulnerabilities or improvements are welcome!

---

Last Updated: 2026
Version: 1.0.0
Status: Educational - Do Not Use in Production ⚠️