ja4-platform/services/dashboard/backend/templates/fingerprints.html

{% 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 %}