Add deauth detection, Alerts tab, Search tab, node detail cards, UI improvements

This commit is contained in:
bot
2026-04-04 12:47:43 +03:00
parent fbf5b5c738
commit 5c0ec8cc5a
7 changed files with 668 additions and 43 deletions
+37 -11
View File
@@ -2,17 +2,26 @@
## What this is ## What this is
A distributed WiFi reconnaissance system using ESP32-S3 nodes and an Orange Pi as coordinator. A distributed WiFi reconnaissance system using ESP32-S3 nodes and an Orange Pi as coordinator. The goal is passive RF awareness — mapping what is happening in the surrounding WiFi environment without transmitting or interacting with any networks.
Each ESP32 node scans the WiFi environment, builds structured events (not raw data), and ships them over UDP to a coordinator. The coordinator stores events to SQLite. A separate web dashboard reads the database and displays everything in real time via SSE. Each ESP32 node scans the WiFi environment, builds structured events (not raw data), and ships them over UDP to a coordinator. The coordinator stores events to SQLite. A separate web dashboard reads the database and displays everything in real time via SSE.
The system is designed around a clear separation of concerns: nodes are dumb sensors, the Orange Pi does all storage and analysis, the browser does all rendering. No logic lives on the nodes beyond capturing and formatting events.
Practical use cases this has already demonstrated:
- Mapping every network and client device in a city-center apartment building
- Detecting sustained deauth flood attacks targeting specific devices (confirmed live)
- Reconstructing device travel history from probe request SSID lists
- Identifying device types by OUI (phones, IoT devices, laptops, cars, smart home hardware)
- Correlating attack victims across multiple impersonated APs using deauth dst MAC
This is a learning/research project covering distributed systems, event-driven architecture, sensor fusion, and detection engineering concepts. This is a learning/research project covering distributed systems, event-driven architecture, sensor fusion, and detection engineering concepts.
--- ---
## Hardware ## Hardware
- **Nodes:** ESP32-S3 N16R8 (2 active, scaling later) - **Nodes:** ESP32-S3 N16R8 (3 active, scattered across apartment)
- **Coordinator:** Orange Pi at `192.168.1.133`, runs 24/7 as systemd services - **Coordinator:** Orange Pi at `192.168.1.133`, runs 24/7 as systemd services
- **Dev machine:** This PC at `192.168.1.101` — coding and flashing only - **Dev machine:** This PC at `192.168.1.101` — coding and flashing only
- **Flashing:** Arduino CLI on this PC - **Flashing:** Arduino CLI on this PC
@@ -207,14 +216,15 @@ The same binary works on every node — `node_id` is auto-derived from the MAC,
### config.h reference ### config.h reference
| Constant | Default | Purpose | | Constant | Default | Purpose |
|-------------------|------------------|-------------------------------------------| |--------------------|------------------|-------------------------------------------|
| `WIFI_SSID` | `sandbox` | WiFi network to connect to | | `WIFI_SSID` | `sandbox` | WiFi network to connect to |
| `COORDINATOR_IP` | `192.168.1.133` | Orange Pi address | | `COORDINATOR_IP` | `192.168.1.133` | Orange Pi address |
| `COORDINATOR_PORT`| `5005` | UDP port | | `COORDINATOR_PORT` | `5005` | UDP port |
| `SCAN_INTERVAL_MS`| `15000` | How often to run a beacon scan (ms) | | `SCAN_INTERVAL_MS` | `15000` | How often to run a beacon scan (ms) |
| `PROBE_SNIFF` | `1` | Enable/disable probe sniffing (1/0) | | `PROBE_SNIFF` | `1` | Enable/disable probe sniffing (1/0) |
| `PROBE_DEDUP_SECS`| `30` | Suppress duplicate probe MAC+SSID (secs) | | `PROBE_DEDUP_SECS` | `30` | Suppress duplicate probe MAC+SSID (secs) |
| `PROBE_QUEUE_SIZE`| `32` | Max probe events buffered between scans | | `PROBE_QUEUE_SIZE` | `32` | Max probe events buffered between scans |
| `DEAUTH_QUEUE_SIZE`| `32` | Max deauth/disassoc events buffered |
--- ---
@@ -249,20 +259,32 @@ Open `http://192.168.1.133:8080` in your browser.
- **RSSI history chart** — opens from any Networks row. Shows signal strength over time per node (1h / 2h / 6h / 24h selectable). Each node gets its own coloured line. Useful for spotting interference patterns, seeing how signal fluctuates by time of day, and comparing which node consistently hears a given AP better. Updates live as new scans arrive. - **RSSI history chart** — opens from any Networks row. Shows signal strength over time per node (1h / 2h / 6h / 24h selectable). Each node gets its own coloured line. Useful for spotting interference patterns, seeing how signal fluctuates by time of day, and comparing which node consistently hears a given AP better. Updates live as new scans arrive.
- **Cross-node** — side-by-side per-node RSSI for every AP. Shows which node is physically closer to each network. Filter to multi-node only to focus on confirmed cross-node observations. - **Cross-node** — side-by-side per-node RSSI for every AP. Shows which node is physically closer to each network. Filter to multi-node only to focus on confirmed cross-node observations.
- **Clients** — probe request data: unique MACs, vendor (OUI lookup), what SSIDs they're searching for, signal, which nodes saw them. - **Clients** — probe request data: unique MACs, vendor (OUI lookup), what SSIDs they're searching for, signal, which nodes saw them.
- **Alerts** — deauth/disassoc frame detection with two sections: - **Alerts** — deauth/disassoc frame detection with four sections:
- *Detected Bursts* — fires when ≥10 deauth or disassoc frames are seen for the same BSSID within a 5-minute window. Highlighted red when confirmed by 2+ nodes (high confidence, source is physically nearby). Burst rows include BSSID, SSID, frame count, unique source MACs, and node count. - *1h Summary strip* — total frames, deauth vs disassoc counts, unique BSSIDs and sources in the last hour
- *Raw Feed* — last 100 deauth/disassoc events with src, dst, BSSID, reason code, and RSSI. Useful for inspecting specific events. `dst = FF:FF:FF:FF:FF:FF` (broadcast deauth) is a classic attack tool signature. - *Most Impersonated Networks* — APs whose BSSID is being spoofed as the deauth source, ranked by frame count
- *Most Targeted Devices* — actual victim devices (by `dst` MAC), ranked by frames received across all impersonated APs
- *Detected Bursts* — fires when ≥10 frames for the same BSSID within 5 minutes. Highlighted red when confirmed by 2+ nodes. Reason code 2 at volume is the primary attack indicator.
- *Raw Feed* — last 100 deauth/disassoc events with full src/dst/BSSID/reason/RSSI detail.
- **Search** — cross-table lookup by any identifier. Supports MAC address, SSID, BSSID, and vendor name (e.g. "Raspberry", "Tuya", "Intel"). Returns all matching data across beacon, probe, and deauth tables in labelled sections. Vendor name search works by matching against the OUI database and finding all devices with those MAC prefixes.
- **Presence** — three sections driven entirely by probe data: - **Presence** — three sections driven entirely by probe data:
- *Present Now* — real (non-randomized) MACs seen 2+ times in the last hour. Filters out the city-center noise of transient devices. - *Present Now* — real (non-randomized) MACs seen 2+ times in the last hour. Filters out the city-center noise of transient devices.
- *New Arrivals* — devices and networks first seen in the last 24 hours, split into two side-by-side tables. - *New Arrivals* — devices and networks first seen in the last 24 hours, split into two side-by-side tables.
- *Regulars* — devices and networks seen on 2 or more distinct calendar days. Takes at least two days of data to populate. - *Regulars* — devices and networks seen on 2 or more distinct calendar days. Takes at least two days of data to populate.
- **Node detail** — click a node in the sidebar for stats: total events, unique SSIDs/BSSIDs, RSSI range, first/last seen, uptime, free heap, AP signal, last 100 events. - **Node detail** — click a node in the sidebar for stats: total events, unique SSIDs/BSSIDs, RSSI range, first/last seen, uptime, free heap, AP signal, last 100 events.
### Node detail
Click any node in the sidebar to open the detail view. Ten stat cards arranged in a 2×5 grid show: status, total events, unique SSIDs, unique BSSIDs, avg RSSI, first seen, last seen, uptime, free heap, and AP signal. Below the cards is a table of the last 100 events for that node.
### Sidebar ### Sidebar
Always visible: node list with online/offline status dot, last seen time, event count, and a compact heartbeat line (uptime · free heap · AP signal). Always visible: node list with online/offline status dot, last seen time, event count, and a compact heartbeat line (uptime · free heap · AP signal). Nodes are sorted alphabetically by node ID so the order stays fixed as more nodes are added.
A node is considered **online** if a heartbeat was received within the last 30 seconds. Falls back to beacon timestamp (60s threshold) if no heartbeat has been received yet. A node is considered **online** if a heartbeat was received within the last 30 seconds. Falls back to beacon timestamp (60s threshold) if no heartbeat has been received yet.
### UI
Font: Roboto (Google Fonts). Chosen for readability at small sizes — the previous monospace font felt too thin at the smaller label sizes used throughout the dashboard.
### Live updates ### Live updates
SSE stream pushes new beacon events as they arrive. The feed updates immediately. All other views (sidebar, networks, chart, cross-node, presence, alerts) refresh on a 2-second debounce so a single scan burst doesn't flood the server with requests. SSE stream pushes new beacon events as they arrive. The feed updates immediately. All other views (sidebar, networks, chart, cross-node, presence, alerts) refresh on a 2-second debounce so a single scan burst doesn't flood the server with requests.
@@ -313,6 +335,10 @@ The `oui.txt` file is the IEEE public OUI database (39,171 entries as of downloa
- [x] RSSI history chart per network (canvas, per-node coloured lines, 1h/2h/6h/24h range) - [x] RSSI history chart per network (canvas, per-node coloured lines, 1h/2h/6h/24h range)
- [x] Presence tab — Present Now, New Arrivals, Regulars - [x] Presence tab — Present Now, New Arrivals, Regulars
- [x] Deauth/disassoc frame detection — burst detection with multi-node confirmation, Alerts tab - [x] Deauth/disassoc frame detection — burst detection with multi-node confirmation, Alerts tab
- [x] Alerts tab — most impersonated networks, most targeted devices, burst detection, raw feed
- [x] Search tab — cross-table lookup by MAC, SSID, BSSID, or vendor name
- [x] Node detail view — 2×5 stat cards with animated border, fixed alphabetical sidebar order
- [ ] Attack session reconstruction — group deauth events into discrete sessions by source/time
- [ ] Scan interval control from dashboard - [ ] Scan interval control from dashboard
- [ ] DB pruning / retention policy (events.db grows indefinitely) - [ ] DB pruning / retention policy (events.db grows indefinitely)
BIN
View File
Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

+207 -1
View File
@@ -93,7 +93,7 @@ def build_nodes() -> list[dict]:
MIN(received_at) AS first_seen MIN(received_at) AS first_seen
FROM beacon_events FROM beacon_events
GROUP BY node_id GROUP BY node_id
ORDER BY last_beacon DESC ORDER BY node_id ASC
""") """)
# Latest heartbeat per node # Latest heartbeat per node
hb_rows = query(""" hb_rows = query("""
@@ -410,13 +410,214 @@ def build_alerts() -> dict:
WHERE received_at > ? WHERE received_at > ?
""", (cutoff_1h,)) """, (cutoff_1h,))
# Most targeted BSSIDs — all time
top_targets = query("""
SELECT
bssid,
COUNT(*) AS total_frames,
COUNT(DISTINCT src) AS unique_srcs,
COUNT(DISTINCT node_id) AS node_count,
MIN(received_at) AS first_seen,
MAX(received_at) AS last_seen
FROM deauth_events
GROUP BY bssid
ORDER BY total_frames DESC
LIMIT 10
""")
if top_targets:
bssid_list = [t["bssid"] for t in top_targets]
placeholders = ",".join("?" * len(bssid_list))
ssid_rows = query(f"""
SELECT bssid, MAX(ssid) AS ssid
FROM beacon_events WHERE bssid IN ({placeholders})
GROUP BY bssid
""", tuple(bssid_list))
ssid_map = {r["bssid"]: r["ssid"] for r in ssid_rows}
for t in top_targets:
t["ssid"] = ssid_map.get(t["bssid"])
# Most targeted devices — all time (grouped by dst, the actual victim)
top_targeted_devices = query("""
SELECT
dst,
COUNT(*) AS total_frames,
COUNT(DISTINCT bssid) AS networks_used,
COUNT(DISTINCT node_id) AS node_count,
MIN(received_at) AS first_seen,
MAX(received_at) AS last_seen
FROM deauth_events
GROUP BY dst
ORDER BY total_frames DESC
LIMIT 10
""")
for d in top_targeted_devices:
vendor, randomized = oui_lookup(d["dst"])
d["vendor"] = vendor
d["randomized"] = randomized
return { return {
"recent": recent, "recent": recent,
"bursts": bursts, "bursts": bursts,
"summary": summary[0] if summary else {}, "summary": summary[0] if summary else {},
"top_targets": top_targets,
"top_targeted_devices": top_targeted_devices,
} }
def build_search(q: str) -> dict:
if not q or len(q) < 2:
return {}
like = f"%{q}%"
results = {}
# As a network — BSSID or SSID match in beacon_events
as_network = query("""
SELECT bssid, MAX(ssid) AS ssid,
COUNT(*) AS times_seen,
MAX(rssi) AS best_rssi, ROUND(AVG(rssi),1) AS avg_rssi,
MAX(channel) AS channel, MAX(encryption) AS encryption,
COUNT(DISTINCT node_id) AS node_count,
MIN(received_at) AS first_seen, MAX(received_at) AS last_seen
FROM beacon_events
WHERE bssid LIKE ? OR ssid LIKE ?
GROUP BY bssid ORDER BY times_seen DESC LIMIT 20
""", (like, like))
if as_network:
results["as_network"] = as_network
# As a client device — src_mac match in probe_events
as_client = query("""
SELECT src_mac,
COUNT(*) AS times_seen,
MAX(rssi) AS best_rssi, ROUND(AVG(rssi),1) AS avg_rssi,
COUNT(DISTINCT node_id) AS node_count,
MIN(received_at) AS first_seen, MAX(received_at) AS last_seen
FROM probe_events
WHERE src_mac LIKE ?
GROUP BY src_mac LIMIT 10
""", (like,))
if as_client:
ssid_rows = query("""
SELECT DISTINCT src_mac, ssid FROM probe_events
WHERE src_mac LIKE ? AND ssid IS NOT NULL AND ssid != ''
""", (like,))
ssids_by_mac: dict = {}
for s in ssid_rows:
ssids_by_mac.setdefault(s["src_mac"], []).append(s["ssid"])
for r in as_client:
vendor, randomized = oui_lookup(r["src_mac"])
r["vendor"] = vendor
r["randomized"] = randomized
r["probed_ssids"] = ssids_by_mac.get(r["src_mac"], [])
results["as_client"] = as_client
# Devices probing for this SSID
probing_for = query("""
SELECT src_mac,
COUNT(*) AS times_seen,
MAX(rssi) AS best_rssi,
MIN(received_at) AS first_seen, MAX(received_at) AS last_seen
FROM probe_events
WHERE ssid LIKE ?
GROUP BY src_mac ORDER BY times_seen DESC LIMIT 20
""", (like,))
if probing_for:
for r in probing_for:
vendor, randomized = oui_lookup(r["src_mac"])
r["vendor"] = vendor
r["randomized"] = randomized
results["probing_for"] = probing_for
# As a deauth victim — dst match
as_victim = query("""
SELECT dst,
COUNT(*) AS total_frames,
COUNT(DISTINCT bssid) AS networks_used,
COUNT(DISTINCT node_id) AS node_count,
MIN(received_at) AS first_seen, MAX(received_at) AS last_seen
FROM deauth_events
WHERE dst LIKE ?
GROUP BY dst LIMIT 10
""", (like,))
if as_victim:
for r in as_victim:
vendor, randomized = oui_lookup(r["dst"])
r["vendor"] = vendor
r["randomized"] = randomized
results["as_victim"] = as_victim
# As an impersonated AP — bssid match in deauth_events
as_impersonated = query("""
SELECT bssid,
COUNT(*) AS total_frames,
COUNT(DISTINCT dst) AS unique_targets,
COUNT(DISTINCT node_id) AS node_count,
MIN(received_at) AS first_seen, MAX(received_at) AS last_seen
FROM deauth_events
WHERE bssid LIKE ?
GROUP BY bssid LIMIT 10
""", (like,))
if as_impersonated:
results["as_impersonated"] = as_impersonated
# Vendor name search — match query against OUI database, then find those MACs
q_lower = q.lower()
matching_prefixes = [
prefix for prefix, vendor in _OUI_DB.items()
if q_lower in vendor.lower()
][:60] # cap at 60 prefixes to keep query manageable
if matching_prefixes:
ph = ",".join("?" * len(matching_prefixes))
vendor_clients = query(f"""
SELECT src_mac,
COUNT(*) AS times_seen,
MAX(rssi) AS best_rssi, ROUND(AVG(rssi),1) AS avg_rssi,
COUNT(DISTINCT node_id) AS node_count,
MIN(received_at) AS first_seen, MAX(received_at) AS last_seen
FROM probe_events
WHERE substr(src_mac,1,8) IN ({ph})
GROUP BY src_mac ORDER BY times_seen DESC LIMIT 30
""", tuple(matching_prefixes))
if vendor_clients:
ssid_rows = query(f"""
SELECT DISTINCT src_mac, ssid FROM probe_events
WHERE substr(src_mac,1,8) IN ({ph})
AND ssid IS NOT NULL AND ssid != ''
""", tuple(matching_prefixes))
ssids_by_mac: dict = {}
for s in ssid_rows:
ssids_by_mac.setdefault(s["src_mac"], []).append(s["ssid"])
for r in vendor_clients:
vendor, randomized = oui_lookup(r["src_mac"])
r["vendor"] = vendor
r["randomized"] = randomized
r["probed_ssids"] = ssids_by_mac.get(r["src_mac"], [])
results["vendor_clients"] = vendor_clients
vendor_networks = query(f"""
SELECT bssid, MAX(ssid) AS ssid,
COUNT(*) AS times_seen,
MAX(rssi) AS best_rssi, ROUND(AVG(rssi),1) AS avg_rssi,
MAX(channel) AS channel, MAX(encryption) AS encryption,
COUNT(DISTINCT node_id) AS node_count,
MIN(received_at) AS first_seen, MAX(received_at) AS last_seen
FROM beacon_events
WHERE substr(bssid,1,8) IN ({ph})
GROUP BY bssid ORDER BY times_seen DESC LIMIT 30
""", tuple(matching_prefixes))
if vendor_networks:
results["vendor_networks"] = vendor_networks
if "vendor_clients" in results or "vendor_networks" in results:
results["vendor_name"] = next(
(v for k, v in _OUI_DB.items() if q_lower in v.lower()), q
)
return results
def build_node_detail(node_id: str) -> dict | None: def build_node_detail(node_id: str) -> dict | None:
rows = query(""" rows = query("""
SELECT SELECT
@@ -567,6 +768,11 @@ async def api_rssi_history(bssid: str, hours: int = 2):
return series return series
@app.get("/api/search")
async def api_search(q: str = ""):
return build_search(q)
@app.get("/api/alerts") @app.get("/api/alerts")
async def api_alerts(): async def api_alerts():
return build_alerts() return build_alerts()
+145 -13
View File
@@ -19,7 +19,7 @@ html, body {
height: 100%; height: 100%;
background: var(--bg); background: var(--bg);
color: var(--text); color: var(--text);
font-family: 'IBM Plex Mono', monospace; font-family: 'Roboto', sans-serif;
font-size: 13px; font-size: 13px;
line-height: 1.5; line-height: 1.5;
} }
@@ -83,7 +83,7 @@ html, body {
} }
.tab-btn { .tab-btn {
font-family: 'IBM Plex Mono', monospace; font-family: 'Roboto', sans-serif;
font-size: 11px; font-size: 11px;
letter-spacing: 0.1em; letter-spacing: 0.1em;
text-transform: uppercase; text-transform: uppercase;
@@ -228,7 +228,7 @@ html, body {
.range-btns { display: flex; gap: 4px; } .range-btns { display: flex; gap: 4px; }
.range-btn { .range-btn {
font-family: 'IBM Plex Mono', monospace; font-family: 'Roboto', sans-serif;
font-size: 10px; font-size: 10px;
letter-spacing: 0.08em; letter-spacing: 0.08em;
background: none; background: none;
@@ -242,7 +242,7 @@ html, body {
.range-btn.active { color: var(--green-hi); border-color: var(--green-dim); } .range-btn.active { color: var(--green-hi); border-color: var(--green-dim); }
.chart-btn { .chart-btn {
font-family: 'IBM Plex Mono', monospace; font-family: 'Roboto', sans-serif;
font-size: 10px; font-size: 10px;
background: none; background: none;
border: 1px solid var(--border); border: 1px solid var(--border);
@@ -272,27 +272,118 @@ html, body {
/* ── Node detail stats ── */ /* ── Node detail stats ── */
#detail-stats-grid { #detail-stats-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); grid-template-columns: repeat(5, 1fr);
gap: 10px; gap: 10px;
} }
.stat-card {
background: var(--bg-panel); .stat-outer {
border: 1px solid var(--border); border-radius: 8px;
padding: 12px 14px; padding: 1px;
background: radial-gradient(circle 120px at 0% 0%, var(--green-mid), var(--bg));
position: relative;
min-height: 90px;
} }
.stat-dot {
width: 4px;
aspect-ratio: 1;
position: absolute;
background: var(--green-live);
box-shadow: 0 0 7px var(--green-live);
border-radius: 50%;
z-index: 2;
right: 10%;
top: 10%;
animation: statDotMove 30s linear infinite;
}
.stat-outer:nth-child(1) .stat-dot { animation-delay: 0s; }
.stat-outer:nth-child(2) .stat-dot { animation-delay: -1s; }
.stat-outer:nth-child(3) .stat-dot { animation-delay: -2s; }
.stat-outer:nth-child(4) .stat-dot { animation-delay: -3s; }
.stat-outer:nth-child(5) .stat-dot { animation-delay: -4s; }
.stat-outer:nth-child(6) .stat-dot { animation-delay: -5s; }
.stat-outer:nth-child(7) .stat-dot { animation-delay: -6s; }
.stat-outer:nth-child(8) .stat-dot { animation-delay: -7s; }
.stat-outer:nth-child(9) .stat-dot { animation-delay: -8s; }
.stat-outer:nth-child(10) .stat-dot { animation-delay: -9s; }
@keyframes statDotMove {
0%, 100% { top: 10%; right: 10%; }
25% { top: 10%; right: calc(100% - 18px); }
50% { top: calc(100% - 14px); right: calc(100% - 18px); }
75% { top: calc(100% - 14px); right: 10%; }
}
.stat-card {
z-index: 1;
width: 100%;
height: 100%;
border-radius: 7px;
border: 1px solid var(--border);
background: radial-gradient(circle 140px at 0% 0%, #152019, var(--bg));
display: flex;
flex-direction: column;
justify-content: center;
padding: 12px 14px;
position: relative;
overflow: hidden;
}
.stat-ray {
width: 100px;
height: 28px;
border-radius: 100px;
position: absolute;
background: var(--green-mid);
opacity: 0.2;
box-shadow: 0 0 40px var(--green-hi);
filter: blur(8px);
top: 0;
left: 0;
transform: rotate(35deg);
transform-origin: 10%;
pointer-events: none;
}
.stat-card .label { .stat-card .label {
font-size: 9px; font-size: 9px;
letter-spacing: 0.1em; letter-spacing: 0.1em;
text-transform: uppercase; text-transform: uppercase;
color: var(--text-muted); color: var(--text);
margin-bottom: 4px; margin-bottom: 6px;
position: relative;
z-index: 1;
} }
.stat-card .value { .stat-card .value {
font-size: 16px; font-size: 20px;
font-weight: 500; font-weight: 500;
color: var(--green-hi); color: var(--green-hi);
position: relative;
z-index: 1;
}
.stat-card .value-sm { font-size: 11px; }
.stat-card .sub { font-size: 10px; color: var(--text-dim); margin-top: 3px; position: relative; z-index: 1; }
.stat-card .line {
position: absolute;
background-color: var(--border);
}
.stat-card .topl {
top: 12%; width: 100%; height: 1px;
background: linear-gradient(90deg, var(--green-dim) 20%, transparent 80%);
}
.stat-card .bottoml {
bottom: 12%; width: 100%; height: 1px;
background: linear-gradient(90deg, transparent 20%, var(--border) 80%);
}
.stat-card .leftl {
left: 8%; width: 1px; height: 100%;
background: linear-gradient(180deg, var(--green-dim) 20%, transparent 80%);
}
.stat-card .rightl {
right: 8%; width: 1px; height: 100%;
background: linear-gradient(180deg, transparent 20%, var(--border) 80%);
} }
.stat-card .sub { font-size: 10px; color: var(--text-dim); margin-top: 2px; }
/* ── Table ── */ /* ── Table ── */
.tbl-wrap { overflow-x: auto; } .tbl-wrap { overflow-x: auto; }
@@ -399,6 +490,47 @@ thead th.sort-active::after { content: ' ' attr(data-arrow); }
td.deauth-type { color: #e74c3c; } td.deauth-type { color: #e74c3c; }
td.disassoc-type { color: var(--orange); } td.disassoc-type { color: var(--orange); }
/* ── Search ── */
.search-bar {
display: flex;
gap: 8px;
}
.search-input {
flex: 1;
background: var(--bg-panel);
border: 1px solid var(--border);
color: var(--text);
font-family: 'Roboto', sans-serif;
font-size: 13px;
padding: 8px 12px;
outline: none;
transition: border-color 0.15s;
}
.search-input:focus { border-color: var(--green-dim); }
.search-input::placeholder { color: var(--text-muted); }
.search-btn {
font-family: 'Roboto', sans-serif;
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
background: none;
border: 1px solid var(--green-dim);
color: var(--green-hi);
padding: 8px 20px;
cursor: pointer;
transition: background 0.15s;
}
.search-btn:hover { background: var(--bg-hover); }
.search-section { display: flex; flex-direction: column; gap: 8px; }
.search-section-label {
font-size: 9px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-muted);
padding-bottom: 6px;
border-bottom: 1px solid var(--border);
}
/* ── Scrollbar ── */ /* ── Scrollbar ── */
::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-track { background: var(--bg); }
+208
View File
@@ -471,6 +471,51 @@ function renderAlertsView() {
<span>unique sources</span> <span>unique sources</span>
</div>`; </div>`;
// Most targeted networks
const targetsTbody = document.getElementById('targets-tbody');
const targetsEmpty = document.getElementById('targets-empty');
const targetsCount = document.getElementById('targets-count');
const topTargets = a.top_targets || [];
targetsCount.textContent = `${topTargets.length}`;
if (!topTargets.length) {
targetsTbody.innerHTML = '';
targetsEmpty.style.display = 'block';
} else {
targetsEmpty.style.display = 'none';
targetsTbody.innerHTML = topTargets.map((t, i) => `<tr>
<td class="dim">${fmt(t.bssid)}</td>
<td>${fmt(t.ssid, '<hidden>')}</td>
<td style="color:#e74c3c;font-weight:500">${t.total_frames}</td>
<td class="muted">${t.unique_srcs}</td>
<td class="${t.node_count > 1 ? 'nodes-multi' : 'muted'}">${t.node_count}</td>
<td class="dim">${shortTime(t.last_seen)}</td>
</tr>`).join('');
}
// Most active attackers
const attackersTbody = document.getElementById('attackers-tbody');
const attackersEmpty = document.getElementById('attackers-empty');
const attackersCount = document.getElementById('attackers-count');
const topTargetedDevices = a.top_targeted_devices || [];
attackersCount.textContent = `${topTargetedDevices.length}`;
if (!topTargetedDevices.length) {
attackersTbody.innerHTML = '';
attackersEmpty.style.display = 'block';
} else {
attackersEmpty.style.display = 'none';
attackersTbody.innerHTML = topTargetedDevices.map(d => {
const vendorCls = d.randomized ? 'muted' : 'dim';
return `<tr>
<td class="dim">${fmt(d.dst)}</td>
<td class="${vendorCls}">${d.vendor || '—'}</td>
<td style="color:#e74c3c;font-weight:500">${d.total_frames}</td>
<td class="muted">${d.networks_used}</td>
<td class="${d.node_count > 1 ? 'nodes-multi' : 'muted'}">${d.node_count}</td>
<td class="dim">${shortTime(d.last_seen)}</td>
</tr>`;
}).join('');
}
// Bursts // Bursts
const burstsTbody = document.getElementById('bursts-tbody'); const burstsTbody = document.getElementById('bursts-tbody');
const burstsEmpty = document.getElementById('bursts-empty'); const burstsEmpty = document.getElementById('bursts-empty');
@@ -648,6 +693,165 @@ function renderRssiChart(series) {
</div>`).join(''); </div>`).join('');
} }
// ── Search view ───────────────────────────────────────────────────────────────
async function doSearch() {
const q = document.getElementById('search-input').value.trim();
if (q.length < 2) return;
const data = await fetch(`/api/search?q=${encodeURIComponent(q)}`).then(r => r.json());
renderSearchResults(data, q);
}
function renderSearchResults(data, q) {
const container = document.getElementById('search-results');
const empty = document.getElementById('search-empty');
container.querySelectorAll('.search-section').forEach(el => el.remove());
if (!Object.keys(data).length) {
empty.textContent = `No data found for "${q}".`;
empty.style.display = 'block';
return;
}
empty.style.display = 'none';
// Helper to append a section
function addSection(title, html) {
const div = document.createElement('div');
div.className = 'search-section';
div.innerHTML = `<div class="search-section-label">${title}</div>${html}`;
container.appendChild(div);
}
// As a network
if (data.as_network) {
const rows = data.as_network.map(r => {
const encCls = (!r.encryption || r.encryption === 'OPEN') ? 'enc-open' : 'muted';
return `<tr>
<td>${fmt(r.ssid, '<hidden>')}</td>
<td class="dim">${fmt(r.bssid)}</td>
<td class="${rssiClass(r.best_rssi)}">${fmt(r.best_rssi)} dBm</td>
<td class="muted">${fmt(r.channel)}</td>
<td class="${encCls}">${r.encryption || 'OPEN'}</td>
<td>${fmt(r.times_seen)}</td>
<td class="${r.node_count > 1 ? 'nodes-multi' : 'muted'}">${r.node_count}</td>
<td class="dim">${shortTime(r.first_seen)}</td>
<td class="dim">${shortTime(r.last_seen)}</td>
</tr>`;
}).join('');
addSection('As a Network', `<div class="tbl-wrap"><table>
<thead><tr><th>SSID</th><th>BSSID</th><th>Best RSSI</th><th>Ch</th><th>Enc</th><th>Times Seen</th><th>Nodes</th><th>First Seen</th><th>Last Seen</th></tr></thead>
<tbody>${rows}</tbody></table></div>`);
}
// As a client device
if (data.as_client) {
const rows = data.as_client.map(r => {
const probing = r.probed_ssids.length
? r.probed_ssids.join(', ')
: '<span style="color:var(--text-muted)">wildcard only</span>';
return `<tr>
<td>${fmt(r.src_mac)}</td>
<td class="${r.randomized ? 'muted' : 'dim'}">${r.vendor || '—'}</td>
<td style="white-space:normal;max-width:300px;line-height:1.8">${probing}</td>
<td class="${rssiClass(r.best_rssi)}">${fmt(r.best_rssi)} dBm</td>
<td>${fmt(r.times_seen)}</td>
<td class="dim">${shortTime(r.first_seen)}</td>
<td class="dim">${shortTime(r.last_seen)}</td>
</tr>`;
}).join('');
addSection('As a Client Device (Probe Requests)', `<div class="tbl-wrap"><table>
<thead><tr><th>MAC</th><th>Vendor</th><th>Probing For</th><th>Best RSSI</th><th>Times Seen</th><th>First Seen</th><th>Last Seen</th></tr></thead>
<tbody>${rows}</tbody></table></div>`);
}
// Devices probing for this SSID
if (data.probing_for) {
const rows = data.probing_for.map(r => `<tr>
<td>${fmt(r.src_mac)}</td>
<td class="${r.randomized ? 'muted' : 'dim'}">${r.vendor || '—'}</td>
<td class="${rssiClass(r.best_rssi)}">${fmt(r.best_rssi)} dBm</td>
<td>${fmt(r.times_seen)}</td>
<td class="dim">${shortTime(r.first_seen)}</td>
<td class="dim">${shortTime(r.last_seen)}</td>
</tr>`).join('');
addSection('Devices Probing for This SSID', `<div class="tbl-wrap"><table>
<thead><tr><th>MAC</th><th>Vendor</th><th>Best RSSI</th><th>Times Seen</th><th>First Seen</th><th>Last Seen</th></tr></thead>
<tbody>${rows}</tbody></table></div>`);
}
// As a deauth victim
if (data.as_victim) {
const rows = data.as_victim.map(r => `<tr>
<td>${fmt(r.dst)}</td>
<td class="${r.randomized ? 'muted' : 'dim'}">${r.vendor || '—'}</td>
<td style="color:#e74c3c;font-weight:500">${r.total_frames}</td>
<td class="muted">${r.networks_used}</td>
<td class="${r.node_count > 1 ? 'nodes-multi' : 'muted'}">${r.node_count}</td>
<td class="dim">${shortTime(r.first_seen)}</td>
<td class="dim">${shortTime(r.last_seen)}</td>
</tr>`).join('');
addSection('As a Deauth Victim', `<div class="tbl-wrap"><table>
<thead><tr><th>MAC</th><th>Vendor</th><th>Frames Received</th><th>Networks Used</th><th>Nodes</th><th>First Seen</th><th>Last Seen</th></tr></thead>
<tbody>${rows}</tbody></table></div>`);
}
// Vendor — client devices
if (data.vendor_clients) {
const label = data.vendor_name || q;
const rows = data.vendor_clients.map(r => {
const probing = r.probed_ssids.length
? r.probed_ssids.join(', ')
: '<span style="color:var(--text-muted)">wildcard only</span>';
return `<tr>
<td>${fmt(r.src_mac)}</td>
<td class="${r.randomized ? 'muted' : 'dim'}">${r.vendor || '—'}</td>
<td style="white-space:normal;max-width:300px;line-height:1.8">${probing}</td>
<td class="${rssiClass(r.best_rssi)}">${fmt(r.best_rssi)} dBm</td>
<td>${fmt(r.times_seen)}</td>
<td class="dim">${shortTime(r.last_seen)}</td>
</tr>`;
}).join('');
addSection(`Vendor Match — Client Devices (${label})`, `<div class="tbl-wrap"><table>
<thead><tr><th>MAC</th><th>Vendor</th><th>Probing For</th><th>Best RSSI</th><th>Times Seen</th><th>Last Seen</th></tr></thead>
<tbody>${rows}</tbody></table></div>`);
}
// Vendor — networks / APs
if (data.vendor_networks) {
const label = data.vendor_name || q;
const rows = data.vendor_networks.map(r => {
const encCls = (!r.encryption || r.encryption === 'OPEN') ? 'enc-open' : 'muted';
return `<tr>
<td>${fmt(r.ssid, '<hidden>')}</td>
<td class="dim">${fmt(r.bssid)}</td>
<td class="${rssiClass(r.best_rssi)}">${fmt(r.best_rssi)} dBm</td>
<td class="muted">${fmt(r.channel)}</td>
<td class="${encCls}">${r.encryption || 'OPEN'}</td>
<td>${fmt(r.times_seen)}</td>
<td class="${r.node_count > 1 ? 'nodes-multi' : 'muted'}">${r.node_count}</td>
<td class="dim">${shortTime(r.last_seen)}</td>
</tr>`;
}).join('');
addSection(`Vendor Match — Networks / APs (${label})`, `<div class="tbl-wrap"><table>
<thead><tr><th>SSID</th><th>BSSID</th><th>Best RSSI</th><th>Ch</th><th>Enc</th><th>Times Seen</th><th>Nodes</th><th>Last Seen</th></tr></thead>
<tbody>${rows}</tbody></table></div>`);
}
// As an impersonated AP
if (data.as_impersonated) {
const rows = data.as_impersonated.map(r => `<tr>
<td class="dim">${fmt(r.bssid)}</td>
<td style="color:#e74c3c;font-weight:500">${r.total_frames}</td>
<td class="muted">${r.unique_targets}</td>
<td class="${r.node_count > 1 ? 'nodes-multi' : 'muted'}">${r.node_count}</td>
<td class="dim">${shortTime(r.first_seen)}</td>
<td class="dim">${shortTime(r.last_seen)}</td>
</tr>`).join('');
addSection('As an Impersonated AP (Deauth Source)', `<div class="tbl-wrap"><table>
<thead><tr><th>BSSID</th><th>Frames Sent</th><th>Unique Targets</th><th>Nodes</th><th>First Seen</th><th>Last Seen</th></tr></thead>
<tbody>${rows}</tbody></table></div>`);
}
}
// ── View switching ──────────────────────────────────────────────────────────── // ── View switching ────────────────────────────────────────────────────────────
function setView(view) { function setView(view) {
currentView = view; currentView = view;
@@ -659,12 +863,14 @@ function setView(view) {
document.getElementById('view-detail').classList.toggle('active', view === 'detail'); document.getElementById('view-detail').classList.toggle('active', view === 'detail');
document.getElementById('view-presence').classList.toggle('active', view === 'presence'); document.getElementById('view-presence').classList.toggle('active', view === 'presence');
document.getElementById('view-alerts').classList.toggle('active', view === 'alerts'); document.getElementById('view-alerts').classList.toggle('active', view === 'alerts');
document.getElementById('view-search').classList.toggle('active', view === 'search');
document.getElementById('tab-feed').classList.toggle('active', view === 'feed' || view === 'detail'); document.getElementById('tab-feed').classList.toggle('active', view === 'feed' || view === 'detail');
document.getElementById('tab-networks').classList.toggle('active', view === 'networks' || view === 'network-chart'); document.getElementById('tab-networks').classList.toggle('active', view === 'networks' || view === 'network-chart');
document.getElementById('tab-crossnode').classList.toggle('active', view === 'crossnode'); document.getElementById('tab-crossnode').classList.toggle('active', view === 'crossnode');
document.getElementById('tab-clients').classList.toggle('active', view === 'clients'); document.getElementById('tab-clients').classList.toggle('active', view === 'clients');
document.getElementById('tab-presence').classList.toggle('active', view === 'presence'); document.getElementById('tab-presence').classList.toggle('active', view === 'presence');
document.getElementById('tab-alerts').classList.toggle('active', view === 'alerts'); document.getElementById('tab-alerts').classList.toggle('active', view === 'alerts');
document.getElementById('tab-search').classList.toggle('active', view === 'search');
} }
function showFeed() { function showFeed() {
@@ -685,6 +891,8 @@ async function showPresence() { setView('presence'); await fetchPresence(); }
async function showAlerts() { setView('alerts'); await fetchAlerts(); } async function showAlerts() { setView('alerts'); await fetchAlerts(); }
function showSearch() { setView('search'); document.getElementById('search-input').focus(); }
async function showDetail(node_id) { async function showDetail(node_id) {
currentNode = node_id; currentNode = node_id;
setView('detail'); setView('detail');
+63 -11
View File
@@ -6,7 +6,7 @@
<title>ESP32 Recon</title> <title>ESP32 Recon</title>
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500&display=swap" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="/static/dashboard.css" /> <link rel="stylesheet" href="/static/dashboard.css" />
</head> </head>
<body> <body>
@@ -29,6 +29,7 @@
<button class="tab-btn" id="tab-clients" onclick="showClients()">Clients</button> <button class="tab-btn" id="tab-clients" onclick="showClients()">Clients</button>
<button class="tab-btn" id="tab-presence" onclick="showPresence()">Presence</button> <button class="tab-btn" id="tab-presence" onclick="showPresence()">Presence</button>
<button class="tab-btn" id="tab-alerts" onclick="showAlerts()">Alerts</button> <button class="tab-btn" id="tab-alerts" onclick="showAlerts()">Alerts</button>
<button class="tab-btn" id="tab-search" onclick="showSearch()">Search</button>
</div> </div>
<!-- Sidebar --> <!-- Sidebar -->
@@ -84,16 +85,16 @@
</div> </div>
<div id="detail-stats-grid"> <div id="detail-stats-grid">
<div class="stat-card"><div class="label">Status</div><div class="value" id="ds-status"></div></div> <div class="stat-outer"><div class="stat-dot"></div><div class="stat-card"><div class="stat-ray"></div><div class="label">Status</div><div class="value" id="ds-status"></div><div class="line topl"></div><div class="line leftl"></div><div class="line bottoml"></div><div class="line rightl"></div></div></div>
<div class="stat-card"><div class="label">Total Events</div><div class="value" id="ds-total"></div></div> <div class="stat-outer"><div class="stat-dot"></div><div class="stat-card"><div class="stat-ray"></div><div class="label">Total Events</div><div class="value" id="ds-total"></div><div class="line topl"></div><div class="line leftl"></div><div class="line bottoml"></div><div class="line rightl"></div></div></div>
<div class="stat-card"><div class="label">Unique SSIDs</div><div class="value" id="ds-ssids"></div></div> <div class="stat-outer"><div class="stat-dot"></div><div class="stat-card"><div class="stat-ray"></div><div class="label">Unique SSIDs</div><div class="value" id="ds-ssids"></div><div class="line topl"></div><div class="line leftl"></div><div class="line bottoml"></div><div class="line rightl"></div></div></div>
<div class="stat-card"><div class="label">Unique BSSIDs</div><div class="value" id="ds-bssids"></div></div> <div class="stat-outer"><div class="stat-dot"></div><div class="stat-card"><div class="stat-ray"></div><div class="label">Unique BSSIDs</div><div class="value" id="ds-bssids"></div><div class="line topl"></div><div class="line leftl"></div><div class="line bottoml"></div><div class="line rightl"></div></div></div>
<div class="stat-card"><div class="label">Avg RSSI</div><div class="value" id="ds-rssi-avg"></div><div class="sub" id="ds-rssi-range"></div></div> <div class="stat-outer"><div class="stat-dot"></div><div class="stat-card"><div class="stat-ray"></div><div class="label">Avg RSSI</div><div class="value" id="ds-rssi-avg"></div><div class="sub" id="ds-rssi-range"></div><div class="line topl"></div><div class="line leftl"></div><div class="line bottoml"></div><div class="line rightl"></div></div></div>
<div class="stat-card"><div class="label">First Seen</div><div class="value" style="font-size:12px" id="ds-first"></div></div> <div class="stat-outer"><div class="stat-dot"></div><div class="stat-card"><div class="stat-ray"></div><div class="label">First Seen</div><div class="value value-sm" id="ds-first"></div><div class="line topl"></div><div class="line leftl"></div><div class="line bottoml"></div><div class="line rightl"></div></div></div>
<div class="stat-card"><div class="label">Last Seen</div><div class="value" style="font-size:12px" id="ds-last"></div></div> <div class="stat-outer"><div class="stat-dot"></div><div class="stat-card"><div class="stat-ray"></div><div class="label">Last Seen</div><div class="value value-sm" id="ds-last"></div><div class="line topl"></div><div class="line leftl"></div><div class="line bottoml"></div><div class="line rightl"></div></div></div>
<div class="stat-card"><div class="label">Uptime</div><div class="value" id="ds-uptime"></div></div> <div class="stat-outer"><div class="stat-dot"></div><div class="stat-card"><div class="stat-ray"></div><div class="label">Uptime</div><div class="value" id="ds-uptime"></div><div class="line topl"></div><div class="line leftl"></div><div class="line bottoml"></div><div class="line rightl"></div></div></div>
<div class="stat-card"><div class="label">Free Heap</div><div class="value" id="ds-heap"></div></div> <div class="stat-outer"><div class="stat-dot"></div><div class="stat-card"><div class="stat-ray"></div><div class="label">Free Heap</div><div class="value" id="ds-heap"></div><div class="line topl"></div><div class="line leftl"></div><div class="line bottoml"></div><div class="line rightl"></div></div></div>
<div class="stat-card"><div class="label">AP Signal</div><div class="value" id="ds-ap-rssi"></div><div class="sub">node → router</div></div> <div class="stat-outer"><div class="stat-dot"></div><div class="stat-card"><div class="stat-ray"></div><div class="label">AP Signal</div><div class="value" id="ds-ap-rssi"></div><div class="sub">node → router</div><div class="line topl"></div><div class="line leftl"></div><div class="line bottoml"></div><div class="line rightl"></div></div></div>
</div> </div>
<div class="section-header" style="margin-top:4px"> <div class="section-header" style="margin-top:4px">
@@ -311,6 +312,44 @@
<!-- Summary strip --> <!-- Summary strip -->
<div id="alerts-summary" class="alerts-summary"></div> <div id="alerts-summary" class="alerts-summary"></div>
<!-- Top targets / attackers -->
<div class="presence-split" style="margin-top:8px">
<div>
<div class="section-header">
<span class="section-title">Most Impersonated Networks</span>
<span class="section-count" id="targets-count"></span>
<span class="presence-sub">all time · APs spoofed as deauth source</span>
</div>
<div class="tbl-wrap">
<table>
<thead><tr>
<th>BSSID</th><th>SSID</th><th>Frames</th>
<th>Unique Srcs</th><th>Nodes</th><th>Last Seen</th>
</tr></thead>
<tbody id="targets-tbody"></tbody>
</table>
<div class="empty" id="targets-empty" style="display:none">No data yet.</div>
</div>
</div>
<div>
<div class="section-header">
<span class="section-title">Most Targeted Devices</span>
<span class="section-count" id="attackers-count"></span>
<span class="presence-sub">all time · actual victim devices by dst MAC</span>
</div>
<div class="tbl-wrap">
<table>
<thead><tr>
<th>Dst MAC</th><th>Vendor</th><th>Frames</th>
<th>Networks Used</th><th>Nodes</th><th>Last Seen</th>
</tr></thead>
<tbody id="attackers-tbody"></tbody>
</table>
<div class="empty" id="attackers-empty" style="display:none">No data yet.</div>
</div>
</div>
</div>
<!-- Detected bursts --> <!-- Detected bursts -->
<div class="section-header"> <div class="section-header">
<span class="section-title">Detected Bursts</span> <span class="section-title">Detected Bursts</span>
@@ -346,6 +385,19 @@
</div><!-- /#view-alerts --> </div><!-- /#view-alerts -->
<!-- Search view -->
<div id="view-search" class="view">
<div class="search-bar">
<input type="text" id="search-input" class="search-input"
placeholder="MAC address, SSID, BSSID — full or partial..."
onkeydown="if(event.key==='Enter') doSearch()" />
<button class="search-btn" onclick="doSearch()">Search</button>
</div>
<div id="search-results">
<div class="empty" id="search-empty">Enter a value above to search across all collected data.</div>
</div>
</div>
</div><!-- /#main --> </div><!-- /#main -->
</div><!-- /#app --> </div><!-- /#app -->
+1
View File
@@ -18,3 +18,4 @@
#define PROBE_SNIFF 1 // 1 = enabled, 0 = disabled #define PROBE_SNIFF 1 // 1 = enabled, 0 = disabled
#define PROBE_DEDUP_SECS 30 // suppress same MAC+SSID within this window (seconds) #define PROBE_DEDUP_SECS 30 // suppress same MAC+SSID within this window (seconds)
#define PROBE_QUEUE_SIZE 32 // max probe events buffered between scan cycles #define PROBE_QUEUE_SIZE 32 // max probe events buffered between scan cycles
#define DEAUTH_QUEUE_SIZE 32 // max deauth/disassoc events buffered between scan cycles