Rate-Limit-Sperren: Admin-UI zum Freigeben
Bei zu vielen Login-Fehlversuchen war ohne Container-Restart kein Weg
zurück. Jetzt sehen Admins die aktiven Sperren und können einzeln
freigeben.
Backend:
- GET /api/settings/rate-limits/active (settings:read)
Liest SecurityEvent RATE_LIMIT_HIT der letzten 15 Min, gruppiert nach
IP, liefert lastEmail/limiters/hitCount/lastHit.
- POST /api/settings/rate-limits/reset (settings:update)
Body { ipAddress } → ruft loginRateLimiter.resetKey + passwordReset-
RateLimiter.resetKey auf (express-rate-limit v7), audited als
UPDATE auf resourceType=RateLimit.
Frontend:
- Neue Seite /settings/rate-limits: Tabelle mit IP/Email/Limiter/Hits/
Letzter-Hit/Aktion. Auto-Refresh alle 15s. Freigeben-Button pro IP.
- Kachel in Settings-Übersicht (orange, ShieldOff-Icon, settings:read).
Live-verifiziert: 11 failed Logins → 429 ab dem 11.; Liste zeigt
IP + Email; POST /reset → 200; danach wieder 401 statt 429; Audit-Log
„Rate-Limit für IP 127.0.0.1 manuell freigegeben" angelegt.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,142 @@
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import toast from 'react-hot-toast';
|
||||
import { rateLimitApi, type ActiveRateLimit } from '../../services/api';
|
||||
import Card from '../../components/ui/Card';
|
||||
import Button from '../../components/ui/Button';
|
||||
import { ArrowLeft, RefreshCw, ShieldOff, Unlock } from 'lucide-react';
|
||||
|
||||
function formatTime(iso: string): string {
|
||||
const d = new Date(iso);
|
||||
const diffMin = Math.floor((Date.now() - d.getTime()) / 60000);
|
||||
if (diffMin < 1) return 'gerade eben';
|
||||
if (diffMin === 1) return 'vor 1 Minute';
|
||||
return `vor ${diffMin} Minuten`;
|
||||
}
|
||||
|
||||
function limiterLabel(name: string): string {
|
||||
if (name === 'login') return 'Login';
|
||||
if (name === 'password-reset') return 'Passwort-Reset';
|
||||
return name;
|
||||
}
|
||||
|
||||
export default function RateLimits() {
|
||||
const navigate = useNavigate();
|
||||
const qc = useQueryClient();
|
||||
|
||||
const { data, isLoading, refetch } = useQuery({
|
||||
queryKey: ['rate-limits-active'],
|
||||
queryFn: () => rateLimitApi.getActive(),
|
||||
refetchInterval: 15000,
|
||||
});
|
||||
|
||||
const resetMutation = useMutation({
|
||||
mutationFn: (ip: string) => rateLimitApi.reset(ip),
|
||||
onSuccess: (_, ip) => {
|
||||
toast.success(`Rate-Limit für ${ip} freigegeben`);
|
||||
qc.invalidateQueries({ queryKey: ['rate-limits-active'] });
|
||||
},
|
||||
onError: (err) => {
|
||||
const msg = err instanceof Error ? err.message : 'Reset fehlgeschlagen';
|
||||
toast.error(msg);
|
||||
},
|
||||
});
|
||||
|
||||
const entries: ActiveRateLimit[] = data?.data || [];
|
||||
|
||||
return (
|
||||
<div className="container mx-auto p-6 max-w-5xl">
|
||||
<div className="mb-6 flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<Button variant="secondary" size="sm" onClick={() => navigate('/settings')}>
|
||||
<ArrowLeft className="w-4 h-4 mr-1" />
|
||||
Zurück
|
||||
</Button>
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold flex items-center gap-2">
|
||||
<ShieldOff className="w-6 h-6 text-orange-600" />
|
||||
Rate-Limit-Sperren
|
||||
</h1>
|
||||
<p className="text-sm text-gray-600 mt-1">
|
||||
IP-Adressen, die durch den Login- oder Passwort-Reset-Rate-Limiter
|
||||
in den letzten 15 Minuten gesperrt wurden.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button variant="secondary" size="sm" onClick={() => refetch()}>
|
||||
<RefreshCw className="w-4 h-4 mr-1" />
|
||||
Aktualisieren
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
{isLoading ? (
|
||||
<div className="p-6 text-center text-gray-500">Lade...</div>
|
||||
) : entries.length === 0 ? (
|
||||
<div className="p-8 text-center text-gray-500">
|
||||
<ShieldOff className="w-10 h-10 mx-auto text-gray-300 mb-2" />
|
||||
Aktuell keine Sperren aktiv.
|
||||
</div>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full divide-y divide-gray-200">
|
||||
<thead className="bg-gray-50">
|
||||
<tr>
|
||||
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">IP-Adresse</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Letzter Versuch (E-Mail)</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Limiter</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Hits</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Zuletzt</th>
|
||||
<th className="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">Aktion</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-white divide-y divide-gray-200">
|
||||
{entries.map((e) => (
|
||||
<tr key={e.ipAddress}>
|
||||
<td className="px-4 py-3 font-mono text-sm">{e.ipAddress}</td>
|
||||
<td className="px-4 py-3 text-sm">
|
||||
{e.lastEmail ? (
|
||||
<span className="font-mono">{e.lastEmail}</span>
|
||||
) : (
|
||||
<span className="text-gray-400">—</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-sm">
|
||||
{e.limiters.map((l) => (
|
||||
<span
|
||||
key={l}
|
||||
className="inline-block bg-orange-100 text-orange-800 text-xs px-2 py-0.5 rounded mr-1"
|
||||
>
|
||||
{limiterLabel(l)}
|
||||
</span>
|
||||
))}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-sm">{e.hitCount}</td>
|
||||
<td className="px-4 py-3 text-sm text-gray-600">{formatTime(e.lastHit)}</td>
|
||||
<td className="px-4 py-3 text-right">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="primary"
|
||||
onClick={() => resetMutation.mutate(e.ipAddress)}
|
||||
disabled={resetMutation.isPending}
|
||||
>
|
||||
<Unlock className="w-4 h-4 mr-1" />
|
||||
Freigeben
|
||||
</Button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
<div className="p-4 text-xs text-gray-500 border-t bg-gray-50">
|
||||
Hinweis: Die Liste basiert auf den <strong>Security-Events</strong> der
|
||||
letzten 15 Minuten (Rate-Limit-Fenster). Eine Freigabe leert sowohl den
|
||||
Login- als auch den Passwort-Reset-Limiter für diese IP und wird im
|
||||
Audit-Log protokolliert.
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user