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
@ -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