Add deauth detection, Alerts tab, Search tab, node detail cards, UI improvements
This commit is contained in:
+210
-4
@@ -93,7 +93,7 @@ def build_nodes() -> list[dict]:
|
||||
MIN(received_at) AS first_seen
|
||||
FROM beacon_events
|
||||
GROUP BY node_id
|
||||
ORDER BY last_beacon DESC
|
||||
ORDER BY node_id ASC
|
||||
""")
|
||||
# Latest heartbeat per node
|
||||
hb_rows = query("""
|
||||
@@ -410,13 +410,214 @@ def build_alerts() -> dict:
|
||||
WHERE received_at > ?
|
||||
""", (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 {
|
||||
"recent": recent,
|
||||
"bursts": bursts,
|
||||
"summary": summary[0] if summary else {},
|
||||
"recent": recent,
|
||||
"bursts": bursts,
|
||||
"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:
|
||||
rows = query("""
|
||||
SELECT
|
||||
@@ -567,6 +768,11 @@ async def api_rssi_history(bssid: str, hours: int = 2):
|
||||
return series
|
||||
|
||||
|
||||
@app.get("/api/search")
|
||||
async def api_search(q: str = ""):
|
||||
return build_search(q)
|
||||
|
||||
|
||||
@app.get("/api/alerts")
|
||||
async def api_alerts():
|
||||
return build_alerts()
|
||||
|
||||
@@ -19,7 +19,7 @@ html, body {
|
||||
height: 100%;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
@@ -83,7 +83,7 @@ html, body {
|
||||
}
|
||||
|
||||
.tab-btn {
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
@@ -228,7 +228,7 @@ html, body {
|
||||
|
||||
.range-btns { display: flex; gap: 4px; }
|
||||
.range-btn {
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.08em;
|
||||
background: none;
|
||||
@@ -242,7 +242,7 @@ html, body {
|
||||
.range-btn.active { color: var(--green-hi); border-color: var(--green-dim); }
|
||||
|
||||
.chart-btn {
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-size: 10px;
|
||||
background: none;
|
||||
border: 1px solid var(--border);
|
||||
@@ -272,27 +272,118 @@ html, body {
|
||||
/* ── Node detail stats ── */
|
||||
#detail-stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 10px;
|
||||
}
|
||||
.stat-card {
|
||||
background: var(--bg-panel);
|
||||
border: 1px solid var(--border);
|
||||
padding: 12px 14px;
|
||||
|
||||
.stat-outer {
|
||||
border-radius: 8px;
|
||||
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 {
|
||||
font-size: 9px;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 4px;
|
||||
color: var(--text);
|
||||
margin-bottom: 6px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.stat-card .value {
|
||||
font-size: 16px;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
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 ── */
|
||||
.tbl-wrap { overflow-x: auto; }
|
||||
@@ -399,6 +490,47 @@ thead th.sort-active::after { content: ' ' attr(data-arrow); }
|
||||
td.deauth-type { color: #e74c3c; }
|
||||
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 ── */
|
||||
::-webkit-scrollbar { width: 5px; height: 5px; }
|
||||
::-webkit-scrollbar-track { background: var(--bg); }
|
||||
|
||||
@@ -471,6 +471,51 @@ function renderAlertsView() {
|
||||
<span>unique sources</span>
|
||||
</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
|
||||
const burstsTbody = document.getElementById('bursts-tbody');
|
||||
const burstsEmpty = document.getElementById('bursts-empty');
|
||||
@@ -648,6 +693,165 @@ function renderRssiChart(series) {
|
||||
</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 ────────────────────────────────────────────────────────────
|
||||
function setView(view) {
|
||||
currentView = view;
|
||||
@@ -659,12 +863,14 @@ function setView(view) {
|
||||
document.getElementById('view-detail').classList.toggle('active', view === 'detail');
|
||||
document.getElementById('view-presence').classList.toggle('active', view === 'presence');
|
||||
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-networks').classList.toggle('active', view === 'networks' || view === 'network-chart');
|
||||
document.getElementById('tab-crossnode').classList.toggle('active', view === 'crossnode');
|
||||
document.getElementById('tab-clients').classList.toggle('active', view === 'clients');
|
||||
document.getElementById('tab-presence').classList.toggle('active', view === 'presence');
|
||||
document.getElementById('tab-alerts').classList.toggle('active', view === 'alerts');
|
||||
document.getElementById('tab-search').classList.toggle('active', view === 'search');
|
||||
}
|
||||
|
||||
function showFeed() {
|
||||
@@ -685,6 +891,8 @@ async function showPresence() { setView('presence'); await fetchPresence(); }
|
||||
|
||||
async function showAlerts() { setView('alerts'); await fetchAlerts(); }
|
||||
|
||||
function showSearch() { setView('search'); document.getElementById('search-input').focus(); }
|
||||
|
||||
async function showDetail(node_id) {
|
||||
currentNode = node_id;
|
||||
setView('detail');
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
<title>ESP32 Recon</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<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" />
|
||||
</head>
|
||||
<body>
|
||||
@@ -29,6 +29,7 @@
|
||||
<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-alerts" onclick="showAlerts()">Alerts</button>
|
||||
<button class="tab-btn" id="tab-search" onclick="showSearch()">Search</button>
|
||||
</div>
|
||||
|
||||
<!-- Sidebar -->
|
||||
@@ -84,16 +85,16 @@
|
||||
</div>
|
||||
|
||||
<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-card"><div class="label">Total Events</div><div class="value" id="ds-total">—</div></div>
|
||||
<div class="stat-card"><div class="label">Unique SSIDs</div><div class="value" id="ds-ssids">—</div></div>
|
||||
<div class="stat-card"><div class="label">Unique BSSIDs</div><div class="value" id="ds-bssids">—</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-card"><div class="label">First Seen</div><div class="value" style="font-size:12px" id="ds-first">—</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-card"><div class="label">Uptime</div><div class="value" id="ds-uptime">—</div></div>
|
||||
<div class="stat-card"><div class="label">Free Heap</div><div class="value" id="ds-heap">—</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">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-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-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-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-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-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-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-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-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-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 class="section-header" style="margin-top:4px">
|
||||
@@ -311,6 +312,44 @@
|
||||
<!-- Summary strip -->
|
||||
<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 -->
|
||||
<div class="section-header">
|
||||
<span class="section-title">Detected Bursts</span>
|
||||
@@ -346,6 +385,19 @@
|
||||
|
||||
</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><!-- /#app -->
|
||||
|
||||
|
||||
Reference in New Issue
Block a user