gitea
c104e27506
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)
480 lines
18 KiB
HTML
480 lines
18 KiB
HTML
<!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>
|