fix(xff): truncate LEAKED IPs + ROTATION badge for rotation attacks

`for i in $(seq 1 100); do curl -H "X-Forwarded-For: 191.100.20.$i" ...`
was dumping 100 distinct IPs into AttackerDetail's LEAKED IPs row,
drowning the rest of the ORIGIN section. The 100-IP wall is itself a
signal (WAF-bypass-list probing) that deserves a short badge, not a
flood.

Backend:
- get_attacker_ip_leaks gains `limit: int = 10` parameter — caller
  only ever needs a sample, not the full set.
- New count_attacker_ip_leaks() returns the unbounded COUNT(*) via
  one cheap SQL aggregate.
- Detail endpoint returns {ip_leaks: [first 10], ip_leaks_total: N}
  so the UI can render a rotation badge independent of list length.

UI:
- New LeakedIPsRow component. First 5 distinct IPs rendered inline
  with hover tooltips (unchanged). When > 5, a `+ N more` expand
  button reveals the rest of the sample; when total exceeds the
  10-row cap, a subtle `(+M beyond sample)` note appears.
- When total ≥ 20, a red `ROTATION · N` tag renders leading the
  row with a tooltip explaining the semantic: "almost certainly
  XFF-rotation / WAF-bypass probing, not a real attribution leak."

DB churn is deliberately not capped — 100k rows × ~500 B is tolerable.
If it becomes a problem we can add an ingester-side count-and-skip;
for now the UX fix is the whole story.

Added test_ip_leaks_total_reported_separately_from_list asserting
the endpoint shape matches what the UI consumes.
This commit is contained in:
2026-04-24 18:25:46 -04:00
parent ca39552692
commit c78ab032bd
5 changed files with 204 additions and 46 deletions

View File

@@ -78,10 +78,9 @@ interface AttackerData {
real_ip_claim?: string;
source_header?: string;
headers_seen?: Record<string, string>;
path?: string;
method?: string;
};
}>;
ip_leaks_total?: number;
}
// ─── Fingerprint rendering ───────────────────────────────────────────────────
@@ -835,6 +834,119 @@ const Section: React.FC<{
</div>
);
// ─── Leaked-IPs row (truncated view + rotation-detection badge) ────────────
const ROTATION_THRESHOLD = 20;
const INLINE_LIMIT = 5;
interface LeakedIPsRowProps {
leaks: NonNullable<AttackerData['ip_leaks']>;
total: number;
}
const LeakedIPsRow: React.FC<LeakedIPsRowProps> = ({ leaks, total }) => {
const [expanded, setExpanded] = useState(false);
const distinctIPs = Array.from(
new Set(
leaks
.map((l) => l.payload?.real_ip_claim)
.filter((v): v is string => !!v),
),
);
const rotationDetected = total >= ROTATION_THRESHOLD;
const visible = expanded ? distinctIPs : distinctIPs.slice(0, INLINE_LIMIT);
const hiddenInList = distinctIPs.length - visible.length;
// Backend caps server-side leaks at 10 rows; "total" is the unbounded
// count — may exceed what we actually have IP values for.
const remainingBeyondSample = total - distinctIPs.length;
const ipTooltip = (ip: string): string => {
const latest = leaks.find((l) => l.payload?.real_ip_claim === ip);
return latest
? `Leaked via ${latest.payload.source_header ?? '?'}; source ${latest.payload.source_ip ?? '?'}`
: '';
};
return (
<div>
<span className="dim" style={{ color: 'var(--warn, #e0a040)' }}>
LEAKED IPs:{' '}
</span>
{rotationDetected && (
<span
style={{ marginRight: 8, display: 'inline-block' }}
title={`${total} distinct claimed IPs — almost certainly XFF-rotation / WAF-bypass probing, not a real attribution leak.`}
>
<Tag color="var(--alert, #ff4d4d)">
ROTATION · {total}
</Tag>
</span>
)}
{visible.map((ip, i, arr) => (
<span
key={ip}
style={{
color: 'var(--warn, #e0a040)',
fontFamily: 'monospace',
}}
title={ipTooltip(ip)}
>
{ip}
{i < arr.length - 1 ? ', ' : ''}
</span>
))}
{!expanded && hiddenInList > 0 && (
<>
{' '}
<button
onClick={() => setExpanded(true)}
style={{
background: 'transparent',
border: 'none',
color: 'var(--warn, #e0a040)',
cursor: 'pointer',
padding: 0,
fontFamily: 'inherit',
textDecoration: 'underline',
}}
>
+ {hiddenInList} more
</button>
</>
)}
{remainingBeyondSample > 0 && (
<span
className="dim"
style={{ marginLeft: 6, fontSize: '0.75rem' }}
title="Only the 10 most-recent claimed IPs are fetched; the total count is the full DB tally."
>
(+{remainingBeyondSample} beyond sample)
</span>
)}
{expanded && hiddenInList === 0 && distinctIPs.length > INLINE_LIMIT && (
<>
{' '}
<button
onClick={() => setExpanded(false)}
style={{
background: 'transparent',
border: 'none',
color: 'var(--accent-color)',
cursor: 'pointer',
padding: 0,
fontFamily: 'inherit',
textDecoration: 'underline',
}}
>
collapse
</button>
</>
)}
</div>
);
};
// ─── Main component ─────────────────────────────────────────────────────────
const AttackerDetail: React.FC = () => {
@@ -1165,38 +1277,10 @@ const AttackerDetail: React.FC = () => {
)}
</div>
{attacker.ip_leaks && attacker.ip_leaks.length > 0 && (
<div>
<span className="dim" style={{ color: 'var(--warn, #e0a040)' }}>
LEAKED IPs:{' '}
</span>
{Array.from(
new Set(
(attacker.ip_leaks || [])
.map((l) => l.payload?.real_ip_claim)
.filter((v): v is string => !!v),
),
).map((ip, i, arr) => {
const latest = (attacker.ip_leaks || []).find(
(l) => l.payload?.real_ip_claim === ip,
);
const tooltip = latest
? `Leaked via ${latest.payload.source_header ?? '?'}; source ${latest.payload.source_ip ?? '?'}`
: '';
return (
<span
key={ip}
style={{
color: 'var(--warn, #e0a040)',
fontFamily: 'monospace',
}}
title={tooltip}
>
{ip}
{i < arr.length - 1 ? ', ' : ''}
</span>
);
})}
</div>
<LeakedIPsRow
leaks={attacker.ip_leaks}
total={attacker.ip_leaks_total ?? attacker.ip_leaks.length}
/>
)}
</div>
</Section>