Cloud Challenge CTF

Introduction

Cloud Challenge CTF transforms abstract cloud security concepts into concrete, hands-on learning experiences through narrative-driven challenges and real AWS infrastructure. While presented as a cyberpunk-themed CTF platform, it's fundamentally about making AWS security principles tangible and memorable. The system uses storytelling and interactive scenarios to help users understand security threats (like data poisoning attacks on AI systems), learn defensive techniques, and develop practical skills through direct engagement with AWS services. Built with a static frontend + serverless backend architecture on AWS, the system demonstrates how modern web technologies can deliver complex interactive learning experiences with minimal infrastructure overhead while maintaining scalability, security, and cost efficiency.

1. Architecture Philosophy

Cloud Challenge CTF is built on a foundation of static frontend + serverless backend architecture using AWS-native services. This design addresses the core challenges of delivering effective security education: rapid iteration during challenge development, automatic scaling with learner traffic, flexible addition of new security scenarios, and secure handling of AWS credentials and challenge validation. The architecture supports both the learning experience through narrative-driven progression and hands-on AWS practice, while meeting educational goals by making security concepts concrete and teaching defensive techniques through real scenarios.

Static Frontend + Serverless Backend

The platform uses a static Next.js frontend deployed to S3 and CloudFront, with serverless Lambda functions handling validation and state management. This approach provides several key benefits:

• Rapid Development: Static frontend eliminates server-side rendering complexity, allowing focus on challenge design, user experience, and narrative. Backend functions are independently deployable and testable, enabling rapid iteration on validation logic and scoring.
• Cost Efficiency: Infrastructure scales to zero when unused. Static hosting on S3 + CloudFront requires no server management with no per-request charges for frontend. Lambda functions charge only for actual execution time.
• Performance: CloudFront CDN provides global edge caching with sub-100ms response times worldwide. Lambda functions scale automatically from zero to thousands of concurrent executions with consistent performance.
• Scalability: Both frontend and backend scale automatically without configuration. CloudFront handles unlimited frontend traffic while Lambda handles backend requests with built-in auto-scaling.
• Security: Static frontend has no server-side attack surface. Lambda functions run in isolated execution environments with ephemeral filesystems. API Gateway provides built-in DDoS protection, rate limiting, and request validation.
• Developer Experience: Modern React/Next.js tooling provides excellent development workflow with hot reloading, type safety with TypeScript, and component-based architecture.
• Flexibility: New challenges can be added as new Lambda functions without affecting existing functionality. Frontend and backend can be updated independently.

2. System Overview

At its core, Cloud Challenge CTF follows a straightforward pattern: static frontend served via CDN, API calls to serverless backend, state persists in browser and DynamoDB, zero traditional server infrastructure required.

┌─────────────────────────────────────────────────────────────────┐
│              CLOUD CHALLENGE CTF SYSTEM                         │
│                                                                 │
│  ┌──────────────┐                                              │
│  │   Player     │                                              │
│  │   Browser    │                                              │
│  └──────┬───────┘                                              │
│         │                                                       │
│         │ HTTPS Request (Game URL)                             │
│         ▼                                                       │
│  ┌─────────────────┐                                           │
│  │  CloudFront CDN │                                           │
│  │  (Global Edge)  │                                           │
│  └──────┬──────────┘                                           │
│         │                                                       │
│         │ Cache Hit (Edge) or Origin Request                   │
│         ▼                                                       │
│  ┌─────────────────┐                                           │
│  │  S3 Bucket      │                                           │
│  │  (Static Files) │                                           │
│  └──────┬──────────┘                                           │
│         │                                                       │
│         │ Static Assets (HTML, JS, CSS, Images, Fonts)         │
│         ▼                                                       │
│  ┌─────────────────┐                                           │
│  │  Next.js App    │                                           │
│  │  (React + TS)   │                                           │
│  └──────┬──────────┘                                           │
│         │                                                       │
│         │ API Calls (User Actions, Challenge Validation)       │
│         ▼                                                       │
│  ┌─────────────────┐                                           │
│  │  API Gateway    │                                           │
│  │  (REST API)     │                                           │
│  └──────┬──────────┘                                           │
│         │                                                       │
│         │ Route to Lambda Function                             │
│         ▼                                                       │
│  ┌─────────────────┐                                           │
│  │  Lambda         │                                           │
│  │  (Python 3.9)   │                                           │
│  └──────┬──────────┘                                           │
│         │                                                       │
│         ├─ Read/Write User Data ──────────────┐               │
│         │                                       │               │
│         ▼                                       ▼               │
│  ┌─────────────────┐                 ┌─────────────────┐      │
│  │  DynamoDB       │                 │  AWS KMS/STS    │      │
│  │  (User Profiles,│                 │  (Challenge     │      │
│  │   Challenge     │                 │   Credentials)  │      │
│  │   Progress)     │                 └─────────────────┘      │
│  └──────┬──────────┘                                           │
│         │                                                       │
│         │ Response (JSON)                                       │
│         ▼                                                       │
│  ┌─────────────────┐                                           │
│  │  Frontend       │                                           │
│  │  (Update UI)    │                                           │
│  └─────────────────┘                                           │
│                                                                 │
│  ┌─────────────────┐                                           │
│  │  Browser Storage│                                           │
│  │  • localStorage │ (Authenticated users, persistent)         │
│  │  • sessionStorage│ (Guest users, temporary)                 │
│  └─────────────────┘                                           │
└─────────────────────────────────────────────────────────────────┘

Key Components

Frontend (Next.js Static Export)

• React 18.2.0 with TypeScript for type-safe component architecture
• Next.js 14.2.20 configured for static site generation (output: 'export')
• Tailwind CSS 3.4.1 for responsive, utility-first styling with cyberpunk theme
• Google Fonts (Orbitron for titles, Fira Code for terminal text)
• @react-oauth/google v0.12.2 for client-side Google OAuth authentication
• Lucide React v0.464.0 for consistent iconography
• Custom AuthContext for session management with dual storage strategy
• Client-side routing with Next.js Router

Backend (AWS Serverless)

• API Gateway: RESTful API with Lambda proxy integration, CORS enabled, regional deployment (us-east-1)
• Lambda Functions: 9 Python 3.9 functions for user management, authentication, and challenge validation
• DynamoDB: Two NoSQL tables for user profiles (awschallangeUsersTable) and challenge state (awsChallengeChallengesTable)
• AWS KMS: Key Management Service for encryption/decryption in challenges
• AWS STS: Security Token Service for temporary AWS credentials with scoped permissions

Hosting (AWS S3 + CloudFront)

• S3 Bucket: ccchallange-prod for static website hosting (HTML, JS, CSS, images, fonts)
• CloudFront CDN: Distribution ID E3O8J8O00C9XL9 with global edge caching across 450+ points of presence
• Custom Domain: cloudchallenge.cirrusly-clever.com via Route 53 integration
• SSL/TLS: Automatic certificate management via AWS Certificate Manager
• Deployment: Simple aws s3 sync out/ s3://ccchallange-prod --delete after build
• Auto-scaling: CloudFront automatically scales to handle any traffic volume

Authentication (Dual-Path System)

• Google OAuth 2.0: Client-side authentication using @react-oauth/google library
• Guest Mode: Anonymous play with auto-generated profiles and temporary sessions
• Session Management:
  • localStorage for authenticated users (persistent across browser sessions)
  • sessionStorage for guest users (cleared when browser tab closes)
• AuthContext: Custom React context providing useAuth() hook for global session state

Challenge System (Multi-Stage CTF)

• Operation Hallucination: 4-stage narrative-driven challenge
  • Stage 1: Mission briefing and context
  • Stage 2: Riddle validation with answer pattern matching
  • Stage 3: AWS KMS decryption with temporary credentials
  • Stage 4: Final protocol name validation
• Attempt Tracking: Max 3 wrong attempts, max 3 close attempts, 30-minute lockout
• Progress Persistence: Per-user per-challenge state tracking in DynamoDB
• Score System: Points awarded based on completion speed and attempt count