A full-stack cybersecurity dashboard that simulates real-time DDoS attack analysis and demonstrates how layered detection plus mitigation controls can reduce attack impact.
Live demo: https://ddos-analysis-mitigation-dashboard.netlify.app
This project was built to explain how a modern DDoS detection system should work in practice. Instead of relying on one simple rule like "traffic is high", the system evaluates traffic across multiple perspectives and raises alerts only when several indicators agree.
The dashboard continuously models:
- Time-based baseline deviation
- Repetitive and bot-like request behavior
- Entropy changes in source IP and port distribution
- Protocol-level misuse such as SYN flood, UDP flood, and HTTP flood patterns
- Lightweight anomaly-model confirmation
It then combines those signals into a hybrid decision engine that reduces false positives while still surfacing suspicious multi-layer behavior.
- Real-time dashboard refresh every 3 seconds
- Cyber-themed UI with 3D-inspired visual styling
- Scenario simulation for:
- Normal traffic
- TCP SYN flood
- UDP flood
- HTTP flood
- Multi-vector attack
- Layered DDoS analysis using:
- Adaptive moving baseline analysis
- Behavior-based traffic analysis
- Entropy analysis
- Protocol-level validation
- Lightweight anomaly detection
- Interactive mitigation controls:
- Block IPs
- Rate limit traffic
- Filter malicious packets
- Apply firewall rules
- Suspicious IP table, traffic chart, incident queue, detection verdict, recommendations, and response timeline
- Netlify-ready deployment using serverless functions
The dashboard models a hybrid DDoS detection workflow:
- Traffic capture and feature extraction
- Baseline learning from recent time windows
- Behavior comparison against expected browsing/session patterns
- Entropy change detection for distributed anomalies
- Protocol validation for misuse and half-open connections
- Anomaly scoring
- Consensus-based decision engine
An attack is not treated as confirmed based on one noisy metric. The system needs agreement across multiple layers before escalating confidence.
Once suspicious behavior is detected, the platform can simulate how mitigation controls affect the traffic profile:
Block IPs: stops the most abusive sourcesRate limit traffic: reduces volumetric burstsFilter malicious packets: suppresses malformed or abnormal packet patternsUse firewall rules: applies protocol-aware defensive controls
These controls feed back into the dashboard so the user can observe how risk and signal confidence change after mitigation.
- Frontend: HTML, CSS, Vanilla JavaScript
- Backend: Node.js, Express
- Deployment: Netlify + Netlify Functions
Install dependencies and start the app:
npm install
npm startOpen: http://localhost:3000
For watch mode:
npm run devLocal Express server:
GET /api/metaGET /api/dashboardPOST /api/dashboardPOST /api/scenarioPOST /api/mitigations/:idPOST /api/reset
Netlify Functions:
GET /.netlify/functions/metaGET /.netlify/functions/dashboardPOST /.netlify/functions/dashboard
Production routing exposes the serverless API as:
GET /api/metaGET /api/dashboardPOST /api/dashboard
.
|-- netlify/
| `-- functions/
| |-- dashboard.js
| `-- meta.js
|-- public/
| |-- app.js
| |-- index.html
| `-- styles.css
|-- src/
| |-- dashboard.js
| |-- data.js
| `-- state.js
|-- .gitignore
|-- netlify.toml
|-- package.json
|-- README.md
`-- server.js
This project is configured for Netlify with:
- Static frontend from
public/ - Serverless API functions in
netlify/functions/ - Shared detection logic in
src/
Production URL: https://ddos-analysis-mitigation-dashboard.netlify.app
- Connect to real packet capture or CSV/PCAP data from Wireshark or
tcpdump - Persist attack sessions and reports in a database
- Add authentication and user-specific dashboards
- Export incident reports as PDF or CSV
- Add historical comparison charts and trend analytics
This project is licensed under the MIT License.