Chao Security Garden

Framing the Problem

Security operations centres (SOCs) rely on flat dashboards with tables and charts to monitor hundreds of network devices. This makes it difficult to quickly identify which devices are compromised, where they are located, and how threats are spreading across a network. Operators suffer from alert fatigue and slow response times because traditional 2D interfaces lack spatial context.

Idea Explanation

SEGA HQ is a 3D cybersecurity visualization dashboard that maps network devices onto floors of a virtual building. Instead of scrolling through tables, operators can visually navigate floors, instantly spot compromised devices by colour (green = healthy, red = compromised, yellow = quarantined), and take action directly, quarantining or scanning devices with a single click. The retro SEGA game aesthetic keeps the interface engaging during long monitoring sessions.

Implementation

The project is a single-page React application with no backend required for the core experience.

The frontend uses React 19 with Three.js (via React Three Fiber) for 3D rendering and Tailwind CSS for the 2D HUD overlay. Zustand manages all application state including device data, trust scores, alerts, zoom levels, and attack simulation. A WebSocket hook is built in for connecting to a live backend data feed, with all incoming payloads validated and sanitized to prevent XSS injection. The app generates its own demo data when no backend is connected. Device data and alerts are held in-memory. In production, this would connect to a SIEM or network monitoring backend.

The user navigates three zoom levels: world view (full building), building view (see all floors), and floor interior (inspect individual devices). Each floor has a unique SEGA game-themed interior.

Challenges

Three.js and CSP conflicts were a major hurdle, Content Security Policy headers blocked WebGL shader compilation because Three.js uses eval-like patterns internally, requiring careful balancing of security headers with rendering requirements. Performance with five detailed themed floors containing animated elements (cherry blossom petals, spinning masks, neon signs) required careful component design to avoid unnecessary re-renders. Keeping camera transitions, device selection, and floor navigation in sync across zoom levels required a well-structured central store with stable selectors to prevent render cascades.

Accomplishments

We built a fully interactive 3D cybersecurity dashboard from scratch with five uniquely themed floor interiors. We implemented WebSocket input sanitization with HTML entity encoding, payload validation, type whitelisting, and message size limits to prevent XSS attacks. We created a realistic attack simulation that randomly targets devices across different floors with multiple attack types (SSH brute force, SQL injection, phishing, zero-day exploits). We applied security-by-design principles including rate-limited authentication, session management with auto-expiry, and defence-in-depth through multiple security layers. We learned how to integrate Three.js with React's rendering lifecycle and manage complex 3D state.

Next Steps

Migrate to server-side authentication with bcrypt/argon2 replacing client-side SHA-256 hashing. Connect to real network monitoring tools (Splunk, Elastic SIEM) via WebSocket for actual device telemetry. Add role-based access control with Admin, Analyst, and Viewer roles. Enable HTTPS/WSS enforcement with HSTS headers. Implement audit logging for all operator actions to a persistent database for compliance. Adapt the HUD layout for tablet and mobile use in the field.