HTTP Proxy Dashboard

An HTTP/HTTPS proxy server with a real-time web dashboard for capturing, visualizing, and analyzing network traffic.

Features

• HTTP/HTTPS Proxy: Intercepts and forwards HTTP and HTTPS traffic
• Real-time Dashboard: Web-based UI for monitoring captured traffic
• Traffic Analysis: Visualize request patterns, methods, status codes, and data transfer
• Filtering & Search: Filter packets by method, status code, URL pattern, or search content
• Export Capabilities: Export captured traffic in JSON or HAR format
• Capture Control: Start/stop traffic capture on demand
• Memory Management: Automatic LRU eviction with configurable limits (default: 10,000 packets)

Architecture

The system consists of three main components:

1. Proxy Server (Port 8080): Intercepts HTTP/HTTPS traffic and forwards requests
2. WebSocket Server (Port 8081): Provides real-time communication with the dashboard
3. Web Dashboard (Port 3000): React-based UI for visualization and control

Prerequisites

• Node.js v18 or higher
• npm or yarn package manager

Installation

1. Clone the repository:

git clone <repository-url>
cd http-proxy-dashboard

2. Install backend dependencies:

npm install

3. Install dashboard dependencies:

cd src/dashboard
npm install
cd ../..

4. Build the TypeScript backend:

npm run build

Usage

Starting the Servers

Option 1: Production Mode

1. Start the proxy and WebSocket servers:

npm run start:proxy

2. In a separate terminal, start the dashboard:

npm run start:dashboard

Option 2: Development Mode

1. Start the proxy server in development mode (with auto-reload):

npm run dev:proxy

2. In a separate terminal, start the dashboard:

npm run start:dashboard

Accessing the Dashboard

Once both servers are running, open your browser and navigate to:

http://localhost:3000

Configuring Applications to Use the Proxy

Configure your application or browser to use the proxy server:

• Proxy Host: 127.0.0.1
• Proxy Port: 8080

Example: Using with curl

curl -x http://127.0.0.1:8080 http://example.com

Example: Using with Node.js

const http = require('http');

const options = {
  host: 'example.com',
  port: 80,
  path: '/',
  method: 'GET',
  headers: {
    'Host': 'example.com'
  },
  // Configure proxy
  agent: new http.Agent({
    proxy: {
      host: '127.0.0.1',
      port: 8080
    }
  })
};

Example: Browser Configuration

For Chrome/Chromium:

google-chrome --proxy-server="http://127.0.0.1:8080"

For Firefox:

1. Go to Settings → Network Settings
2. Select "Manual proxy configuration"
3. HTTP Proxy: 127.0.0.1, Port: 8080
4. Check "Use this proxy server for all protocols"

Dashboard Features

Header Controls

• Connection Status: Shows proxy server connection state
• Start/Stop Capture: Control whether traffic is being recorded
• Clear Packets: Remove all captured packets from storage

Filter Bar

• HTTP Method Filter: Filter by GET, POST, PUT, DELETE, etc.
• Status Code Filter: Filter by response status codes (2xx, 3xx, 4xx, 5xx)
• URL Pattern: Filter using regex patterns
• Search: Search across URLs, headers, and body content

Packet List

• View all captured HTTP packets in real-time
• Click on any packet to view detailed information
• Shows: Method, URL, Status Code, Timestamp, Size, Duration

Packet Details

• Full request and response information
• Headers and body content
• JSON/XML syntax highlighting
• Copy-to-clipboard functionality

Statistics Panel

• Request Timeline: Visualize request count over time
• Method Distribution: Breakdown of HTTP methods used
• Status Code Distribution: Response status code analysis
• Data Transfer: Total bytes sent and received

Export

• Export to JSON: Export captured packets in JSON format
• Export to HAR: Export in HTTP Archive (HAR) 1.2 format for use with other tools

Configuration

Edit src/config.ts to customize server settings:

export const config = {
  proxy: {
    port: 8080,              // Proxy server port
    host: '127.0.0.1',       // Proxy server host
    enableCapture: true,     // Start with capture enabled
  },
  websocket: {
    port: 8081,              // WebSocket server port
    host: '127.0.0.1',       // WebSocket server host
  },
  dashboard: {
    port: 3000,              // Dashboard port
  },
  storage: {
    maxPackets: 10000,       // Maximum packets to store
  },
};

Testing

Run the test suite:

npm test

Run tests in watch mode:

npm test:watch

Project Structure

project/
├── src/
│   ├── config.ts              # Configuration settings
│   ├── index.ts               # Main entry point
│   ├── types.ts               # TypeScript type definitions
│   ├── proxy/
│   │   ├── server.ts          # Proxy server implementation
│   │   └── server.test.ts     # Proxy server tests
│   ├── storage/
│   │   ├── packet-storage.ts  # Packet storage implementation
│   │   ├── packet-storage.test.ts
│   │   ├── statistics.ts      # Statistics calculation
│   │   └── statistics.test.ts
│   ├── websocket/
│   │   ├── server.ts          # WebSocket server implementation
│   │   └── server.test.ts     # WebSocket server tests
│   ├── export/
│   │   ├── json-exporter.ts   # JSON export functionality
│   │   ├── json-exporter.test.ts
│   │   ├── har-exporter.ts    # HAR export functionality
│   │   ├── har-exporter.test.ts
│   │   └── download-utility.ts
│   └── dashboard/             # React dashboard application
│       ├── src/
│       │   ├── App.tsx        # Main app component
│       │   ├── components/    # React components
│       │   ├── context/       # React context for state
│       │   └── services/      # WebSocket client & export
│       └── package.json
├── package.json
├── tsconfig.json
└── README.md

Requirements Coverage

This implementation satisfies the following requirements:

• Requirement 1: HTTP proxy configuration and operation
• Requirement 2: Real-time packet list display
• Requirement 3: Detailed packet inspection
• Requirement 4: Packet filtering capabilities
• Requirement 5: Content search functionality
• Requirement 6: Traffic statistics visualization
• Requirement 7: Capture control
• Requirement 8: Data export (JSON and HAR)
• Requirement 9: HTTPS tunnel support

Troubleshooting

Proxy server won't start

• Check if port 8080 is already in use: lsof -i :8080 (macOS/Linux) or netstat -ano | findstr :8080 (Windows)
• Change the port in src/config.ts if needed

Dashboard can't connect to WebSocket

• Ensure the proxy server is running first
• Check if port 8081 is available
• Verify the WebSocket URL in the dashboard matches the configuration

No packets appearing in dashboard

• Verify capture is enabled (green indicator in header)
• Ensure your application is configured to use the proxy
• Check the browser console for errors

Memory issues with large traffic

• Reduce maxPackets in src/config.ts
• Clear packets regularly using the "Clear Packets" button
• Filter packets to reduce the displayed set

Security Considerations

⚠️ Important Security Notes:

• This tool is designed for local development and debugging only
• The dashboard has no authentication - only bind to localhost
• Captured traffic may contain sensitive data (passwords, tokens, etc.)
• All data is stored in memory only and cleared on restart
• HTTPS traffic is tunneled only - encrypted payloads are not decrypted

License

MIT

Contributing

Contributions are welcome! Please feel free to submit issues or pull requests.