Role-play phishing simulation mock UI
Why Choose This Project?
Most breaches start with successful phishing. Traditional training tells users what not to do, but role-play simulations let them practice real decisions in a safe environment. This project delivers a mock inbox / chat / webpage UI that mimics real scenarios (email, SMS, chat apps, login pages) so users can spot red flags, decide actions, and learn from instant feedback—without sending real emails or touching production mail systems.
What You Get in This Project
A browser-based phishing simulation UI with realistic email/chat/webpage mockups, scenario editor, instant feedback coach, scoring, and an admin view for assigning scenarios and reviewing results.
Technology Stack
| Layer | Technology |
|---|---|
| Frontend | HTML, CSS, Bootstrap, JavaScript (React optional for SPA) |
| Backend | Node.js (Express) / Spring Boot / Django (optional; can be frontend-only with JSON scenarios) |
| Database | JSON/SQLite/MySQL/PostgreSQL for scenarios, results, users |
| Auth | JWT / Spring Security (for admin & learner roles) |
| Visualization | Chart.js for scores & completion analytics |
| Optional | WebSockets for live events, LocalStorage for offline mode |
Key Features
| Feature | Description |
|---|---|
| Mock Inbox & Message Viewer | Realistic email client UI: inbox list, preview pane, headers, attachments, hover link previews. |
| Multi-Channel Scenarios | Email, SMS (“smishing”), chat (Slack/Teams), fake landing pages (SSO, bank, delivery) in tabs. |
| Red-Flag Highlights | Toggle to reveal teachable markers: mismatched domains, DKIM/From anomalies (mocked), typos, urgency cues. |
| Safe Interaction | Users can click links, hover, download “attachments” (all simulated) and choose actions (report, ignore, open). |
| Decision Prompts | “What would you do?” actions with immediate coaching and explanations. |
| Scoring & Feedback | Points for correct actions, deductions for risky clicks, detailed post-scenario breakdown. |
| Scenario Builder | Admin UI to create/edit scenarios: sender, body, links, assets, difficulty, red-flag checklist, correct path. |
| Leaderboard & Reports | Per-user scores, time to decision, top risks, completion status, export CSV. |
| Accessibility & Mobile | Keyboard nav, ARIA labels, responsive layouts. |
Working Flow
-
Admin Creates Scenario
Defines channel (email/SMS/chat/web), message content, fake domain(s), attachment types, flagged cues, and desired “safe path” (e.g., report → verify with IT). -
User Launches Simulation
Sees a realistic inbox or chat thread. Can hover links (tooltip shows true URL), open attachments (safe mock), or open landing pages. -
User Makes a Decision
Chooses Report, Ignore, Open, or Enter Credentials (simulated). For each action, the UI records decision, dwell time, and path. -
Instant Coaching
Displays why the choice was safe/risky, highlights red flags (domain misspell, display-name spoof, attachment type), and shows a “What you should do” tip. -
Scoring & Review
Score calculated based on actions/time. User sees a summary card and can replay with hints enabled. -
Admin Analytics
Dashboard shows adoption, high-risk patterns (e.g., users falling for SSO spoofs), scenario difficulty, and exports.
Security Features
-
All interactions are simulated—no real emails or external calls; links resolve to internal mock routes.
-
Sandboxed attachment previews—never execute code; show static viewers for PDF/ZIP/EXE warnings.
-
Role-Based Access Control—Admin vs Learner areas.
-
Content Sanitization—Render scenario HTML safely to prevent XSS in authored content.
-
Strict CSP & HTTPS—Blocks inline scripts and mixed content.
-
Anonymized Reporting (optional)—Aggregate metrics without personal identifiers for privacy.