Initial release: F2B Control Center v1.0
Fail2Ban + Nginx Proxy Manager dashboard in a single Docker container. Features: - Auto-ban via badbot, http-errors, npm-probe, manual-bans, recidive jails - Web dashboard: live ban grid, log scanner, per-IP access log viewer - iptables-nft banning (DOCKER-USER + INPUT chains) - Optional Cloudflare WAF banning - Optional AbuseIPDB threat scoring - Two-tier IP management: whitelist (trusted) vs exempt (reviewed) - Auto log-file detection via logwatch (no restart needed for new NPM hosts)
This commit is contained in:
479
dashboard/public/index.html
Normal file
479
dashboard/public/index.html
Normal file
@@ -0,0 +1,479 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>F2B</title>
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
||||
<link rel="stylesheet" href="/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="screen">
|
||||
|
||||
<!-- ── BANNER ────────────────────────────────────────────────────── -->
|
||||
<div class="banner-wrap">
|
||||
<div class="banner-sub">FAIL2BAN CONTROL CENTER</div>
|
||||
<div class="banner-hr"></div>
|
||||
</div>
|
||||
|
||||
<!-- ── MAIN LAYOUT: FEED | UNIFIED ─────────────────────────────── -->
|
||||
<div class="main-col">
|
||||
|
||||
<!-- LEFT: LIVE FEED ─────────────────────────────────────────── -->
|
||||
<div class="col-feed">
|
||||
<div class="box feed-col-box">
|
||||
<div class="feed-title">// LIVE BANS</div>
|
||||
<div class="feed-indicator">
|
||||
<span class="status-dot" id="feed-dot"></span>
|
||||
</div>
|
||||
<div class="feed-box" id="feed"></div>
|
||||
<div class="feed-rate">↻ 2s</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- RIGHT: UNIFIED CONTROLS + CARDS ─────────────────────────── -->
|
||||
<div class="col-main">
|
||||
|
||||
<div class="control-bar">
|
||||
|
||||
<!-- Row 1: jail filters + scan controls -->
|
||||
<div class="control-row">
|
||||
<div class="filter-bar" id="jail-filter">
|
||||
<button class="active" data-jail="all">[ALL]</button>
|
||||
<button data-jail="badbot">[BADBOT]</button>
|
||||
<button data-jail="http-errors">[HTTP]</button>
|
||||
<button data-jail="npm-probe">[NPM]</button>
|
||||
<button data-jail="manual-bans">[PRISON]</button>
|
||||
<button data-jail="whitelist">[WHITELIST]</button>
|
||||
<button data-jail="exempt">[EXEMPT]</button>
|
||||
<button data-jail="scan">[SCAN]</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Row 2: scan + action controls -->
|
||||
<div class="control-row control-row-tools">
|
||||
|
||||
<div class="tool-group">
|
||||
<span class="muted tool-label">SCAN</span>
|
||||
<input type="number" id="scan-days" value="3" min="1" max="30" title="Lookback days">
|
||||
<span class="muted">d</span>
|
||||
<input type="number" id="scan-minhits" value="1" min="1" title="Min hits">
|
||||
<span class="muted">hits+</span>
|
||||
<label class="cb-label" title="Exclude previously banned IPs">
|
||||
<input type="checkbox" id="scan-excl-prev"> excl prev
|
||||
</label>
|
||||
<button onclick="refreshScan()">[RUN]</button>
|
||||
</div>
|
||||
|
||||
<div class="tool-group">
|
||||
<span class="muted tool-label">AUTO-BAN</span>
|
||||
<input type="number" id="autoban-threshold" value="75" min="1" max="100" title="AbuseIPDB score threshold">
|
||||
<span class="muted">thr</span>
|
||||
<button class="btn-red" onclick="runAutoBan()">[EXECUTE]</button>
|
||||
</div>
|
||||
|
||||
<div class="tool-group tool-group-right">
|
||||
<input type="text" id="action-ip" placeholder="IP address…" autocomplete="off">
|
||||
<select id="action-select" onchange="toggleNote()">
|
||||
<option value="ban">[ARREST]</option>
|
||||
<option value="unban-all">[PAROLE]</option>
|
||||
<option value="whitelist">[WHITELIST]</option>
|
||||
<option value="search">[SEARCH]</option>
|
||||
</select>
|
||||
<button onclick="executeAction()">[EXECUTE]</button>
|
||||
<button class="btn-amber" onclick="forceAbuseCheck()">[FORCE ABUSE]</button>
|
||||
<button class="btn-red" onclick="purgeLogs()" title="Truncate all nginx proxy log files">[PURGE LOGS]</button>
|
||||
</div>
|
||||
|
||||
<div id="note-wrap" style="display:none; flex: 0 0 100%;">
|
||||
<input type="text" id="action-note" placeholder="Note (optional)…" style="width:100%">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="summary-bar" id="main-summary"> </div>
|
||||
</div>
|
||||
|
||||
<div class="card-grid" id="main-grid"></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="prompt">_ <span class="blink">█</span></div>
|
||||
<footer>F2B | fail2ban control center | :4000</footer>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// ── Utilities ─────────────────────────────────────────────────────
|
||||
const esc = s => String(s)
|
||||
.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>');
|
||||
|
||||
async function api(method, url, body) {
|
||||
const opts = { method, headers: { 'Content-Type': 'application/json' } };
|
||||
if (body) opts.body = JSON.stringify(body);
|
||||
const r = await fetch(url, opts);
|
||||
if (!r.ok) throw new Error(await r.text());
|
||||
return r;
|
||||
}
|
||||
|
||||
// ── Score colour ──────────────────────────────────────────────────
|
||||
function scoreColor(score, jail) {
|
||||
if (jail === 'manual-bans') return '#8B4513';
|
||||
if (jail === 'whitelist') return 'var(--green)';
|
||||
if (jail === 'exempt') return 'var(--dim)';
|
||||
if (score == null) return 'var(--dim)';
|
||||
if (score >= 90) return 'var(--red)';
|
||||
if (score <= 20) return 'var(--green2)';
|
||||
const hue = 60 - ((score - 20) / 70 * 60);
|
||||
return `hsl(${hue},100%,50%)`;
|
||||
}
|
||||
|
||||
// ── Live feed ─────────────────────────────────────────────────────
|
||||
const feedEl = document.getElementById('feed');
|
||||
const feedDot = document.getElementById('feed-dot');
|
||||
const MAX_FEED = 120;
|
||||
|
||||
function setFeedDot(cls) { feedDot.className = 'status-dot ' + cls; }
|
||||
|
||||
function parseBan(line) {
|
||||
const m = line.match(/\[([^\]]+)\]\s+Ban\s+(\d{1,3}(?:\.\d{1,3}){3})/);
|
||||
if (!m) return null;
|
||||
const tsm = line.match(/(\d{2}:\d{2}):\d{2}/);
|
||||
return { jail: m[1], ip: m[2], time: tsm ? tsm[1] : '' };
|
||||
}
|
||||
|
||||
function addToFeed(lines) {
|
||||
lines.forEach(line => {
|
||||
const ban = parseBan(line);
|
||||
if (!ban) return;
|
||||
const el = document.createElement('div');
|
||||
el.className = 'feed-entry';
|
||||
el.innerHTML =
|
||||
`<span class="feed-time">${esc(ban.time)}</span>` +
|
||||
`<span class="feed-ip">${esc(ban.ip)}</span>` +
|
||||
`<span class="feed-jail">${esc(ban.jail)}</span>`;
|
||||
feedEl.insertBefore(el, feedEl.firstChild);
|
||||
});
|
||||
while (feedEl.children.length > MAX_FEED) feedEl.removeChild(feedEl.lastChild);
|
||||
}
|
||||
|
||||
async function initFeed() {
|
||||
try {
|
||||
const { lines } = await (await api('GET', '/api/f2b/init')).json();
|
||||
setFeedDot('ok');
|
||||
addToFeed([...lines].reverse());
|
||||
setInterval(pollFeed, 2000);
|
||||
} catch {
|
||||
setFeedDot('err');
|
||||
setTimeout(initFeed, 4000);
|
||||
}
|
||||
}
|
||||
|
||||
async function pollFeed() {
|
||||
try {
|
||||
const { lines } = await (await api('GET', '/api/f2b/poll')).json();
|
||||
if (lines.length) addToFeed(lines);
|
||||
setFeedDot('ok');
|
||||
} catch { setFeedDot('err'); }
|
||||
}
|
||||
|
||||
// ── Multi-select filter ───────────────────────────────────────────
|
||||
let activeJails = new Set();
|
||||
|
||||
function toggleJail(jail) {
|
||||
if (jail === 'all') {
|
||||
activeJails.clear();
|
||||
} else {
|
||||
activeJails.has(jail) ? activeJails.delete(jail) : activeJails.add(jail);
|
||||
if (jail === 'scan' && activeJails.has('scan')) ensureScan();
|
||||
}
|
||||
updateFilterUI();
|
||||
renderAll();
|
||||
}
|
||||
|
||||
function updateFilterUI() {
|
||||
document.querySelectorAll('#jail-filter button').forEach(btn => {
|
||||
const j = btn.dataset.jail;
|
||||
btn.classList.toggle('active',
|
||||
j === 'all' ? activeJails.size === 0 : activeJails.has(j));
|
||||
});
|
||||
}
|
||||
|
||||
document.getElementById('jail-filter').addEventListener('click', e => {
|
||||
const btn = e.target.closest('button');
|
||||
if (btn) toggleJail(btn.dataset.jail);
|
||||
});
|
||||
|
||||
// ── Active bans ───────────────────────────────────────────────────
|
||||
let allBans = [];
|
||||
|
||||
async function loadBans() {
|
||||
try {
|
||||
allBans = await (await api('GET', '/api/bans')).json();
|
||||
renderAll();
|
||||
} catch (e) {
|
||||
document.getElementById('main-summary').textContent = 'Error: ' + e.message;
|
||||
}
|
||||
}
|
||||
|
||||
// ── Scan data ─────────────────────────────────────────────────────
|
||||
let scanData = [];
|
||||
let scanLoaded = false;
|
||||
let scanRunning = false;
|
||||
|
||||
async function ensureScan() {
|
||||
if (scanLoaded || scanRunning) return;
|
||||
scanRunning = true;
|
||||
document.getElementById('main-summary').textContent = 'scanning…';
|
||||
try {
|
||||
const days = parseInt(document.getElementById('scan-days').value) || 3;
|
||||
await api('POST', `/api/scan/start?days=${days}`);
|
||||
pollScanResults();
|
||||
} catch (e) {
|
||||
document.getElementById('main-summary').textContent = 'scan error: ' + e.message;
|
||||
scanRunning = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function pollScanResults() {
|
||||
try {
|
||||
const job = await (await api('GET', '/api/scan/results')).json();
|
||||
if (job.running) {
|
||||
document.getElementById('main-summary').textContent = 'scanning…';
|
||||
setTimeout(pollScanResults, 2000);
|
||||
return;
|
||||
}
|
||||
if (job.error) throw new Error(job.error);
|
||||
const minHits = parseInt(document.getElementById('scan-minhits').value) || 1;
|
||||
const exclPrev = document.getElementById('scan-excl-prev').checked;
|
||||
let results = job.results;
|
||||
if (minHits > 1) results = results.filter(r => r.hits >= minHits);
|
||||
if (exclPrev) results = results.filter(r => !r.previouslyBanned);
|
||||
scanData = results;
|
||||
scanLoaded = true;
|
||||
scanRunning = false;
|
||||
renderAll();
|
||||
} catch (e) {
|
||||
document.getElementById('main-summary').textContent = 'scan error: ' + e.message;
|
||||
scanRunning = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function refreshScan() {
|
||||
scanLoaded = false;
|
||||
scanData = [];
|
||||
activeJails.add('scan');
|
||||
updateFilterUI();
|
||||
await ensureScan();
|
||||
}
|
||||
|
||||
async function runAutoBan() {
|
||||
const threshold = parseInt(document.getElementById('autoban-threshold').value) || 75;
|
||||
const days = parseInt(document.getElementById('scan-days').value) || 3;
|
||||
try {
|
||||
await api('POST', '/api/auto-ban', { threshold, days });
|
||||
alert(`Auto-ban running (threshold: ${threshold}, days: ${days}). Refresh in ~30s.`);
|
||||
setTimeout(loadBans, 30000);
|
||||
} catch (e) { alert('Auto-ban failed: ' + e.message); }
|
||||
}
|
||||
|
||||
async function purgeLogs() {
|
||||
if (!confirm('Truncate all nginx proxy access logs? This cannot be undone.')) return;
|
||||
try {
|
||||
const msg = await (await api('POST', '/api/purge-logs')).text();
|
||||
alert(msg);
|
||||
scanLoaded = false;
|
||||
scanData = [];
|
||||
renderAll();
|
||||
} catch (e) { alert('Purge failed: ' + e.message); }
|
||||
}
|
||||
|
||||
// ── Unified render ────────────────────────────────────────────────
|
||||
function renderAll() {
|
||||
const grid = document.getElementById('main-grid');
|
||||
grid.innerHTML = '';
|
||||
|
||||
const showAll = activeJails.size === 0;
|
||||
const showScan = showAll || activeJails.has('scan');
|
||||
const banJails = new Set([...activeJails].filter(j => j !== 'scan'));
|
||||
const showBans = showAll || banJails.size > 0;
|
||||
|
||||
let banCount = 0, scanCount = 0;
|
||||
|
||||
if (showBans) {
|
||||
const bansToShow = banJails.size > 0
|
||||
? allBans.filter(b => banJails.has(b.jail))
|
||||
: allBans;
|
||||
banCount = bansToShow.length;
|
||||
bansToShow.forEach(b => grid.appendChild(makeBanCard(b)));
|
||||
}
|
||||
|
||||
if (showScan && scanLoaded) {
|
||||
scanCount = scanData.length;
|
||||
scanData.forEach(d => grid.appendChild(makeScanCard(d)));
|
||||
}
|
||||
|
||||
const parts = [];
|
||||
if (showBans) parts.push(`${banCount} banned`);
|
||||
if (showScan) parts.push(scanLoaded ? `${scanCount} suspicious` : 'scanning…');
|
||||
document.getElementById('main-summary').textContent = parts.join(' · ');
|
||||
}
|
||||
|
||||
// ── Ban card ──────────────────────────────────────────────────────
|
||||
function makeBanCard(b) {
|
||||
const card = document.createElement('div');
|
||||
const color = scoreColor(b.score, b.jail);
|
||||
card.className = 'card';
|
||||
card.style.borderLeft = `3px solid ${color}`;
|
||||
|
||||
const scoreBadge = b.score != null
|
||||
? `<span class="score-badge" style="color:${color};border-color:${color}">${b.score}</span>`
|
||||
: '';
|
||||
|
||||
let meta = `<span>JAIL: ${esc(b.jail.toUpperCase())}</span>`;
|
||||
if (b.jail !== 'whitelist' && b.jail !== 'exempt') {
|
||||
meta += `<span>BANNED: ${b.banTime ? esc(b.banTime.slice(5,16)) : '—'}</span>`;
|
||||
meta += `<span>EXPIRES: ${b.unbanTime ? esc(b.unbanTime.slice(5,16)) : '—'}</span>`;
|
||||
}
|
||||
if (b.country) meta += `<span>COUNTRY: ${esc(b.country)}</span>`;
|
||||
if (b.note) meta += `<span class="good">NOTE: ${esc(b.note)}</span>`;
|
||||
|
||||
const actions = b.jail === 'whitelist'
|
||||
? `<button class="btn-red" onclick="removeWhitelist('${esc(b.ip)}')">[REMOVE]</button>`
|
||||
: b.jail === 'exempt'
|
||||
? `<button class="btn-red" onclick="removeExemption('${esc(b.ip)}')">[REMOVE]</button>
|
||||
<button class="btn-red" onclick="arrest('${esc(b.ip)}')">[ARREST]</button>
|
||||
<button class="btn-amber" onclick="abuseCheck('${esc(b.ip)}',this)">[THREAT]</button>`
|
||||
: `<button onclick="parole('${esc(b.ip)}','${esc(b.jail)}')">[PAROLE]</button>
|
||||
<button class="btn-red" onclick="arrest('${esc(b.ip)}')">[ARREST]</button>
|
||||
<a class="btn" href="/logs/${esc(b.ip)}" target="_blank">[RECORDS]</a>
|
||||
<button class="btn-amber" onclick="abuseCheck('${esc(b.ip)}',this)">[THREAT]</button>`;
|
||||
|
||||
card.innerHTML =
|
||||
`<div class="card-ip">${esc(b.ip)} ${scoreBadge}</div>` +
|
||||
`<div class="card-meta">${meta}</div>` +
|
||||
`<div class="card-actions">${actions}</div>`;
|
||||
return card;
|
||||
}
|
||||
|
||||
// ── Scan card ─────────────────────────────────────────────────────
|
||||
function makeScanCard(d) {
|
||||
const card = document.createElement('div');
|
||||
card.className = 'card scan-card' + (d.previouslyBanned ? ' prev-banned' : '');
|
||||
card.innerHTML =
|
||||
`<div class="card-ip">${esc(d.ip)}<span class="scan-badge">SUSPICIOUS</span></div>` +
|
||||
`<div class="card-meta">
|
||||
<span class="hi">HITS: ${d.hits}</span>
|
||||
<span class="muted">SITES: ${esc(d.sites.slice(0,3).join(', '))}</span>
|
||||
${d.previouslyBanned ? `<span class="warn">PREV BANNED: ${d.banCount}x</span>` : ''}
|
||||
</div>` +
|
||||
`<div class="card-actions">
|
||||
<a class="btn" href="/logs/${esc(d.ip)}" target="_blank">[RECORDS]</a>
|
||||
<button class="btn-red" onclick="scanBan('${esc(d.ip)}',this)">[BAN]</button>
|
||||
<button onclick="scanWL('${esc(d.ip)}',this)">[EXEMPT]</button>
|
||||
<button class="btn-amber" onclick="scanAbuse('${esc(d.ip)}',this)">[THREAT]</button>
|
||||
</div>`;
|
||||
return card;
|
||||
}
|
||||
|
||||
// ── Ban management ────────────────────────────────────────────────
|
||||
async function parole(ip, jail) {
|
||||
try { await api('POST', '/api/unban', { ip, jail }); await loadBans(); }
|
||||
catch (e) { alert('Parole failed: ' + e.message); }
|
||||
}
|
||||
|
||||
async function arrest(ip) {
|
||||
try { await api('POST', '/api/ban', { ip }); await loadBans(); }
|
||||
catch (e) { alert('Arrest failed: ' + e.message); }
|
||||
}
|
||||
|
||||
async function removeWhitelist(ip) {
|
||||
try { await api('DELETE', `/api/whitelist/${encodeURIComponent(ip)}`); await loadBans(); }
|
||||
catch (e) { alert('Remove failed: ' + e.message); }
|
||||
}
|
||||
|
||||
async function removeExemption(ip) {
|
||||
try { await api('DELETE', `/api/exempt/${encodeURIComponent(ip)}`); await loadBans(); }
|
||||
catch (e) { alert('Remove failed: ' + e.message); }
|
||||
}
|
||||
|
||||
async function abuseCheck(ip, btn) {
|
||||
btn.disabled = true; btn.textContent = '[…]';
|
||||
try {
|
||||
const d = await (await api('GET', `/api/check-abuse/${encodeURIComponent(ip)}`)).json();
|
||||
alert(`AbuseIPDB: ${ip}\nScore: ${d.score}\nCountry: ${d.country || '—'}`);
|
||||
await loadBans();
|
||||
} catch (e) { alert('Check failed: ' + e.message); }
|
||||
finally { btn.disabled = false; btn.textContent = '[THREAT]'; }
|
||||
}
|
||||
|
||||
async function forceAbuseCheck() {
|
||||
try {
|
||||
await api('POST', '/api/force-abuse-check');
|
||||
alert('Abuse checks running in background. Bans will refresh in ~5s.');
|
||||
setTimeout(loadBans, 5000);
|
||||
} catch (e) { alert('Failed: ' + e.message); }
|
||||
}
|
||||
|
||||
function toggleNote() {
|
||||
document.getElementById('note-wrap').style.display =
|
||||
document.getElementById('action-select').value === 'whitelist' ? '' : 'none';
|
||||
}
|
||||
|
||||
async function executeAction() {
|
||||
const ip = document.getElementById('action-ip').value.trim();
|
||||
const action = document.getElementById('action-select').value;
|
||||
const note = document.getElementById('action-note')?.value.trim();
|
||||
if (!ip) return;
|
||||
try {
|
||||
if (action === 'ban') await api('POST', '/api/ban', { ip });
|
||||
else if (action === 'unban-all') await api('POST', '/api/unban-all', { ip });
|
||||
else if (action === 'whitelist') await api('POST', '/api/whitelist', { ip, note });
|
||||
else if (action === 'search') {
|
||||
const q = ip.toLowerCase();
|
||||
document.querySelectorAll('#main-grid .card').forEach(card => {
|
||||
card.style.display =
|
||||
card.querySelector('.card-ip').textContent.toLowerCase().includes(q) ? '' : 'none';
|
||||
});
|
||||
return;
|
||||
}
|
||||
document.getElementById('action-ip').value = '';
|
||||
await loadBans();
|
||||
} catch (e) { alert('Action failed: ' + e.message); }
|
||||
}
|
||||
|
||||
async function scanBan(ip, btn) {
|
||||
btn.disabled = true; btn.textContent = '[…]';
|
||||
try {
|
||||
await api('POST', '/api/ban', { ip });
|
||||
btn.closest('.card').style.opacity = '.4';
|
||||
btn.textContent = '[BANNED]';
|
||||
loadBans();
|
||||
} catch (e) { alert('Ban failed: ' + e.message); btn.disabled = false; btn.textContent = '[BAN]'; }
|
||||
}
|
||||
|
||||
async function scanWL(ip, btn) {
|
||||
btn.disabled = true; btn.textContent = '[…]';
|
||||
try {
|
||||
await api('POST', '/api/exempt', { ip });
|
||||
btn.closest('.card').style.opacity = '.4';
|
||||
btn.textContent = '[EXEMPTED]';
|
||||
loadBans();
|
||||
} catch (e) { alert('Exempt failed: ' + e.message); btn.disabled = false; btn.textContent = '[EXEMPT]'; }
|
||||
}
|
||||
|
||||
async function scanAbuse(ip, btn) {
|
||||
btn.disabled = true; btn.textContent = '[…]';
|
||||
try {
|
||||
const d = await (await api('GET', `/api/check-abuse/${encodeURIComponent(ip)}`)).json();
|
||||
alert(`AbuseIPDB: ${ip}\nScore: ${d.score}\nCountry: ${d.country || '—'}`);
|
||||
} catch (e) { alert('Check failed: ' + e.message); }
|
||||
finally { btn.disabled = false; btn.textContent = '[THREAT]'; }
|
||||
}
|
||||
|
||||
// ── Boot ──────────────────────────────────────────────────────────
|
||||
initFeed();
|
||||
loadBans();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user