6babc55e3e
- Fix doc tooltips: split CSS into <style type='text/tailwindcss'> for @apply directives + raw CSS for reliable doc panel rendering - Convert doc panels from click-toggle to hover-based infobulles with arrow pointer, fade-in animation, and auto-dismiss on mobile - Replace '?' icons with 'ⓘ' across all 11 templates (51 tooltips) - Full-width layout: reduce padding on mobile (px-3), scale up on desktop (lg:px-5, xl:px-6) for maximum screen utilization - Auto-collapse sidebar on narrow screens (<1024px) - Keyboard shortcuts: Alt+1–9 for page navigation, Alt+B toggle sidebar - Add LEGITIMATE_BROWSER filter button to detections page - Sticky header with stronger blur (backdrop-blur-md) - All 46 routes pass tests Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
210 lines
13 KiB
HTML
210 lines
13 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}JA4 SOC — Détections{% endblock %}
|
|
{% block page_title %}
|
|
Détections d'anomalies
|
|
<span class="relative inline-block ml-1"><button onclick="docToggle(this)" class="doc-btn">ⓘ</button><div class="doc-panel">
|
|
<h4>Table des détections</h4>
|
|
<p>Toutes les sessions classées comme anomaliques par l'ensemble ML triple-voix (EIF + Autoencoder + XGBoost). Inclut les bots connus identifiés par dictionnaire.</p>
|
|
<p><strong>Workflow :</strong> Filtrez par threat level → triez par score → cliquez sur une IP pour l'investiguer → classifiez via le bouton rapide.</p>
|
|
<p class="doc-source">Source : ml_detected_anomalies (30 derniers jours)</p>
|
|
</div></span>
|
|
{% endblock %}
|
|
{% block content %}
|
|
<div class="space-y-3">
|
|
<!-- Summary charts -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-3">
|
|
<div class="section-card">
|
|
<div class="section-header"><span class="section-title">Par threat level
|
|
<span class="relative inline-block"><button onclick="docToggle(this)" class="doc-btn">ⓘ</button><div class="doc-panel">
|
|
<h4>Répartition des menaces</h4>
|
|
<p>CRITICAL = score très élevé + multi-signal. HIGH = score au-dessus du seuil. KNOWN_BOT = identifié par dictionnaire. Cliquez sur un segment pour filtrer.</p>
|
|
<p class="doc-source">Source : ml_detected_anomalies</p>
|
|
</div></span>
|
|
</span></div>
|
|
<div class="p-3"><div id="det-threat-chart" style="height:140px"></div></div>
|
|
</div>
|
|
<div class="section-card">
|
|
<div class="section-header"><span class="section-title">Top raisons
|
|
<span class="relative inline-block"><button onclick="docToggle(this)" class="doc-btn">ⓘ</button><div class="doc-panel">
|
|
<h4>Raisons de détection</h4>
|
|
<p>Motifs de déclenchement : score IF élevé, bot connu, Anubis DENY, etc. Aide à comprendre pourquoi une IP est détectée.</p>
|
|
<p class="doc-source">Source : ml_detected_anomalies.reason</p>
|
|
</div></span>
|
|
</span></div>
|
|
<div class="p-3"><div id="det-reason-chart" style="height:140px"></div></div>
|
|
</div>
|
|
<div class="section-card">
|
|
<div class="section-header"><span class="section-title">Top ASN détectés
|
|
<span class="relative inline-block"><button onclick="docToggle(this)" class="doc-btn">ⓘ</button><div class="doc-panel">
|
|
<h4>ASN des détections</h4>
|
|
<p>Autonomous Systems d'où proviennent les menaces. Les hébergeurs (OVH, Hetzner, DigitalOcean) sont souvent en tête car utilisés par les botnets.</p>
|
|
<p class="doc-source">Source : ml_detected_anomalies.asn_org</p>
|
|
</div></span>
|
|
</span></div>
|
|
<div class="p-3"><div id="det-asn-chart" style="height:140px"></div></div>
|
|
</div>
|
|
</div>
|
|
<!-- Filters -->
|
|
<div class="flex items-center gap-3 flex-wrap">
|
|
<div class="flex gap-1.5" id="threat-filters">
|
|
<button class="filter-btn active" data-filter="">Tous</button>
|
|
<button class="filter-btn" data-filter="CRITICAL">Critical</button>
|
|
<button class="filter-btn" data-filter="HIGH">High</button>
|
|
<button class="filter-btn" data-filter="MEDIUM">Medium</button>
|
|
<button class="filter-btn" data-filter="KNOWN_BOT">Known Bot</button>
|
|
<button class="filter-btn" data-filter="ANUBIS_DENY">Anubis</button>
|
|
<button class="filter-btn" data-filter="LEGITIMATE_BROWSER">Browser</button>
|
|
</div>
|
|
<div class="flex-1"></div>
|
|
<input type="text" id="search-input" placeholder="Rechercher IP, host…"
|
|
class="px-3 py-1.5 bg-gray-900 border border-gray-800 rounded-lg text-sm text-gray-300 w-64 focus:border-brand-500 focus:outline-none">
|
|
</div>
|
|
<div id="active-filters" class="flex gap-2 flex-wrap"></div>
|
|
<!-- Table -->
|
|
<div class="section-card overflow-hidden">
|
|
<div class="overflow-x-auto" style="max-height:calc(100vh - 340px); overflow-y:auto">
|
|
<table class="data-table" id="det-table">
|
|
<thead><tr>
|
|
<th style="width:16px"></th>
|
|
<th class="cursor-pointer" data-sort="detected_at">Date ↕</th>
|
|
<th>IP</th>
|
|
<th class="cursor-pointer" data-sort="anomaly_score">Score ↕</th>
|
|
<th>Raw</th>
|
|
<th>Threat</th>
|
|
<th>JA4</th>
|
|
<th>Host</th>
|
|
<th class="cursor-pointer" data-sort="hits">Hits ↕</th>
|
|
<th>ASN</th>
|
|
<th>Pays</th>
|
|
<th>Bot</th>
|
|
<th>Réc.</th>
|
|
</tr></thead>
|
|
<tbody id="detections-body"></tbody>
|
|
</table>
|
|
</div>
|
|
<div class="flex items-center justify-between px-4 py-2.5 border-t border-gray-800">
|
|
<span class="text-xs text-gray-500" id="det-info">—</span>
|
|
<div class="flex gap-2">
|
|
<button id="prev-btn" class="px-3 py-1 bg-gray-800 rounded text-xs text-gray-400 hover:text-white disabled:opacity-30">← Précédent</button>
|
|
<button id="next-btn" class="px-3 py-1 bg-gray-800 rounded text-xs text-gray-400 hover:text-white disabled:opacity-30">Suivant →</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
{% block scripts %}
|
|
<script>
|
|
const THREAT_COLORS = {CRITICAL:'#ef4444',HIGH:'#f97316',MEDIUM:'#eab308',NORMAL:'#6b7280',KNOWN_BOT:'#3b82f6',ANUBIS_DENY:'#dc2626'};
|
|
let dPage=1, dSort='detected_at', dOrder='DESC', dThreat='', dSearch='';
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
let dASN=urlParams.get('asn_org')||'', dCountry=urlParams.get('country_code')||'',
|
|
dJA4=urlParams.get('ja4')||'', dBotName=urlParams.get('bot_name')||'';
|
|
if(urlParams.get('threat_level')) { dThreat=urlParams.get('threat_level'); document.querySelectorAll('[data-filter]').forEach(b=>{b.classList.remove('active');if(b.dataset.filter===dThreat)b.classList.add('active');}); }
|
|
if(urlParams.get('search')) dSearch=urlParams.get('search');
|
|
|
|
function renderActiveFilters() {
|
|
const el = document.getElementById('active-filters');
|
|
const filters = [];
|
|
if(dASN) filters.push({label:'ASN: '+dASN, clear:()=>{dASN='';renderActiveFilters();loadDetections();}});
|
|
if(dCountry) filters.push({label:'Pays: '+dCountry, clear:()=>{dCountry='';renderActiveFilters();loadDetections();}});
|
|
if(dJA4) filters.push({label:'JA4: '+dJA4.substring(0,20), clear:()=>{dJA4='';renderActiveFilters();loadDetections();}});
|
|
if(dBotName) filters.push({label:'Bot: '+dBotName, clear:()=>{dBotName='';renderActiveFilters();loadDetections();}});
|
|
el.innerHTML = filters.map((f,i) =>
|
|
`<span class="inline-flex items-center gap-1 px-2 py-1 bg-brand-500/20 text-brand-400 rounded-lg text-xs">
|
|
${escapeHtml(f.label)} <button onclick="window._cf${i}()" class="hover:text-white">✕</button></span>`).join('');
|
|
filters.forEach((f,i) => { window['_cf'+i] = f.clear; });
|
|
}
|
|
|
|
async function loadDetections() {
|
|
const params = new URLSearchParams({page:dPage,per_page:50,sort:dSort,order:dOrder});
|
|
if(dThreat) params.set('threat_level',dThreat);
|
|
if(dSearch) params.set('search',dSearch);
|
|
if(dASN) params.set('asn_org',dASN);
|
|
if(dCountry) params.set('country_code',dCountry);
|
|
if(dJA4) params.set('ja4',dJA4);
|
|
if(dBotName) params.set('bot_name',dBotName);
|
|
try {
|
|
const r = await fetch('/api/detections?'+params);
|
|
const d = await r.json();
|
|
const tbody = document.getElementById('detections-body');
|
|
tbody.innerHTML = (d.data||[]).map((row, idx) => {
|
|
const ip = String(row.src_ip||'').replace('::ffff:','');
|
|
return `<tr onclick="window.location='/ip/${encodeURIComponent(ip)}'" class="group">
|
|
<td class="text-center"><span class="w-2 h-2 rounded-full inline-block" style="background:${THREAT_COLORS[row.threat_level]||'#6b7280'}"></span></td>
|
|
<td class="text-[11px] whitespace-nowrap text-gray-400">${(row.detected_at||'').substring(0,16)}</td>
|
|
<td class="whitespace-nowrap">${fmtIP(row.src_ip)}</td>
|
|
<td>${fmtScore(row.anomaly_score)}</td>
|
|
<td class="font-mono text-[11px] text-gray-400">${parseFloat(row.raw_anomaly_score||0).toFixed(4)}</td>
|
|
<td>${threatBadge(row.threat_level)}</td>
|
|
<td>${fmtJA4(row.ja4)}</td>
|
|
<td class="text-xs max-w-[120px] truncate" title="${escapeHtml(row.host||'')}">${escapeHtml(row.host||'')}</td>
|
|
<td class="font-mono text-xs">${row.hits||0}</td>
|
|
<td class="text-xs max-w-[120px] truncate">${fmtASN(row.asn_org)}</td>
|
|
<td>${fmtCountry(row.country_code)}</td>
|
|
<td class="text-xs">${row.bot_name ? fmtBotName(row.bot_name) : ''}</td>
|
|
<td class="text-xs text-center">${row.recurrence||0}</td>
|
|
</tr>`;
|
|
}).join('') || '<tr><td colspan="13" class="text-center text-gray-500 py-8">Aucune détection</td></tr>';
|
|
const total = d.total||0;
|
|
document.getElementById('det-info').textContent = `${total.toLocaleString()} résultats — page ${dPage}/${Math.max(1,Math.ceil(total/50))}`;
|
|
document.getElementById('prev-btn').disabled = dPage <= 1;
|
|
document.getElementById('next-btn').disabled = dPage * 50 >= total;
|
|
} catch(e) { console.error(e); }
|
|
}
|
|
|
|
document.getElementById('prev-btn').onclick = () => { if(dPage>1){dPage--;loadDetections();} };
|
|
document.getElementById('next-btn').onclick = () => { dPage++;loadDetections(); };
|
|
document.querySelectorAll('[data-sort]').forEach(th => th.onclick = () => {
|
|
const s = th.dataset.sort;
|
|
if(dSort===s) dOrder = dOrder==='DESC'?'ASC':'DESC'; else { dSort=s; dOrder='DESC'; }
|
|
dPage=1; loadDetections();
|
|
});
|
|
document.querySelectorAll('[data-filter]').forEach(btn => btn.onclick = () => {
|
|
document.querySelectorAll('[data-filter]').forEach(b=>b.classList.remove('active'));
|
|
btn.classList.add('active');
|
|
dThreat = btn.dataset.filter; dPage=1; loadDetections();
|
|
});
|
|
let searchTimeout;
|
|
document.getElementById('search-input').oninput = (e) => {
|
|
clearTimeout(searchTimeout);
|
|
searchTimeout = setTimeout(() => { dSearch=e.target.value; dPage=1; loadDetections(); }, 300);
|
|
};
|
|
loadDetections();
|
|
renderActiveFilters();
|
|
|
|
async function loadDetSummary() {
|
|
try {
|
|
const r = await fetch('/api/detections?per_page=500');
|
|
const d = await r.json();
|
|
const rows = d.data || [];
|
|
const threatCounts={}, reasonCounts={}, asnCounts={};
|
|
rows.forEach(row => {
|
|
threatCounts[row.threat_level] = (threatCounts[row.threat_level]||0)+1;
|
|
if (row.reason) { const short = row.reason.substring(0,40); reasonCounts[short] = (reasonCounts[short]||0)+1; }
|
|
if (row.asn_org) asnCounts[row.asn_org] = (asnCounts[row.asn_org]||0)+1;
|
|
});
|
|
const ch1 = echarts.init(document.getElementById('det-threat-chart'));
|
|
ch1.setOption(ecBase({tooltip:ecTooltip({trigger:'item'}),series:[{type:'pie',radius:['35%','70%'],label:{color:EC_TEXT,fontSize:10},
|
|
data:Object.entries(threatCounts).map(([k,v])=>({name:k,value:v,itemStyle:{color:THREAT_COLORS[k]||'#6b7280'}}))}]}));
|
|
const topReasons = Object.entries(reasonCounts).sort((a,b)=>b[1]-a[1]).slice(0,5);
|
|
if (topReasons.length) {
|
|
const ch2 = echarts.init(document.getElementById('det-reason-chart'));
|
|
ch2.setOption(ecBase({tooltip:ecTooltip({trigger:'axis'}),grid:{left:10,right:40,top:5,bottom:5,containLabel:true},
|
|
yAxis:{type:'category',data:topReasons.map(r=>r[0]).reverse(),axisLabel:{color:EC_TEXT,fontSize:9,width:120,overflow:'truncate'},axisLine:{show:false}},
|
|
xAxis:{type:'value',show:false},
|
|
series:[{type:'bar',data:topReasons.map(r=>r[1]).reverse(),barWidth:'60%',itemStyle:{color:'#6366f1'},label:{show:true,position:'right',color:EC_TEXT,fontSize:10}}]}));
|
|
}
|
|
const topASN = Object.entries(asnCounts).sort((a,b)=>b[1]-a[1]).slice(0,5);
|
|
if (topASN.length) {
|
|
const ch3 = echarts.init(document.getElementById('det-asn-chart'));
|
|
ch3.setOption(ecBase({tooltip:ecTooltip({trigger:'axis'}),grid:{left:10,right:40,top:5,bottom:5,containLabel:true},
|
|
yAxis:{type:'category',data:topASN.map(r=>r[0]).reverse(),axisLabel:{color:EC_TEXT,fontSize:9,width:120,overflow:'truncate'},axisLine:{show:false}},
|
|
xAxis:{type:'value',show:false},
|
|
series:[{type:'bar',data:topASN.map(r=>r[1]).reverse(),barWidth:'60%',itemStyle:{color:'#f97316'},label:{show:true,position:'right',color:EC_TEXT,fontSize:10}}]}));
|
|
}
|
|
} catch(e) { console.error(e); }
|
|
}
|
|
loadDetSummary();
|
|
</script>
|
|
{% endblock %}
|