feat(dashboard): fingerprint discovery page — extract and group JA4/H2/headers from traffic
- GET /api/fingerprint-discovery: queries http_logs, groups by JA4, aggregates UA family, header presence rates (Sec-CH-UA, Sec-Fetch, Accept-Language, zstd, brotli, gzip, XFF), H2 data, TLS info, dict lookups - /fingerprints page: KPIs, doughnut chart by family, stacked header bars, filterable/sortable profile table, expandable detail panel - Promote button: push H2 fingerprints to browser_h2_signatures via existing POST /api/browser-signatures/entries endpoint - Nav link: Découverte added after Navigateurs in sidebar Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
toto
@ -1897,3 +1897,134 @@ async def browser_sig_delete(fingerprint: str = Query(...)) -> dict[str, Any]:
|
||||
except Exception as exc:
|
||||
logger.exception("browser_h2_signatures delete failed")
|
||||
raise HTTPException(status_code=500, detail=str(exc))
|
||||
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# GET /api/fingerprint-discovery — Extraction et regroupement des fingerprints
|
||||
# du trafic réel pour proposer des signatures navigateur
|
||||
# ---------------------------------------------------------------------------
|
||||
|
||||
@router.get("/fingerprint-discovery")
|
||||
async def fingerprint_discovery(
|
||||
days: int = Query(default=7, ge=1, le=30),
|
||||
min_hits: int = Query(default=10, ge=1, le=100000),
|
||||
limit: int = Query(default=300, ge=10, le=1000),
|
||||
) -> dict[str, Any]:
|
||||
"""Découverte de profils fingerprint depuis http_logs.
|
||||
|
||||
Regroupe par JA4 et agrège : user-agent, headers HTTP,
|
||||
données H2, TLS — pour proposer des signatures navigateur.
|
||||
"""
|
||||
try:
|
||||
profiles = query(
|
||||
f"SELECT "
|
||||
f" ja4, "
|
||||
# ── Famille navigateur extraite du User-Agent (vote majoritaire) ──
|
||||
f" topK(1)("
|
||||
f" multiIf("
|
||||
f" position(header_user_agent, 'Edg/') > 0, 'Edge', "
|
||||
f" position(header_user_agent, 'OPR/') > 0, 'Opera', "
|
||||
f" position(header_user_agent, 'Chrome/') > 0 AND "
|
||||
f" position(header_user_agent, 'Safari/') > 0, 'Chrome', "
|
||||
f" position(header_user_agent, 'Firefox/') > 0, 'Firefox', "
|
||||
f" position(header_user_agent, 'Safari/') > 0, 'Safari', "
|
||||
f" position(lower(header_user_agent), 'bot') > 0 OR "
|
||||
f" position(lower(header_user_agent), 'crawl') > 0 OR "
|
||||
f" position(lower(header_user_agent), 'spider') > 0, 'Bot', "
|
||||
f" header_user_agent = '', 'Vide', "
|
||||
f" 'Autre'"
|
||||
f" )"
|
||||
f" )[1] AS ua_family, "
|
||||
# ── Volume ──
|
||||
f" count() AS total_hits, "
|
||||
f" uniqExact(src_ip) AS unique_ips, "
|
||||
f" uniqExact(header_user_agent) AS distinct_uas, "
|
||||
# ── Échantillons UA (top 3) ──
|
||||
f" topK(3)(header_user_agent) AS ua_samples, "
|
||||
# ── TLS ──
|
||||
f" any(tls_version) AS tls_version, "
|
||||
f" any(tls_alpn) AS tls_alpn, "
|
||||
# ── H2 ──
|
||||
f" anyIf(h2_fingerprint, h2_fingerprint != '') AS h2_fp, "
|
||||
f" anyIf(h2_settings_fp, h2_settings_fp != '') AS h2_settings, "
|
||||
f" max(h2_window_update) AS h2_wu, "
|
||||
f" anyIf(h2_pseudo_order, h2_pseudo_order != '') AS h2_pseudo, "
|
||||
# ── Taux de présence headers (%) ──
|
||||
f" round(countIf(header_sec_ch_ua != '') * 100.0 / count(), 1) "
|
||||
f" AS pct_sec_ch_ua, "
|
||||
f" round(countIf(header_sec_fetch_mode != '') * 100.0 / count(), 1) "
|
||||
f" AS pct_sec_fetch, "
|
||||
f" round(countIf(header_accept_language != '') * 100.0 / count(), 1) "
|
||||
f" AS pct_accept_lang, "
|
||||
f" round(countIf(position(header_accept_encoding, 'zstd') > 0) "
|
||||
f" * 100.0 / count(), 1) AS pct_zstd, "
|
||||
f" round(countIf(position(header_accept_encoding, 'br') > 0) "
|
||||
f" * 100.0 / count(), 1) AS pct_brotli, "
|
||||
f" round(countIf(position(header_accept_encoding, 'gzip') > 0) "
|
||||
f" * 100.0 / count(), 1) AS pct_gzip, "
|
||||
f" round(countIf(header_x_forwarded_for != '') * 100.0 / count(), 1) "
|
||||
f" AS pct_xff, "
|
||||
# ── Détails Sec-CH-UA ──
|
||||
f" anyIf(header_sec_ch_ua, header_sec_ch_ua != '') AS sec_ch_ua_sample, "
|
||||
f" anyIf(header_sec_ch_ua_platform, header_sec_ch_ua_platform != '') "
|
||||
f" AS platform_sample, "
|
||||
f" anyIf(header_sec_ch_ua_mobile, header_sec_ch_ua_mobile != '') "
|
||||
f" AS mobile_sample, "
|
||||
# ── Accept-Encoding dominant ──
|
||||
f" topK(1)(header_accept_encoding)[1] AS accept_enc_main, "
|
||||
# ── Lookup dictionnaire ──
|
||||
f" dictGetOrDefault('{_DB}.dict_browser_ja4', 'browser_family', "
|
||||
f" tuple(ja4), '') AS dict_family "
|
||||
# ── Source ──
|
||||
f"FROM {_DB_LOGS}.http_logs "
|
||||
"WHERE ja4 != '' AND log_date >= today() - {days:UInt32} "
|
||||
"GROUP BY ja4 "
|
||||
"HAVING count() >= {min_hits:UInt32} "
|
||||
"ORDER BY total_hits DESC "
|
||||
"LIMIT {lim:UInt32}",
|
||||
{"days": days, "min_hits": min_hits, "lim": limit},
|
||||
)
|
||||
except Exception as exc:
|
||||
logger.exception("fingerprint-discovery query failed")
|
||||
raise HTTPException(status_code=500, detail=str(exc))
|
||||
|
||||
# ── Regroupement par famille navigateur côté Python ──
|
||||
groups: dict[str, dict[str, Any]] = {}
|
||||
for p in profiles:
|
||||
# Famille prioritaire : dict > UA
|
||||
family = p.get("dict_family") or p.get("ua_family") or "Inconnu"
|
||||
if family not in groups:
|
||||
groups[family] = {
|
||||
"family": family,
|
||||
"ja4_count": 0,
|
||||
"total_hits": 0,
|
||||
"unique_ips": 0,
|
||||
"has_h2": False,
|
||||
"has_sec_ch_ua": False,
|
||||
"has_sec_fetch": False,
|
||||
}
|
||||
g = groups[family]
|
||||
g["ja4_count"] += 1
|
||||
g["total_hits"] += p.get("total_hits", 0)
|
||||
g["unique_ips"] += p.get("unique_ips", 0)
|
||||
if p.get("h2_fp"):
|
||||
g["has_h2"] = True
|
||||
if (p.get("pct_sec_ch_ua") or 0) > 50:
|
||||
g["has_sec_ch_ua"] = True
|
||||
if (p.get("pct_sec_fetch") or 0) > 50:
|
||||
g["has_sec_fetch"] = True
|
||||
|
||||
groups_sorted = sorted(
|
||||
groups.values(), key=lambda g: g["total_hits"], reverse=True
|
||||
)
|
||||
|
||||
return {
|
||||
"profiles": profiles,
|
||||
"groups": groups_sorted,
|
||||
"meta": {
|
||||
"total_ja4": len(profiles),
|
||||
"total_groups": len(groups_sorted),
|
||||
"days": days,
|
||||
"min_hits": min_hits,
|
||||
},
|
||||
}
|
||||
|
||||
@ -96,3 +96,8 @@ async def health_page(request: Request):
|
||||
@router.get("/browsers")
|
||||
async def browsers_page(request: Request):
|
||||
return templates.TemplateResponse("browsers.html", _ctx(request, "browsers"))
|
||||
|
||||
|
||||
@router.get("/fingerprints")
|
||||
async def fingerprints_page(request: Request):
|
||||
return templates.TemplateResponse("fingerprints.html", _ctx(request, "fingerprints"))
|
||||
|
||||
@ -163,6 +163,10 @@
|
||||
<svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
|
||||
<span class="nav-text">Navigateurs</span>
|
||||
</a>
|
||||
<a href="/fingerprints" class="nav-item {% if active_page == 'fingerprints' %}active{% endif %}" title="Découverte de fingerprints (extraction DB)">
|
||||
<svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
|
||||
<span class="nav-text">Découverte</span>
|
||||
</a>
|
||||
|
||||
<div class="nav-group-title">Investigation</div>
|
||||
<a href="/traffic" class="nav-item {% if active_page == 'traffic' %}active{% endif %}" title="Logs HTTP bruts">
|
||||
|
||||
398
services/dashboard/backend/templates/fingerprints.html
Normal file
398
services/dashboard/backend/templates/fingerprints.html
Normal file
@ -0,0 +1,398 @@
|
||||
{% extends "base.html" %}
|
||||
{% block page_title %}Découverte de fingerprints{% endblock %}
|
||||
{% block content %}
|
||||
<div class="p-4 lg:p-6 space-y-4 max-w-[1920px] mx-auto">
|
||||
|
||||
<!-- ═══ Header + KPIs ═══ -->
|
||||
<div class="flex flex-wrap items-center gap-4 mb-2">
|
||||
<h1 class="text-xl font-bold text-white flex items-center gap-2">
|
||||
<svg class="w-6 h-6 text-cyan-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
|
||||
Découverte de fingerprints
|
||||
</h1>
|
||||
<div class="ml-auto flex items-center gap-3">
|
||||
<div class="text-center px-3">
|
||||
<div class="text-2xl font-bold text-cyan-400" id="kpi-ja4">—</div>
|
||||
<div class="text-[10px] text-gray-500 uppercase tracking-wider">JA4 distincts</div>
|
||||
</div>
|
||||
<div class="text-center px-3 border-l border-gray-700">
|
||||
<div class="text-2xl font-bold text-green-400" id="kpi-groups">—</div>
|
||||
<div class="text-[10px] text-gray-500 uppercase tracking-wider">Familles</div>
|
||||
</div>
|
||||
<div class="text-center px-3 border-l border-gray-700">
|
||||
<div class="text-2xl font-bold text-purple-400" id="kpi-h2">—</div>
|
||||
<div class="text-[10px] text-gray-500 uppercase tracking-wider">Avec H2</div>
|
||||
</div>
|
||||
<div class="text-center px-3 border-l border-gray-700">
|
||||
<div class="text-2xl font-bold text-yellow-400" id="kpi-hits">—</div>
|
||||
<div class="text-[10px] text-gray-500 uppercase tracking-wider">Requêtes</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ═══ Filtres ═══ -->
|
||||
<div class="bg-gray-800/60 rounded-lg p-3 flex flex-wrap items-center gap-3">
|
||||
<label class="text-xs text-gray-400">Période</label>
|
||||
<select id="fil-days" class="bg-gray-700 text-white text-xs rounded px-2 py-1">
|
||||
<option value="1">24h</option>
|
||||
<option value="3">3 jours</option>
|
||||
<option value="7" selected>7 jours</option>
|
||||
<option value="14">14 jours</option>
|
||||
<option value="30">30 jours</option>
|
||||
</select>
|
||||
<label class="text-xs text-gray-400">Min hits</label>
|
||||
<input id="fil-min" type="number" value="10" min="1" max="100000"
|
||||
class="bg-gray-700 text-white text-xs rounded px-2 py-1 w-20">
|
||||
<label class="text-xs text-gray-400">Famille</label>
|
||||
<select id="fil-family" class="bg-gray-700 text-white text-xs rounded px-2 py-1">
|
||||
<option value="">Toutes</option>
|
||||
</select>
|
||||
<input id="fil-search" type="text" placeholder="Rechercher JA4 / UA…"
|
||||
class="bg-gray-700 text-white text-xs rounded px-2 py-1 flex-1 min-w-[180px]">
|
||||
<button onclick="loadData()" class="bg-cyan-600 hover:bg-cyan-500 text-white text-xs rounded px-3 py-1 font-semibold">
|
||||
Actualiser
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- ═══ Row 1 : Répartition par famille (chart + table) ═══ -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
|
||||
<div class="bg-gray-800/60 rounded-lg p-4">
|
||||
<h2 class="text-sm font-semibold text-gray-300 mb-3">Répartition par famille</h2>
|
||||
<canvas id="chart-families" height="260"></canvas>
|
||||
</div>
|
||||
<div class="lg:col-span-2 bg-gray-800/60 rounded-lg p-4">
|
||||
<h2 class="text-sm font-semibold text-gray-300 mb-3">Résumé par groupe</h2>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-xs text-left">
|
||||
<thead class="text-gray-500 uppercase border-b border-gray-700">
|
||||
<tr>
|
||||
<th class="px-2 py-1">Famille</th>
|
||||
<th class="px-2 py-1 text-right">JA4</th>
|
||||
<th class="px-2 py-1 text-right">Hits</th>
|
||||
<th class="px-2 py-1 text-right">IPs</th>
|
||||
<th class="px-2 py-1 text-center">H2</th>
|
||||
<th class="px-2 py-1 text-center">Sec-CH-UA</th>
|
||||
<th class="px-2 py-1 text-center">Sec-Fetch</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="groups-body"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ═══ Row 2 : Signaux HTTP headers (chart) ═══ -->
|
||||
<div class="bg-gray-800/60 rounded-lg p-4">
|
||||
<h2 class="text-sm font-semibold text-gray-300 mb-3">Présence des headers HTTP par JA4 (top 50)</h2>
|
||||
<canvas id="chart-headers" height="100"></canvas>
|
||||
</div>
|
||||
|
||||
<!-- ═══ Row 3 : Table principale des profils ═══ -->
|
||||
<div class="bg-gray-800/60 rounded-lg p-4">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<h2 class="text-sm font-semibold text-gray-300">Profils JA4 détaillés</h2>
|
||||
<span class="text-xs text-gray-500" id="profile-count">—</span>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-xs text-left">
|
||||
<thead class="text-gray-500 uppercase border-b border-gray-700 sticky top-0 bg-gray-800">
|
||||
<tr>
|
||||
<th class="px-2 py-1 cursor-pointer hover:text-white" onclick="sortBy('ja4')">JA4</th>
|
||||
<th class="px-2 py-1 cursor-pointer hover:text-white" onclick="sortBy('ua_family')">Famille</th>
|
||||
<th class="px-2 py-1 text-right cursor-pointer hover:text-white" onclick="sortBy('total_hits')">Hits</th>
|
||||
<th class="px-2 py-1 text-right cursor-pointer hover:text-white" onclick="sortBy('unique_ips')">IPs</th>
|
||||
<th class="px-2 py-1 text-right" title="Distinct User-Agents">UAs</th>
|
||||
<th class="px-2 py-1">TLS</th>
|
||||
<th class="px-2 py-1 text-center" title="Sec-CH-UA %">CH-UA</th>
|
||||
<th class="px-2 py-1 text-center" title="Sec-Fetch %">Fetch</th>
|
||||
<th class="px-2 py-1 text-center" title="Accept-Language %">Lang</th>
|
||||
<th class="px-2 py-1 text-center" title="Brotli %">Br</th>
|
||||
<th class="px-2 py-1 text-center" title="Zstd %">Zstd</th>
|
||||
<th class="px-2 py-1">H2 FP</th>
|
||||
<th class="px-2 py-1">H2 WU</th>
|
||||
<th class="px-2 py-1">Pseudo</th>
|
||||
<th class="px-2 py-1" title="Famille dictionnaire">Dict</th>
|
||||
<th class="px-2 py-1">UA principal</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="profiles-body"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ═══ Row 4 : Détail expandable (caché par défaut) ═══ -->
|
||||
<div id="detail-panel" class="bg-gray-800/60 rounded-lg p-4 hidden">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<h2 class="text-sm font-semibold text-gray-300">Détail — <span id="detail-ja4" class="text-cyan-400 font-mono"></span></h2>
|
||||
<button onclick="closeDetail()" class="text-gray-500 hover:text-white text-xs">✕ Fermer</button>
|
||||
</div>
|
||||
<div id="detail-content" class="grid grid-cols-1 md:grid-cols-2 gap-4 text-xs"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js@4/dist/chart.umd.min.js"></script>
|
||||
<script>
|
||||
const FAMILY_COLORS = {
|
||||
Chrome: '#4285F4', Edge: '#0078D7', Opera: '#FF1B2D',
|
||||
Firefox: '#FF7139', Safari: '#000000', Bot: '#EF4444',
|
||||
Vide: '#6B7280', Autre: '#9CA3AF', Inconnu: '#6B7280'
|
||||
};
|
||||
|
||||
let allProfiles = [];
|
||||
let allGroups = [];
|
||||
let currentSort = { col: 'total_hits', asc: false };
|
||||
let familiesChart = null;
|
||||
let headersChart = null;
|
||||
|
||||
function esc(s) { if (!s) return ''; const d = document.createElement('div'); d.textContent = s; return d.innerHTML; }
|
||||
function fmt(n) { return n >= 1e6 ? (n/1e6).toFixed(1)+'M' : n >= 1e3 ? (n/1e3).toFixed(1)+'K' : String(n); }
|
||||
function pctBadge(v) {
|
||||
if (v == null) return '<span class="text-gray-600">—</span>';
|
||||
const c = v > 80 ? 'text-green-400' : v > 40 ? 'text-yellow-400' : v > 0 ? 'text-orange-400' : 'text-gray-600';
|
||||
return `<span class="${c}">${v}%</span>`;
|
||||
}
|
||||
function familyBadge(f) {
|
||||
const c = FAMILY_COLORS[f] || '#6B7280';
|
||||
return `<span class="inline-block px-1.5 py-0.5 rounded text-[10px] font-semibold" style="background:${c}22;color:${c};border:1px solid ${c}44">${esc(f)}</span>`;
|
||||
}
|
||||
|
||||
async function loadData() {
|
||||
const days = document.getElementById('fil-days').value;
|
||||
const minHits = document.getElementById('fil-min').value;
|
||||
try {
|
||||
const r = await fetch(`/api/fingerprint-discovery?days=${days}&min_hits=${minHits}&limit=500`);
|
||||
if (!r.ok) throw new Error(r.statusText);
|
||||
const data = await r.json();
|
||||
allProfiles = data.profiles || [];
|
||||
allGroups = data.groups || [];
|
||||
|
||||
document.getElementById('kpi-ja4').textContent = data.meta?.total_ja4 ?? '—';
|
||||
document.getElementById('kpi-groups').textContent = data.meta?.total_groups ?? '—';
|
||||
document.getElementById('kpi-h2').textContent = allProfiles.filter(p => p.h2_fp).length;
|
||||
document.getElementById('kpi-hits').textContent = fmt(allProfiles.reduce((s,p) => s + (p.total_hits||0), 0));
|
||||
|
||||
populateFamilyFilter();
|
||||
renderGroups();
|
||||
renderFamiliesChart();
|
||||
renderHeadersChart();
|
||||
renderProfiles();
|
||||
} catch(e) {
|
||||
console.error('Discovery load failed', e);
|
||||
}
|
||||
}
|
||||
|
||||
function populateFamilyFilter() {
|
||||
const sel = document.getElementById('fil-family');
|
||||
const cur = sel.value;
|
||||
const families = [...new Set(allProfiles.map(p => p.dict_family || p.ua_family || 'Inconnu'))].sort();
|
||||
sel.innerHTML = '<option value="">Toutes</option>' + families.map(f => `<option value="${esc(f)}">${esc(f)}</option>`).join('');
|
||||
sel.value = cur;
|
||||
}
|
||||
|
||||
function getFiltered() {
|
||||
const fam = document.getElementById('fil-family').value;
|
||||
const q = (document.getElementById('fil-search').value || '').toLowerCase();
|
||||
return allProfiles.filter(p => {
|
||||
const family = p.dict_family || p.ua_family || 'Inconnu';
|
||||
if (fam && family !== fam) return false;
|
||||
if (q) {
|
||||
const haystack = [p.ja4, family, ...(p.ua_samples || [])].join(' ').toLowerCase();
|
||||
if (!haystack.includes(q)) return false;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
}
|
||||
|
||||
function renderGroups() {
|
||||
const tb = document.getElementById('groups-body');
|
||||
tb.innerHTML = allGroups.map(g => `<tr class="border-b border-gray-700/50 hover:bg-gray-700/30">
|
||||
<td class="px-2 py-1">${familyBadge(g.family)}</td>
|
||||
<td class="px-2 py-1 text-right font-mono">${g.ja4_count}</td>
|
||||
<td class="px-2 py-1 text-right font-mono">${fmt(g.total_hits)}</td>
|
||||
<td class="px-2 py-1 text-right font-mono">${fmt(g.unique_ips)}</td>
|
||||
<td class="px-2 py-1 text-center">${g.has_h2 ? '✓' : '—'}</td>
|
||||
<td class="px-2 py-1 text-center">${g.has_sec_ch_ua ? '✓' : '—'}</td>
|
||||
<td class="px-2 py-1 text-center">${g.has_sec_fetch ? '✓' : '—'}</td>
|
||||
</tr>`).join('');
|
||||
}
|
||||
|
||||
function renderFamiliesChart() {
|
||||
const labels = allGroups.map(g => g.family);
|
||||
const values = allGroups.map(g => g.ja4_count);
|
||||
const colors = labels.map(l => FAMILY_COLORS[l] || '#6B7280');
|
||||
|
||||
if (familiesChart) familiesChart.destroy();
|
||||
familiesChart = new Chart(document.getElementById('chart-families'), {
|
||||
type: 'doughnut',
|
||||
data: { labels, datasets: [{ data: values, backgroundColor: colors, borderWidth: 0 }] },
|
||||
options: {
|
||||
responsive: true,
|
||||
plugins: {
|
||||
legend: { position: 'right', labels: { color: '#9CA3AF', font: { size: 10 }, padding: 8 } }
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function renderHeadersChart() {
|
||||
const filtered = getFiltered().slice(0, 50);
|
||||
const labels = filtered.map(p => p.ja4?.substring(0,16) || '?');
|
||||
|
||||
const ds = (label, key, color) => ({
|
||||
label, data: filtered.map(p => p[key] || 0),
|
||||
backgroundColor: color, borderWidth: 0, barPercentage: 0.8
|
||||
});
|
||||
|
||||
if (headersChart) headersChart.destroy();
|
||||
headersChart = new Chart(document.getElementById('chart-headers'), {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels,
|
||||
datasets: [
|
||||
ds('Sec-CH-UA', 'pct_sec_ch_ua', '#4285F488'),
|
||||
ds('Sec-Fetch', 'pct_sec_fetch', '#FF713988'),
|
||||
ds('Accept-Language', 'pct_accept_lang', '#34D39988'),
|
||||
ds('Brotli', 'pct_brotli', '#A78BFA88'),
|
||||
ds('Zstd', 'pct_zstd', '#FBBF2488'),
|
||||
]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
scales: {
|
||||
x: { ticks: { color: '#6B7280', font: { size: 8 }, maxRotation: 45 }, grid: { display: false } },
|
||||
y: { min: 0, max: 100, ticks: { color: '#6B7280', callback: v => v+'%' }, grid: { color: '#374151' } }
|
||||
},
|
||||
plugins: {
|
||||
legend: { labels: { color: '#9CA3AF', font: { size: 10 }, padding: 8 } }
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function sortBy(col) {
|
||||
if (currentSort.col === col) currentSort.asc = !currentSort.asc;
|
||||
else { currentSort.col = col; currentSort.asc = false; }
|
||||
renderProfiles();
|
||||
}
|
||||
|
||||
function renderProfiles() {
|
||||
let rows = getFiltered();
|
||||
const { col, asc } = currentSort;
|
||||
rows.sort((a, b) => {
|
||||
let va = a[col], vb = b[col];
|
||||
if (typeof va === 'string') return asc ? va.localeCompare(vb) : vb.localeCompare(va);
|
||||
return asc ? (va||0) - (vb||0) : (vb||0) - (va||0);
|
||||
});
|
||||
|
||||
document.getElementById('profile-count').textContent = `${rows.length} profils`;
|
||||
const tb = document.getElementById('profiles-body');
|
||||
tb.innerHTML = rows.map(p => {
|
||||
const family = p.dict_family || p.ua_family || 'Inconnu';
|
||||
const ua0 = (p.ua_samples && p.ua_samples[0]) || '';
|
||||
const uaShort = ua0.length > 60 ? ua0.substring(0,57)+'…' : ua0;
|
||||
return `<tr class="border-b border-gray-700/50 hover:bg-gray-700/30 cursor-pointer" onclick="showDetail('${esc(p.ja4)}')">
|
||||
<td class="px-2 py-1 font-mono text-cyan-400 whitespace-nowrap"><a href="/ja4/${esc(p.ja4)}" class="hover:underline" onclick="event.stopPropagation()">${esc(p.ja4?.substring(0,24))}</a></td>
|
||||
<td class="px-2 py-1">${familyBadge(family)}</td>
|
||||
<td class="px-2 py-1 text-right font-mono">${fmt(p.total_hits)}</td>
|
||||
<td class="px-2 py-1 text-right font-mono">${fmt(p.unique_ips)}</td>
|
||||
<td class="px-2 py-1 text-right font-mono text-gray-400">${p.distinct_uas || '—'}</td>
|
||||
<td class="px-2 py-1 text-gray-400 whitespace-nowrap">${esc(p.tls_version||'')} ${p.tls_alpn ? '<span class="text-green-400 text-[10px]">'+esc(p.tls_alpn)+'</span>' : ''}</td>
|
||||
<td class="px-2 py-1 text-center">${pctBadge(p.pct_sec_ch_ua)}</td>
|
||||
<td class="px-2 py-1 text-center">${pctBadge(p.pct_sec_fetch)}</td>
|
||||
<td class="px-2 py-1 text-center">${pctBadge(p.pct_accept_lang)}</td>
|
||||
<td class="px-2 py-1 text-center">${pctBadge(p.pct_brotli)}</td>
|
||||
<td class="px-2 py-1 text-center">${pctBadge(p.pct_zstd)}</td>
|
||||
<td class="px-2 py-1 font-mono text-[10px] text-gray-400 max-w-[120px] truncate" title="${esc(p.h2_fp)}">${esc(p.h2_fp || '—')}</td>
|
||||
<td class="px-2 py-1 font-mono text-gray-400">${p.h2_wu || '—'}</td>
|
||||
<td class="px-2 py-1 font-mono text-gray-400">${esc(p.h2_pseudo || '—')}</td>
|
||||
<td class="px-2 py-1">${p.dict_family ? familyBadge(p.dict_family) : '<span class="text-gray-600">—</span>'}</td>
|
||||
<td class="px-2 py-1 text-gray-400 max-w-[200px] truncate" title="${esc(ua0)}">${esc(uaShort)}</td>
|
||||
</tr>`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
function showDetail(ja4) {
|
||||
const p = allProfiles.find(x => x.ja4 === ja4);
|
||||
if (!p) return;
|
||||
const panel = document.getElementById('detail-panel');
|
||||
const family = p.dict_family || p.ua_family || 'Inconnu';
|
||||
document.getElementById('detail-ja4').textContent = ja4;
|
||||
|
||||
let html = '';
|
||||
// Colonne 1 : Identité
|
||||
html += '<div class="space-y-2">';
|
||||
html += `<div class="text-gray-400"><strong class="text-white">Famille :</strong> ${familyBadge(family)}</div>`;
|
||||
html += `<div class="text-gray-400"><strong class="text-white">Dict :</strong> ${p.dict_family ? familyBadge(p.dict_family) : 'Non référencé'}</div>`;
|
||||
html += `<div class="text-gray-400"><strong class="text-white">Hits :</strong> ${fmt(p.total_hits)} — <strong class="text-white">IPs :</strong> ${fmt(p.unique_ips)}</div>`;
|
||||
html += `<div class="text-gray-400"><strong class="text-white">TLS :</strong> ${esc(p.tls_version||'—')} — ALPN: ${esc(p.tls_alpn||'—')}</div>`;
|
||||
if (p.sec_ch_ua_sample) html += `<div class="text-gray-400"><strong class="text-white">Sec-CH-UA :</strong> <span class="font-mono text-[10px]">${esc(p.sec_ch_ua_sample)}</span></div>`;
|
||||
if (p.platform_sample) html += `<div class="text-gray-400"><strong class="text-white">Platform :</strong> ${esc(p.platform_sample)}</div>`;
|
||||
if (p.accept_enc_main) html += `<div class="text-gray-400"><strong class="text-white">Accept-Encoding :</strong> <span class="font-mono text-[10px]">${esc(p.accept_enc_main)}</span></div>`;
|
||||
|
||||
html += '<div class="text-gray-400"><strong class="text-white">User-Agents :</strong></div>';
|
||||
html += '<ul class="ml-3 text-[10px] text-gray-500 font-mono space-y-0.5">';
|
||||
(p.ua_samples || []).forEach(ua => { html += `<li class="truncate" title="${esc(ua)}">${esc(ua)}</li>`; });
|
||||
html += '</ul>';
|
||||
html += '</div>';
|
||||
|
||||
// Colonne 2 : H2 + Headers
|
||||
html += '<div class="space-y-2">';
|
||||
html += '<div class="text-gray-400"><strong class="text-white">HTTP/2</strong></div>';
|
||||
html += `<div class="ml-3 text-gray-400 text-[10px] font-mono">`;
|
||||
html += `FP: ${esc(p.h2_fp || '—')}<br>`;
|
||||
html += `Settings: ${esc(p.h2_settings || '—')}<br>`;
|
||||
html += `Window Update: ${p.h2_wu || '—'}<br>`;
|
||||
html += `Pseudo-header order: ${esc(p.h2_pseudo || '—')}`;
|
||||
html += '</div>';
|
||||
|
||||
html += '<div class="text-gray-400 mt-2"><strong class="text-white">Headers (taux de présence)</strong></div>';
|
||||
html += '<div class="ml-3 grid grid-cols-2 gap-x-4 gap-y-0.5 text-[10px]">';
|
||||
const hdrs = [
|
||||
['Sec-CH-UA', p.pct_sec_ch_ua], ['Sec-Fetch', p.pct_sec_fetch],
|
||||
['Accept-Language', p.pct_accept_lang], ['Gzip', p.pct_gzip],
|
||||
['Brotli', p.pct_brotli], ['Zstd', p.pct_zstd],
|
||||
['X-Forwarded-For', p.pct_xff],
|
||||
];
|
||||
hdrs.forEach(([l,v]) => { html += `<span class="text-gray-500">${l}</span> ${pctBadge(v)}`; });
|
||||
html += '</div>';
|
||||
|
||||
// Bouton promouvoir si H2 data disponible
|
||||
if (p.h2_fp) {
|
||||
html += `<div class="mt-3 pt-2 border-t border-gray-700">`;
|
||||
html += `<button onclick="promoteH2('${esc(p.h2_fp)}','${esc(family)}')" class="bg-purple-600 hover:bg-purple-500 text-white text-xs rounded px-3 py-1 font-semibold">`;
|
||||
html += `↑ Promouvoir en signature H2</button>`;
|
||||
html += `</div>`;
|
||||
}
|
||||
html += '</div>';
|
||||
|
||||
document.getElementById('detail-content').innerHTML = html;
|
||||
panel.classList.remove('hidden');
|
||||
panel.scrollIntoView({ behavior: 'smooth' });
|
||||
}
|
||||
|
||||
function closeDetail() {
|
||||
document.getElementById('detail-panel').classList.add('hidden');
|
||||
}
|
||||
|
||||
async function promoteH2(fingerprint, family) {
|
||||
if (!confirm(`Ajouter "${fingerprint}" comme signature ${family} ?`)) return;
|
||||
try {
|
||||
const r = await fetch('/api/browser-signatures/entries', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ h2_fingerprint: fingerprint, browser_family: family, confidence: 0.8, notes: 'Découvert via fingerprint-discovery' }),
|
||||
});
|
||||
if (!r.ok) { const e = await r.json(); alert(e.detail || 'Erreur'); return; }
|
||||
alert('Signature ajoutée ! Visible dans /browsers');
|
||||
} catch(e) {
|
||||
alert('Erreur réseau : ' + e.message);
|
||||
}
|
||||
}
|
||||
|
||||
// Filtres en temps réel
|
||||
document.getElementById('fil-family').addEventListener('change', () => { renderProfiles(); renderHeadersChart(); });
|
||||
document.getElementById('fil-search').addEventListener('input', () => { renderProfiles(); renderHeadersChart(); });
|
||||
|
||||
loadData();
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user