Nmap Real-time Visualization System

This project provides a real-time visualization system for nmap scans, allowing users to see scan progress, discovered ports, and vulnerabilities as they are found. The system uses a modern stack with FastAPI for the backend and Svelte for the frontend, connected via WebSockets for real-time updates.

Architecture

The project is divided into two main components:

Backend (FastAPI)

The backend is built with FastAPI and provides:

• REST API endpoints for starting, stopping, and retrieving nmap scans
• WebSocket endpoints for real-time scan updates
• Nmap execution and output parsing
• Progress tracking

Frontend (Svelte)

The frontend is built with Svelte and provides:

• A clean, modern UI for interacting with nmap
• Real-time visualization of scan progress
• Terminal emulation for viewing raw nmap output
• Structured display of discovered ports and vulnerabilities

Project Structure

├── backend/
│   └── app/
│       ├── api/
│       │   └── routes/
│       │       ├── health.py
│       │       ├── nmap.py
│       │       └── websocket.py
│       ├── core/
│       │   ├── config.py
│       │   └── ...
│       ├── models/
│       │   ├── nmap.py
│       │   └── ...
│       ├── services/
│       │   ├── nmap_service.py
│       │   └── ...
│       ├── utils/
│       │   └── ...
│       └── main.py
│
├── frontend/
│   ├── public/
│   │   └── ...
│   ├── src/
│   │   ├── lib/
│   │   │   ├── components/
│   │   │   │   ├── Terminal.svelte
│   │   │   │   └── ScanProgress.svelte
│   │   │   └── WebSocketManager.ts
│   │   ├── App.svelte
│   │   └── main.ts
│   ├── index.html
│   ├── vite.config.js
│   └── ...
│
└── requirements.txt

Features

• Real-time nmap scan progress visualization
• Terminal emulation with syntax highlighting
• WebSocket-based real-time updates
• Structured display of discovered ports and vulnerabilities
• Various scan types support (basic, quick, full, vulnerability, custom)

How It Works

1. The user selects a scan type and target in the frontend
2. The backend executes nmap as a subprocess with the specified parameters
3. The backend parses the nmap output line-by-line in real-time
4. Updates are sent to the frontend via WebSockets
5. The frontend displays the updates in a terminal-like interface and structured UI components

Implementation Details

Backend

• Uses asyncio and subprocess for non-blocking nmap execution
• Parses nmap output with regex patterns to extract structured information
• Provides both REST and WebSocket endpoints
• Stateless design with file-based progress tracking

Frontend

• Uses Svelte stores for reactive state management
• XTerm.js for terminal emulation
• WebSocket connection with automatic reconnection
• Responsive UI with clear visualization of scan progress

Future Enhancements

• Scan history and result comparison
• Network topology visualization
• Vulnerability database integration
• Multiple concurrent scans
• Scan scheduling and automation

Security Considerations

This tool is intended for educational purposes and legitimate security testing only. The backend implements restrictions to ensure nmap can only be used on authorized targets.