add web GUI — dark hacker interface with real-time SSE output, vector picker, report viewer
This commit is contained in:
drjones
260
gui/server.py
Normal file
260
gui/server.py
Normal file
@@ -0,0 +1,260 @@
|
||||
#!/usr/bin/env python3
|
||||
"""The Analyzer — Web GUI Server
|
||||
Run: python3 server.py [port]
|
||||
Opens a dark hacker-themed web interface at http://localhost:5000
|
||||
"""
|
||||
|
||||
import os
|
||||
import sys
|
||||
import json
|
||||
import time
|
||||
import queue
|
||||
import threading
|
||||
import subprocess
|
||||
from pathlib import Path
|
||||
from flask import Flask, render_template, request, jsonify, Response, send_from_directory, stream_with_context
|
||||
|
||||
# Paths
|
||||
HERE = Path(__file__).parent
|
||||
REPO = HERE.parent
|
||||
ANALYZER = REPO / "analyzer"
|
||||
REPORTS = REPO / "reports"
|
||||
VECTORS = REPO / "vectors"
|
||||
|
||||
app = Flask(__name__, template_folder=HERE / "templates", static_folder=HERE / "static")
|
||||
|
||||
# Active scan tracking
|
||||
active_scans = {}
|
||||
scan_history = []
|
||||
|
||||
# ─── Helpers ──────────────────────────────────────────────
|
||||
|
||||
def get_vectors():
|
||||
"""Return list of available vectors with metadata."""
|
||||
vectors = []
|
||||
for f in sorted(VECTORS.glob("*.sh")):
|
||||
num = f.stem.split("-")[0]
|
||||
name = "-".join(f.stem.split("-")[1:])
|
||||
desc = ""
|
||||
sev = ""
|
||||
with open(f) as fh:
|
||||
for line in fh:
|
||||
if line.startswith("# Desc:"):
|
||||
desc = line.replace("# Desc:", "").strip()
|
||||
if line.startswith("# Severity:"):
|
||||
sev = line.replace("# Severity:", "").strip()
|
||||
vectors.append({
|
||||
"num": int(num),
|
||||
"name": name,
|
||||
"file": f.name,
|
||||
"desc": desc,
|
||||
"severity": sev
|
||||
})
|
||||
return vectors
|
||||
|
||||
def get_reports():
|
||||
"""Return list of completed reports."""
|
||||
reports = []
|
||||
for f in sorted(REPORTS.glob("*.md"), reverse=True):
|
||||
if f.name.startswith("."):
|
||||
continue
|
||||
size = f.stat().st_size
|
||||
target = "Unknown"
|
||||
vulns = 0
|
||||
date = ""
|
||||
with open(f) as fh:
|
||||
for line in fh:
|
||||
if line.startswith("**Target:**"):
|
||||
target = line.replace("**Target:**", "").strip()
|
||||
if line.startswith("**Date:**"):
|
||||
date = line.replace("**Date:**", "").strip()
|
||||
if line.startswith("### "):
|
||||
vulns += 1
|
||||
html_path = f.with_suffix(".html")
|
||||
has_html = html_path.exists()
|
||||
reports.append({
|
||||
"file": f.name,
|
||||
"target": target,
|
||||
"date": date,
|
||||
"vulns": vulns,
|
||||
"size": size,
|
||||
"html": has_html
|
||||
})
|
||||
return reports
|
||||
|
||||
# ─── SSE Scan Runner ──────────────────────────────────────
|
||||
|
||||
class ScanRunner:
|
||||
"""Runs the analyzer and streams output via SSE."""
|
||||
|
||||
def __init__(self, target, mode, vectors=None):
|
||||
self.target = target
|
||||
self.mode = mode
|
||||
self.vectors = vectors
|
||||
self.q = queue.Queue()
|
||||
self.process = None
|
||||
self.done = False
|
||||
self.scan_id = str(int(time.time()))
|
||||
self.start_time = time.time()
|
||||
|
||||
def run(self):
|
||||
"""Run the scan in a thread, pushing output to queue."""
|
||||
try:
|
||||
env = os.environ.copy()
|
||||
env["OLLAMA_HOST"] = env.get("OLLAMA_HOST", "http://10.30.20.110:11434")
|
||||
env["OLLAMA_MODEL"] = env.get("OLLAMA_MODEL", "granite4.1:8b")
|
||||
env["TERM"] = "xterm"
|
||||
|
||||
cmd = ["bash", str(ANALYZER), self.target, self.mode]
|
||||
|
||||
self.process = subprocess.Popen(
|
||||
cmd,
|
||||
stdout=subprocess.PIPE,
|
||||
stderr=subprocess.STDOUT,
|
||||
env=env,
|
||||
text=True,
|
||||
bufsize=1,
|
||||
cwd=str(REPO)
|
||||
)
|
||||
|
||||
for line in iter(self.process.stdout.readline, ""):
|
||||
if line:
|
||||
self.q.put({"type": "output", "data": line.rstrip()})
|
||||
|
||||
self.process.wait()
|
||||
|
||||
# Find latest report
|
||||
latest_report = None
|
||||
reports = sorted(REPORTS.glob("*.md"), key=lambda x: x.stat().st_mtime, reverse=True)
|
||||
for r in reports:
|
||||
if not r.name.startswith("."):
|
||||
latest_report = r.name
|
||||
break
|
||||
|
||||
elapsed = time.time() - self.start_time
|
||||
self.q.put({
|
||||
"type": "complete",
|
||||
"data": {
|
||||
"exit_code": self.process.returncode,
|
||||
"elapsed": f"{elapsed:.1f}s",
|
||||
"report": latest_report
|
||||
}
|
||||
})
|
||||
|
||||
except Exception as e:
|
||||
self.q.put({"type": "error", "data": str(e)})
|
||||
finally:
|
||||
self.done = True
|
||||
|
||||
def stream(self):
|
||||
"""Generator for SSE streaming."""
|
||||
while not self.done or not self.q.empty():
|
||||
try:
|
||||
msg = self.q.get(timeout=0.5)
|
||||
yield f"data: {json.dumps(msg)}\n\n"
|
||||
except queue.Empty:
|
||||
yield ": keepalive\n\n"
|
||||
|
||||
# ─── Routes ───────────────────────────────────────────────
|
||||
|
||||
@app.route("/")
|
||||
def index():
|
||||
vectors = get_vectors()
|
||||
reports = get_reports()
|
||||
return render_template("index.html", vectors=vectors, reports=reports)
|
||||
|
||||
@app.route("/api/vectors")
|
||||
def api_vectors():
|
||||
return jsonify(get_vectors())
|
||||
|
||||
@app.route("/api/reports")
|
||||
def api_reports():
|
||||
return jsonify(get_reports())
|
||||
|
||||
@app.route("/api/scan", methods=["POST"])
|
||||
def start_scan():
|
||||
data = request.get_json()
|
||||
target = data.get("target", "").strip()
|
||||
mode = data.get("mode", "quick")
|
||||
vector_list = data.get("vectors", "")
|
||||
|
||||
if not target:
|
||||
return jsonify({"error": "Target URL required"}), 400
|
||||
|
||||
# Add https:// if missing
|
||||
if not target.startswith("http"):
|
||||
target = "https://" + target
|
||||
|
||||
runner = ScanRunner(target, mode, vector_list)
|
||||
scan_id = runner.scan_id
|
||||
active_scans[scan_id] = runner
|
||||
|
||||
thread = threading.Thread(target=runner.run, daemon=True)
|
||||
thread.start()
|
||||
|
||||
return jsonify({"scan_id": scan_id, "status": "started"})
|
||||
|
||||
@app.route("/api/scan/<scan_id>/stream")
|
||||
def scan_stream(scan_id):
|
||||
runner = active_scans.get(scan_id)
|
||||
if not runner:
|
||||
return jsonify({"error": "Scan not found"}), 404
|
||||
|
||||
return Response(
|
||||
stream_with_context(runner.stream()),
|
||||
mimetype="text/event-stream",
|
||||
headers={
|
||||
"Cache-Control": "no-cache",
|
||||
"Connection": "keep-alive",
|
||||
"X-Accel-Buffering": "no"
|
||||
}
|
||||
)
|
||||
|
||||
@app.route("/api/scan/<scan_id>/stop", methods=["POST"])
|
||||
def stop_scan(scan_id):
|
||||
runner = active_scans.get(scan_id)
|
||||
if runner and runner.process:
|
||||
runner.process.terminate()
|
||||
return jsonify({"status": "stopped"})
|
||||
return jsonify({"error": "Scan not found"}), 404
|
||||
|
||||
@app.route("/report/<filename>")
|
||||
def view_report(filename):
|
||||
md_path = REPORTS / filename
|
||||
html_path = md_path.with_suffix(".html")
|
||||
|
||||
if html_path.exists():
|
||||
return send_from_directory(str(REPORTS), html_path.name)
|
||||
|
||||
# Convert markdown to HTML on the fly
|
||||
if md_path.exists():
|
||||
content = md_path.read_text()
|
||||
import markdown
|
||||
html = markdown.markdown(content, extensions=["fenced_code", "tables"])
|
||||
return f"""<!DOCTYPE html><html><head>
|
||||
<meta charset="utf-8"><title>Analyzer Report</title>
|
||||
<style>body{{font-family:-apple-system,sans-serif;background:#0f172a;color:#e2e8f0;max-width:800px;margin:40px auto;padding:20px;line-height:1.6}}
|
||||
h1{{color:#f97316}} h2{{color:#f1f5f9;border-bottom:1px solid #334155;padding-bottom:8px}}
|
||||
a{{color:#22d3ee}} code{{background:#1e293b;padding:2px 6px;border-radius:4px;font-size:14px}}
|
||||
pre{{background:#1e293b;padding:16px;border-radius:8px;overflow-x:auto}}
|
||||
</style></head><body>{html}</body></html>"""
|
||||
|
||||
return "Report not found", 404
|
||||
|
||||
@app.route("/report/<filename>/raw")
|
||||
def raw_report(filename):
|
||||
md_path = REPORTS / filename
|
||||
if md_path.exists():
|
||||
return Response(md_path.read_text(), mimetype="text/plain")
|
||||
return "Not found", 404
|
||||
|
||||
# ─── Main ─────────────────────────────────────────────────
|
||||
|
||||
if __name__ == "__main__":
|
||||
port = int(sys.argv[1]) if len(sys.argv) > 1 else 5000
|
||||
print(f"\n ╔══════════════════════════════════════╗")
|
||||
print(f" ║ THE ANALYZER — Web Interface ║")
|
||||
print(f" ║ ║")
|
||||
print(f" ║ http://localhost:{port} ║")
|
||||
print(f" ╚══════════════════════════════════════╝\n")
|
||||
app.run(host="0.0.0.0", port=port, debug=False, threaded=True)
|
||||
683
gui/templates/index.html
Normal file
683
gui/templates/index.html
Normal file
@@ -0,0 +1,683 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>THE ANALYZER — Autonomous Security Engine</title>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700&family=Inter:wght@400;500;600;700&display=swap');
|
||||
|
||||
:root {
|
||||
--bg: #0a0e17;
|
||||
--surface: #111827;
|
||||
--surface2: #1e293b;
|
||||
--border: #1e293b;
|
||||
--text: #e2e8f0;
|
||||
--text-dim: #64748b;
|
||||
--accent: #f97316;
|
||||
--accent2: #22d3ee;
|
||||
--green: #22c55e;
|
||||
--red: #ef4444;
|
||||
--yellow: #eab308;
|
||||
--blue: #3b82f6;
|
||||
--purple: #a855f7;
|
||||
}
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ─── Sidebar ─── */
|
||||
.sidebar {
|
||||
width: 260px;
|
||||
background: var(--surface);
|
||||
border-right: 1px solid var(--border);
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
color: var(--accent);
|
||||
padding: 12px;
|
||||
background: var(--bg);
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--border);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logo span { color: var(--text-dim); font-weight: 400; }
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-dim);
|
||||
padding: 10px 12px;
|
||||
text-align: left;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
font-family: 'Inter', sans-serif;
|
||||
transition: all 0.15s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.nav-btn:hover { background: var(--surface2); color: var(--text); }
|
||||
.nav-btn.active { background: var(--surface2); color: var(--accent); }
|
||||
.nav-btn .icon { font-size: 16px; width: 20px; text-align: center; }
|
||||
|
||||
/* ─── Main ─── */
|
||||
.main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
padding: 16px 24px;
|
||||
background: var(--surface);
|
||||
border-bottom: 1px solid var(--border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.topbar h1 {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.status-dot.idle { background: var(--text-dim); }
|
||||
.status-dot.running { background: var(--green); animation: pulse 1.5s infinite; }
|
||||
.status-dot.error { background: var(--red); }
|
||||
.status-dot.done { background: var(--blue); }
|
||||
|
||||
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
padding: 24px;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
/* ─── Scan Panel ─── */
|
||||
.panel {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--text-dim);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.input-group input {
|
||||
flex: 1;
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
padding: 12px 16px;
|
||||
color: var(--text);
|
||||
font-size: 14px;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
outline: none;
|
||||
transition: border 0.15s;
|
||||
}
|
||||
|
||||
.input-group input:focus { border-color: var(--accent); }
|
||||
.input-group input::placeholder { color: var(--text-dim); }
|
||||
|
||||
.mode-selector {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.mode-btn {
|
||||
flex: 1;
|
||||
padding: 8px 16px;
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
color: var(--text-dim);
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
font-family: 'Inter', sans-serif;
|
||||
transition: all 0.15s;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mode-btn:hover { border-color: var(--accent2); color: var(--text); }
|
||||
.mode-btn.active { border-color: var(--accent); color: var(--accent); background: rgba(249,115,22,0.1); }
|
||||
|
||||
.btn-primary {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
background: linear-gradient(135deg, var(--accent), #ea580c);
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 20px rgba(249,115,22,0.3); }
|
||||
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
|
||||
.btn-danger { background: var(--red); }
|
||||
.btn-danger:hover { box-shadow: 0 4px 20px rgba(239,68,68,0.3); }
|
||||
|
||||
/* ─── Output Terminal ─── */
|
||||
.terminal {
|
||||
background: #000;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.terminal-header {
|
||||
padding: 10px 16px;
|
||||
background: #0a0a0a;
|
||||
border-bottom: 1px solid #1a1a1a;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.terminal-header span { color: var(--text-dim); font-size: 12px; }
|
||||
.terminal-dots { display: flex; gap: 6px; }
|
||||
.terminal-dot { width: 10px; height: 10px; border-radius: 50%; }
|
||||
.terminal-dot.r { background: #ff5f56; }
|
||||
.terminal-dot.y { background: #ffbd2e; }
|
||||
.terminal-dot.g { background: #27c93f; }
|
||||
|
||||
.terminal-body {
|
||||
padding: 16px;
|
||||
height: 350px;
|
||||
overflow-y: auto;
|
||||
color: #a8b2c1;
|
||||
}
|
||||
|
||||
.terminal-body::-webkit-scrollbar { width: 6px; }
|
||||
.terminal-body::-webkit-scrollbar-track { background: #000; }
|
||||
.terminal-body::-webkit-scrollbar-thumb { background: #1a1a1a; border-radius: 3px; }
|
||||
|
||||
.terminal-line { white-space: pre-wrap; word-break: break-all; margin-bottom: 2px; }
|
||||
.terminal-line .find { color: var(--red); font-weight: 600; }
|
||||
.terminal-line .ok { color: var(--green); }
|
||||
.terminal-line .info { color: var(--blue); }
|
||||
.terminal-line .warn { color: var(--yellow); }
|
||||
.terminal-line .brain { color: var(--purple); }
|
||||
.terminal-line .dim { color: var(--text-dim); }
|
||||
.terminal-line .accent { color: var(--accent); }
|
||||
|
||||
/* ─── Vector Grid ─── */
|
||||
.vector-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.vector-card {
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.vector-card:hover { border-color: var(--accent2); }
|
||||
.vector-card.selected { border-color: var(--accent); background: rgba(249,115,22,0.08); }
|
||||
|
||||
.vector-card .num {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 11px;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.vector-card .name {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
.vector-card .sev {
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.sev-critical { color: var(--red); }
|
||||
.sev-high { color: var(--accent); }
|
||||
.sev-medium { color: var(--yellow); }
|
||||
.sev-low { color: var(--blue); }
|
||||
|
||||
/* ─── Report List ─── */
|
||||
.report-list { display: flex; flex-direction: column; gap: 8px; }
|
||||
|
||||
.report-item {
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
padding: 14px 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.report-item:hover { border-color: var(--accent2); }
|
||||
.report-item .target { font-weight: 500; font-size: 14px; }
|
||||
.report-item .meta { font-size: 12px; color: var(--text-dim); }
|
||||
.report-item .vulns { font-family: 'JetBrains Mono', monospace; font-weight: 600; }
|
||||
.report-item .vulns.found { color: var(--red); }
|
||||
.report-item .vulns.none { color: var(--green); }
|
||||
|
||||
.hidden { display: none !important; }
|
||||
|
||||
/* ─── Responsive ─── */
|
||||
@media (max-width: 768px) {
|
||||
.sidebar { width: 60px; padding: 12px 8px; }
|
||||
.sidebar .logo { font-size: 10px; padding: 8px; }
|
||||
.sidebar .nav-btn span { display: none; }
|
||||
.main { padding: 0; }
|
||||
.content { padding: 16px; }
|
||||
.input-group { flex-direction: column; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- ─── Sidebar ─── -->
|
||||
<div class="sidebar">
|
||||
<div class="logo">
|
||||
ANALYZER<br>
|
||||
<span>v2.0</span>
|
||||
</div>
|
||||
<div class="nav">
|
||||
<button class="nav-btn active" onclick="showPanel('scan')">
|
||||
<span class="icon">⚡</span> <span>Scan</span>
|
||||
</button>
|
||||
<button class="nav-btn" onclick="showPanel('vectors')">
|
||||
<span class="icon">🎯</span> <span>Vectors</span>
|
||||
</button>
|
||||
<button class="nav-btn" onclick="showPanel('reports')">
|
||||
<span class="icon">📄</span> <span>Reports</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ─── Main ─── -->
|
||||
<div class="main">
|
||||
<div class="topbar">
|
||||
<h1><span class="status-dot idle" id="statusDot"></span><span id="statusText">Ready</span></h1>
|
||||
<div style="display:flex;gap:8px;align-items:center;">
|
||||
<span style="font-size:12px;color:var(--text-dim)" id="timer">00:00</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
|
||||
<!-- ═══ SCAN PANEL ═══ -->
|
||||
<div id="panel-scan" class="">
|
||||
<div class="panel">
|
||||
<div class="panel-title">New Scan</div>
|
||||
<div class="input-group">
|
||||
<input type="text" id="targetInput" placeholder="https://target.com" spellcheck="false">
|
||||
</div>
|
||||
<div class="mode-selector">
|
||||
<button class="mode-btn active" data-mode="quick" onclick="setMode(this)">⚡ Quick</button>
|
||||
<button class="mode-btn" data-mode="deep" onclick="setMode(this)">🔍 Deep</button>
|
||||
<button class="mode-btn" data-mode="custom" onclick="setMode(this)">🎯 Custom</button>
|
||||
</div>
|
||||
<button class="btn-primary" id="scanBtn" onclick="startScan()">▶ Launch Scan</button>
|
||||
<button class="btn-primary btn-danger hidden" id="stopBtn" onclick="stopScan()">■ Stop</button>
|
||||
</div>
|
||||
|
||||
<!-- Custom vector selector (hidden by default) -->
|
||||
<div class="panel hidden" id="vectorSelector">
|
||||
<div class="panel-title">Select Vectors</div>
|
||||
<div class="vector-grid" id="vectorGrid"></div>
|
||||
</div>
|
||||
|
||||
<!-- Terminal Output -->
|
||||
<div class="terminal hidden" id="terminal">
|
||||
<div class="terminal-header">
|
||||
<div class="terminal-dots">
|
||||
<div class="terminal-dot r"></div>
|
||||
<div class="terminal-dot y"></div>
|
||||
<div class="terminal-dot g"></div>
|
||||
</div>
|
||||
<span>analyzer@kali:~$</span>
|
||||
</div>
|
||||
<div class="terminal-body" id="terminalBody"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ═══ VECTORS PANEL ═══ -->
|
||||
<div id="panel-vectors" class="hidden">
|
||||
<div class="panel">
|
||||
<div class="panel-title">Attack Vectors — 21 Total</div>
|
||||
<div class="vector-grid" id="vectorGridFull"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ═══ REPORTS PANEL ═══ -->
|
||||
<div id="panel-reports" class="hidden">
|
||||
<div class="panel">
|
||||
<div class="panel-title">Scan Reports</div>
|
||||
<div class="report-list" id="reportList"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// ─── State ───
|
||||
let currentMode = 'quick';
|
||||
let selectedVectors = [];
|
||||
let currentScanId = null;
|
||||
|
||||
// ─── Panel Navigation ───
|
||||
function showPanel(name) {
|
||||
document.querySelectorAll('.content > div').forEach(d => d.classList.add('hidden'));
|
||||
document.getElementById('panel-' + name).classList.remove('hidden');
|
||||
document.querySelectorAll('.nav-btn').forEach(b => b.classList.remove('active'));
|
||||
event.target.closest('.nav-btn').classList.add('active');
|
||||
}
|
||||
|
||||
// ─── Mode Selection ───
|
||||
function setMode(btn) {
|
||||
document.querySelectorAll('.mode-btn').forEach(b => b.classList.remove('active'));
|
||||
btn.classList.add('active');
|
||||
currentMode = btn.dataset.mode;
|
||||
|
||||
const vecSel = document.getElementById('vectorSelector');
|
||||
if (currentMode === 'custom') {
|
||||
vecSel.classList.remove('hidden');
|
||||
loadVectorSelector();
|
||||
} else {
|
||||
vecSel.classList.add('hidden');
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Vector Selector ───
|
||||
async function loadVectorSelector() {
|
||||
const res = await fetch('/api/vectors');
|
||||
const vectors = await res.json();
|
||||
const grid = document.getElementById('vectorGrid');
|
||||
grid.innerHTML = '';
|
||||
|
||||
vectors.forEach(v => {
|
||||
const card = document.createElement('div');
|
||||
card.className = 'vector-card' + (selectedVectors.includes(v.num) ? ' selected' : '');
|
||||
card.innerHTML = `
|
||||
<div class="num">#${String(v.num).padStart(2,'0')}</div>
|
||||
<div class="name">${v.name}</div>
|
||||
<div class="sev sev-${v.severity.toLowerCase()}">${v.severity}</div>
|
||||
`;
|
||||
card.onclick = () => {
|
||||
const idx = selectedVectors.indexOf(v.num);
|
||||
if (idx >= 0) selectedVectors.splice(idx, 1);
|
||||
else selectedVectors.push(v.num);
|
||||
card.classList.toggle('selected');
|
||||
};
|
||||
grid.appendChild(card);
|
||||
});
|
||||
}
|
||||
|
||||
// ─── Vectors Full List ───
|
||||
async function loadVectorsFull() {
|
||||
const res = await fetch('/api/vectors');
|
||||
const vectors = await res.json();
|
||||
const grid = document.getElementById('vectorGridFull');
|
||||
if (grid.children.length > 0) return; // already loaded
|
||||
grid.innerHTML = '';
|
||||
|
||||
vectors.forEach(v => {
|
||||
const card = document.createElement('div');
|
||||
card.className = 'vector-card';
|
||||
card.innerHTML = `
|
||||
<div class="num">#${String(v.num).padStart(2,'0')}</div>
|
||||
<div class="name">${v.name}</div>
|
||||
<div class="sev sev-${v.severity.toLowerCase()}">${v.severity}</div>
|
||||
<div style="font-size:11px;color:var(--text-dim);margin-top:4px;">${v.desc}</div>
|
||||
`;
|
||||
grid.appendChild(card);
|
||||
});
|
||||
}
|
||||
|
||||
// ─── Reports List ───
|
||||
async function loadReports() {
|
||||
const res = await fetch('/api/reports');
|
||||
const reports = await res.json();
|
||||
const list = document.getElementById('reportList');
|
||||
list.innerHTML = '';
|
||||
|
||||
if (reports.length === 0) {
|
||||
list.innerHTML = '<div style="text-align:center;padding:40px;color:var(--text-dim)">No reports yet. Run a scan!</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
reports.forEach(r => {
|
||||
const item = document.createElement('div');
|
||||
item.className = 'report-item';
|
||||
const vulnClass = r.vulns > 0 ? 'found' : 'none';
|
||||
item.innerHTML = `
|
||||
<div>
|
||||
<div class="target">${r.target}</div>
|
||||
<div class="meta">${r.date} · ${(r.size/1024).toFixed(1)} KB</div>
|
||||
</div>
|
||||
<div class="vulns ${vulnClass}">${r.vulns > 0 ? '⚠ ' + r.vulns : '✅ 0'} vulns</div>
|
||||
`;
|
||||
item.onclick = () => window.open('/report/' + r.file, '_blank');
|
||||
list.appendChild(item);
|
||||
});
|
||||
}
|
||||
|
||||
// ─── Terminal output ───
|
||||
function escapeHtml(str) {
|
||||
const div = document.createElement('div');
|
||||
div.appendChild(document.createTextNode(str));
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
function appendTerminal(text) {
|
||||
const body = document.getElementById('terminalBody');
|
||||
const line = document.createElement('div');
|
||||
line.className = 'terminal-line';
|
||||
|
||||
// Sanitize then colorize
|
||||
const safe = escapeHtml(text);
|
||||
const html = safe
|
||||
.replace(/💥.*/g, m => `<span class="find">${m}</span>`)
|
||||
.replace(/✅.*/g, m => `<span class="ok">${m}</span>`)
|
||||
.replace(/ℹ️.*/g, m => `<span class="info">${m}</span>`)
|
||||
.replace(/⚠️.*/g, m => `<span class="warn">${m}</span>`)
|
||||
.replace(/🧠.*/g, m => `<span class="brain">${m}</span>`)
|
||||
.replace(/➜.*/g, m => `<span class="dim">${m}</span>`)
|
||||
.replace(/🎯.*/g, m => `<span class="accent">${m}</span>`)
|
||||
.replace(/❌.*/g, m => `<span class="find">${m}</span>`);
|
||||
|
||||
line.innerHTML = html;
|
||||
body.appendChild(line);
|
||||
body.scrollTop = body.scrollHeight;
|
||||
}
|
||||
|
||||
// ─── Timer ───
|
||||
let timerInterval = null;
|
||||
function startTimer() {
|
||||
const start = Date.now();
|
||||
timerInterval = setInterval(() => {
|
||||
const elapsed = Math.floor((Date.now() - start) / 1000);
|
||||
const m = String(Math.floor(elapsed / 60)).padStart(2, '0');
|
||||
const s = String(elapsed % 60).padStart(2, '0');
|
||||
document.getElementById('timer').textContent = `${m}:${s}`;
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
function stopTimer() {
|
||||
if (timerInterval) clearInterval(timerInterval);
|
||||
}
|
||||
|
||||
// ─── Scan ───
|
||||
async function startScan() {
|
||||
const target = document.getElementById('targetInput').value.trim();
|
||||
if (!target) {
|
||||
alert('Enter a target URL');
|
||||
return;
|
||||
}
|
||||
|
||||
// Show terminal
|
||||
document.getElementById('terminal').classList.remove('hidden');
|
||||
document.getElementById('terminalBody').innerHTML = '';
|
||||
document.getElementById('scanBtn').classList.add('hidden');
|
||||
document.getElementById('stopBtn').classList.remove('hidden');
|
||||
|
||||
// Status
|
||||
document.getElementById('statusDot').className = 'status-dot running';
|
||||
document.getElementById('statusText').textContent = 'Scanning...';
|
||||
startTimer();
|
||||
|
||||
const payload = {
|
||||
target: target,
|
||||
mode: currentMode,
|
||||
vectors: selectedVectors.join(',')
|
||||
};
|
||||
|
||||
appendTerminal('🎯 Target: ' + target);
|
||||
appendTerminal('⚡ Mode: ' + currentMode);
|
||||
appendTerminal('───────────────');
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/scan', {
|
||||
method: 'POST',
|
||||
headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify(payload)
|
||||
});
|
||||
const data = await res.json();
|
||||
currentScanId = data.scan_id;
|
||||
|
||||
// Connect to SSE stream
|
||||
const evtSource = new EventSource(`/api/scan/${data.scan_id}/stream`);
|
||||
|
||||
evtSource.onmessage = (event) => {
|
||||
const msg = JSON.parse(event.data);
|
||||
|
||||
if (msg.type === 'output') {
|
||||
appendTerminal(msg.data);
|
||||
} else if (msg.type === 'complete') {
|
||||
evtSource.close();
|
||||
finishScan(msg.data);
|
||||
} else if (msg.type === 'error') {
|
||||
appendTerminal('❌ ' + msg.data);
|
||||
evtSource.close();
|
||||
finishScan({exit_code: -1});
|
||||
}
|
||||
};
|
||||
|
||||
evtSource.onerror = () => {
|
||||
evtSource.close();
|
||||
appendTerminal('⚠️ Connection lost. Scan may still be running.');
|
||||
};
|
||||
|
||||
} catch (e) {
|
||||
appendTerminal('❌ Failed to start scan: ' + e.message);
|
||||
finishScan({});
|
||||
}
|
||||
}
|
||||
|
||||
function finishScan(data) {
|
||||
stopTimer();
|
||||
document.getElementById('statusDot').className = data.exit_code === 0 ? 'status-dot done' : 'status-dot error';
|
||||
document.getElementById('statusText').textContent = data.exit_code === 0 ? 'Complete' : 'Failed';
|
||||
document.getElementById('scanBtn').classList.remove('hidden');
|
||||
document.getElementById('stopBtn').classList.add('hidden');
|
||||
|
||||
if (data.report) {
|
||||
appendTerminal('');
|
||||
appendTerminal('📄 Report: /report/' + data.report);
|
||||
appendTerminal('✨ Scan complete in ' + (data.elapsed || '?'));
|
||||
} else if (data.exit_code === 0) {
|
||||
appendTerminal('✨ Scan complete');
|
||||
}
|
||||
|
||||
loadReports();
|
||||
}
|
||||
|
||||
async function stopScan() {
|
||||
if (!currentScanId) return;
|
||||
await fetch(`/api/scan/${currentScanId}/stop`, {method: 'POST'});
|
||||
appendTerminal('⏹️ Scan stopped by user');
|
||||
finishScan({exit_code: -1});
|
||||
}
|
||||
|
||||
// ─── Init ───
|
||||
loadVectorSelector();
|
||||
document.querySelector('[onclick*="vectors"]').onclick = () => { showPanel('vectors'); loadVectorsFull(); };
|
||||
document.querySelector('[onclick*="reports"]').onclick = () => { showPanel('reports'); loadReports(); };
|
||||
|
||||
// Enter key starts scan
|
||||
document.getElementById('targetInput').addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Enter') startScan();
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user