DNS Route Visualizer is an interactive network protocol visualization tool designed to demystify the complete journey of a web request. It provides a real-time, animated breakdown of how a domain name is resolved into an IP address, followed by the establishment of a secure connection.
Unlike standard traceroute tools, this application visualizes the full TCP/IP and Application layer stack, including the DNS recursion process, TCP 3-way handshake, and the modern TLS 1.3 key exchange. It is designed for educational purposes and security auditing, offering a "Master's Level" view of web infrastructure.
Visualizes the iterative DNS query process step-by-step:
- Stub & Resolver: Local cache and ISP recursion.
- Root (.): The 13 global root server clusters.
- TLD (.com, .org): Top-Level Domain registries.
- Authoritative: The final source of truth for the domain's IP.
A terminal-style log interface that displays simulated packet-level events as they occur:
- DNS: Recursive queries and UDP transmission.
- TCP: SYN -> SYN/ACK -> ACK handshake.
- TLS 1.3: ClientHello, ServerHello, Certificate Exchange, and Handshake Encryption.
- HTTP/2: Stream multiplexing and frame delivery.
Leverages Google's Gemini models (via Cloudflare Workers) to generate a real-time, technical security assessment of the target domain. The audit focuses on:
- Theoretical TLS Stack Analysis (Forward Secrecy, Cipher Suites).
- DNSSEC and Route Propagation resilience.
- Certificate Hierarchy validation.
- X.509 Certificate Chain: Displays issuer details, validity periods, and encryption protocols (e.g., AES_256_GCM).
- Header Hardening: Analyzes response headers for security best practices (HSTS, CSP, X-Frame-Options).
- Frontend: React, TypeScript, Tailwind CSS
- Edge Computing: Cloudflare Workers
- AI Intelligence: Google Gemini API (
gemini-3-flash-preview) - Data Source: DNS over HTTPS (DoH) via Cloudflare and Google
-
Install Dependencies
npm install
-
Configure Secrets To enable the AI audit feature, you need a Google Gemini API key stored in your Cloudflare Worker secrets.
npx wrangler secret put GEMINI_API_KEY
-
Run Locally
npm start
-
Deploy
npm run deploy