refactor(decnet_web/AttackerDetail): lift fingerprint renderers + tests
Move 12 Fp* components, FingerprintGroup, getPayload, seqClassColor, HashRow, fpType lookups, and UA color tables into AttackerDetail/fingerprints/. AttackerDetail.tsx drops from 1652 to 1220 LOC; the orchestrator now imports the same helpers it used to define inline. 10 new tests covering UA / HTTP-quirks / resumption / certificate / spoofed-source / TCP-stack / dispatch fallback.
This commit is contained in:
@@ -14,6 +14,9 @@ import { CommandsViewer } from './AttackerDetail/sections/CommandsViewer';
|
|||||||
import { ArtifactsPanel } from './AttackerDetail/sections/ArtifactsPanel';
|
import { ArtifactsPanel } from './AttackerDetail/sections/ArtifactsPanel';
|
||||||
import { MailLogPanel } from './AttackerDetail/sections/MailLogPanel';
|
import { MailLogPanel } from './AttackerDetail/sections/MailLogPanel';
|
||||||
import { Tag, Section } from './AttackerDetail/ui';
|
import { Tag, Section } from './AttackerDetail/ui';
|
||||||
|
import {
|
||||||
|
FingerprintGroup, getPayload, seqClassColor,
|
||||||
|
} from './AttackerDetail/fingerprints';
|
||||||
import type {
|
import type {
|
||||||
AttackerBehavior,
|
AttackerBehavior,
|
||||||
BehaviouralObservation,
|
BehaviouralObservation,
|
||||||
@@ -27,441 +30,6 @@ import './Dashboard.css';
|
|||||||
export type { BehaviouralObservation, AttributionPrimitiveState };
|
export type { BehaviouralObservation, AttributionPrimitiveState };
|
||||||
|
|
||||||
|
|
||||||
// ─── Fingerprint rendering ───────────────────────────────────────────────────
|
|
||||||
|
|
||||||
const fpTypeLabel: Record<string, string> = {
|
|
||||||
ja3: 'TLS FINGERPRINT',
|
|
||||||
ja4l: 'LATENCY (JA4L)',
|
|
||||||
tls_resumption: 'SESSION RESUMPTION',
|
|
||||||
tls_certificate: 'CERTIFICATE',
|
|
||||||
tls_certificate_active: 'CERTIFICATE (ACTIVE PROBE)',
|
|
||||||
tls_certificate_passive: 'CERTIFICATE',
|
|
||||||
http_useragent: 'HTTP USER-AGENT',
|
|
||||||
http_quirks: 'HTTP HEADER QUIRKS',
|
|
||||||
spoofed_source: 'SPOOFED SOURCE IP',
|
|
||||||
vnc_client_version: 'VNC CLIENT',
|
|
||||||
jarm: 'JARM',
|
|
||||||
hassh_server: 'HASSH SERVER',
|
|
||||||
tcpfp: 'TCP/IP STACK',
|
|
||||||
};
|
|
||||||
|
|
||||||
const fpTypeIcon: Record<string, React.ReactNode> = {
|
|
||||||
ja3: <Fingerprint size={14} />,
|
|
||||||
ja4l: <Clock size={14} />,
|
|
||||||
tls_resumption: <Wifi size={14} />,
|
|
||||||
tls_certificate: <FileKey size={14} />,
|
|
||||||
tls_certificate_active: <FileKey size={14} />,
|
|
||||||
tls_certificate_passive: <FileKey size={14} />,
|
|
||||||
http_useragent: <Shield size={14} />,
|
|
||||||
http_quirks: <Fingerprint size={14} />,
|
|
||||||
spoofed_source: <Crosshair size={14} />,
|
|
||||||
vnc_client_version: <Lock size={14} />,
|
|
||||||
jarm: <Crosshair size={14} />,
|
|
||||||
hassh_server: <Lock size={14} />,
|
|
||||||
tcpfp: <Wifi size={14} />,
|
|
||||||
};
|
|
||||||
|
|
||||||
function getPayload(bounty: any): any {
|
|
||||||
if (bounty?.payload && typeof bounty.payload === 'object') return bounty.payload;
|
|
||||||
if (bounty?.payload && typeof bounty.payload === 'string') {
|
|
||||||
try { return JSON.parse(bounty.payload); } catch { return bounty; }
|
|
||||||
}
|
|
||||||
return bounty;
|
|
||||||
}
|
|
||||||
|
|
||||||
const HashRow: React.FC<{ label: string; value?: string | null }> = ({ label, value }) => {
|
|
||||||
if (!value) return null;
|
|
||||||
return (
|
|
||||||
<div style={{ display: 'flex', gap: '8px', alignItems: 'baseline' }}>
|
|
||||||
<span className="dim" style={{ fontSize: '0.7rem', minWidth: '36px' }}>{label}</span>
|
|
||||||
<span className="matrix-text" style={{ fontFamily: 'monospace', fontSize: '0.8rem', wordBreak: 'break-all' }}>
|
|
||||||
{value}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Random ISN/IP-ID is the modern default; non-random patterns are
|
|
||||||
// fingerprinting gold (legacy stacks, custom raw-socket tools).
|
|
||||||
const seqClassColor = (cls: string): string | undefined => {
|
|
||||||
switch (cls) {
|
|
||||||
case 'random': return undefined; // neutral, expected
|
|
||||||
case 'incremental': return '#e5c07b'; // amber — uncommon
|
|
||||||
case 'zero':
|
|
||||||
case 'constant': return '#98c379'; // green — strong signal
|
|
||||||
default: return undefined;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const FpTlsHashes: React.FC<{ p: any }> = ({ p }) => (
|
|
||||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
|
|
||||||
<HashRow label="JA3" value={p.ja3} />
|
|
||||||
<HashRow label="JA3S" value={p.ja3s} />
|
|
||||||
<HashRow label="JA4" value={p.ja4} />
|
|
||||||
<HashRow label="JA4S" value={p.ja4s} />
|
|
||||||
{(p.tls_version || p.sni || p.alpn) && (
|
|
||||||
<div style={{ display: 'flex', gap: '8px', marginTop: '4px', flexWrap: 'wrap' }}>
|
|
||||||
{p.tls_version && <Tag>{p.tls_version}</Tag>}
|
|
||||||
{p.sni && <Tag color="var(--accent-color)">SNI: {p.sni}</Tag>}
|
|
||||||
{p.alpn && <Tag>ALPN: {p.alpn}</Tag>}
|
|
||||||
{p.dst_port && <Tag>:{p.dst_port}</Tag>}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
const FpLatency: React.FC<{ p: any }> = ({ p }) => (
|
|
||||||
<div style={{ display: 'flex', gap: '24px', alignItems: 'center' }}>
|
|
||||||
<div>
|
|
||||||
<span className="dim" style={{ fontSize: '0.7rem' }}>RTT </span>
|
|
||||||
<span className="matrix-text" style={{ fontSize: '1.2rem', fontWeight: 'bold' }}>
|
|
||||||
{p.rtt_ms}
|
|
||||||
</span>
|
|
||||||
<span className="dim" style={{ fontSize: '0.7rem' }}> ms</span>
|
|
||||||
</div>
|
|
||||||
{p.client_ttl && (
|
|
||||||
<div>
|
|
||||||
<span className="dim" style={{ fontSize: '0.7rem' }}>TTL </span>
|
|
||||||
<span className="matrix-text" style={{ fontSize: '1.2rem', fontWeight: 'bold' }}>
|
|
||||||
{p.client_ttl}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
const FpResumption: React.FC<{ p: any }> = ({ p }) => {
|
|
||||||
const mechanisms = typeof p.mechanisms === 'string'
|
|
||||||
? p.mechanisms.split(',')
|
|
||||||
: Array.isArray(p.mechanisms) ? p.mechanisms : [];
|
|
||||||
return (
|
|
||||||
<div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
|
|
||||||
{mechanisms.map((m: string) => (
|
|
||||||
<Tag key={m} color="var(--accent-color)">{m.trim().toUpperCase().replace(/_/g, ' ')}</Tag>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const FpCertificate: React.FC<{ p: any }> = ({ p }) => (
|
|
||||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
|
|
||||||
<div style={{ display: 'flex', gap: '8px', alignItems: 'center', flexWrap: 'wrap' }}>
|
|
||||||
<span className="matrix-text" style={{ fontFamily: 'monospace', fontSize: '0.85rem' }}>
|
|
||||||
{p.subject_cn}
|
|
||||||
</span>
|
|
||||||
{p.self_signed === 'true' && (
|
|
||||||
<Tag color="#ff6b6b">SELF-SIGNED</Tag>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
{p.issuer && (
|
|
||||||
<div>
|
|
||||||
<span className="dim" style={{ fontSize: '0.7rem' }}>ISSUER: </span>
|
|
||||||
<span style={{ fontSize: '0.8rem' }}>{p.issuer}</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{(p.not_before || p.not_after) && (
|
|
||||||
<div>
|
|
||||||
<span className="dim" style={{ fontSize: '0.7rem' }}>VALIDITY: </span>
|
|
||||||
<span style={{ fontSize: '0.75rem', fontFamily: 'monospace' }}>
|
|
||||||
{p.not_before || '?'} — {p.not_after || '?'}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{p.sans && (
|
|
||||||
<div style={{ display: 'flex', gap: '6px', flexWrap: 'wrap', marginTop: '2px' }}>
|
|
||||||
<span className="dim" style={{ fontSize: '0.7rem' }}>SANs: </span>
|
|
||||||
{(typeof p.sans === 'string' ? p.sans.split(',') : p.sans).map((san: string) => (
|
|
||||||
<Tag key={san}>{san.trim()}</Tag>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{p.cert_sha256 && (
|
|
||||||
<div>
|
|
||||||
<span className="dim" style={{ fontSize: '0.7rem' }}>SHA-256: </span>
|
|
||||||
<span style={{ fontSize: '0.75rem', fontFamily: 'monospace' }} title={p.cert_sha256}>
|
|
||||||
{p.cert_sha256.slice(0, 16)}…{p.cert_sha256.slice(-8)}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{p.target_ip && (
|
|
||||||
<div>
|
|
||||||
<span className="dim" style={{ fontSize: '0.7rem' }}>FROM: </span>
|
|
||||||
<span style={{ fontSize: '0.75rem', fontFamily: 'monospace' }}>
|
|
||||||
{p.target_ip}{p.target_port ? `:${p.target_port}` : ''}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
const FpJarm: React.FC<{ p: any }> = ({ p }) => (
|
|
||||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
|
|
||||||
<HashRow label="HASH" value={p.hash} />
|
|
||||||
{(p.target_ip || p.target_port) && (
|
|
||||||
<div style={{ display: 'flex', gap: '8px', marginTop: '4px', flexWrap: 'wrap' }}>
|
|
||||||
{p.target_ip && <Tag color="var(--accent-color)">{p.target_ip}</Tag>}
|
|
||||||
{p.target_port && <Tag>:{p.target_port}</Tag>}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
const FpHassh: React.FC<{ p: any }> = ({ p }) => (
|
|
||||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
|
|
||||||
<HashRow label="HASH" value={p.hash} />
|
|
||||||
{p.ssh_banner && (
|
|
||||||
<div>
|
|
||||||
<span className="dim" style={{ fontSize: '0.7rem' }}>BANNER: </span>
|
|
||||||
<span className="matrix-text" style={{ fontFamily: 'monospace', fontSize: '0.8rem' }}>{p.ssh_banner}</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{p.kex_algorithms && (
|
|
||||||
<details style={{ marginTop: '2px' }}>
|
|
||||||
<summary className="dim" style={{ fontSize: '0.7rem', cursor: 'pointer', letterSpacing: '1px' }}>
|
|
||||||
KEX ALGORITHMS
|
|
||||||
</summary>
|
|
||||||
<div style={{ display: 'flex', gap: '6px', flexWrap: 'wrap', marginTop: '4px' }}>
|
|
||||||
{p.kex_algorithms.split(',').map((algo: string) => (
|
|
||||||
<Tag key={algo}>{algo.trim()}</Tag>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</details>
|
|
||||||
)}
|
|
||||||
{p.encryption_s2c && (
|
|
||||||
<details>
|
|
||||||
<summary className="dim" style={{ fontSize: '0.7rem', cursor: 'pointer', letterSpacing: '1px' }}>
|
|
||||||
ENCRYPTION (S→C)
|
|
||||||
</summary>
|
|
||||||
<div style={{ display: 'flex', gap: '6px', flexWrap: 'wrap', marginTop: '4px' }}>
|
|
||||||
{p.encryption_s2c.split(',').map((algo: string) => (
|
|
||||||
<Tag key={algo}>{algo.trim()}</Tag>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</details>
|
|
||||||
)}
|
|
||||||
{(p.target_ip || p.target_port) && (
|
|
||||||
<div style={{ display: 'flex', gap: '8px', marginTop: '4px', flexWrap: 'wrap' }}>
|
|
||||||
{p.target_ip && <Tag color="var(--accent-color)">{p.target_ip}</Tag>}
|
|
||||||
{p.target_port && <Tag>:{p.target_port}</Tag>}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
const FpTcpStack: React.FC<{ p: any }> = ({ p }) => (
|
|
||||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
|
|
||||||
<HashRow label="HASH" value={p.hash} />
|
|
||||||
<div style={{ display: 'flex', gap: '24px', alignItems: 'center', flexWrap: 'wrap' }}>
|
|
||||||
{p.ttl && (
|
|
||||||
<div>
|
|
||||||
<span className="dim" style={{ fontSize: '0.7rem' }}>TTL </span>
|
|
||||||
<span className="matrix-text" style={{ fontSize: '1.2rem', fontWeight: 'bold' }}>{p.ttl}</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{p.window_size && (
|
|
||||||
<div>
|
|
||||||
<span className="dim" style={{ fontSize: '0.7rem' }}>WIN </span>
|
|
||||||
<span className="matrix-text" style={{ fontSize: '1.2rem', fontWeight: 'bold' }}>{p.window_size}</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{p.mss && (
|
|
||||||
<div>
|
|
||||||
<span className="dim" style={{ fontSize: '0.7rem' }}>MSS </span>
|
|
||||||
<span className="matrix-text" style={{ fontSize: '1rem' }}>{p.mss}</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
|
|
||||||
{p.df_bit === '1' && <Tag color="#ff6b6b">DF</Tag>}
|
|
||||||
{p.sack_ok === '1' && <Tag>SACK</Tag>}
|
|
||||||
{p.timestamp === '1' && <Tag>TS</Tag>}
|
|
||||||
{p.window_scale && p.window_scale !== '-1' && <Tag>WSCALE:{p.window_scale}</Tag>}
|
|
||||||
</div>
|
|
||||||
{p.options_order && (
|
|
||||||
<div>
|
|
||||||
<span className="dim" style={{ fontSize: '0.7rem' }}>OPTS: </span>
|
|
||||||
<span className="matrix-text" style={{ fontFamily: 'monospace', fontSize: '0.8rem' }}>{p.options_order}</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{(p.target_ip || p.target_port) && (
|
|
||||||
<div style={{ display: 'flex', gap: '8px', marginTop: '2px', flexWrap: 'wrap' }}>
|
|
||||||
{p.target_ip && <Tag color="var(--accent-color)">{p.target_ip}</Tag>}
|
|
||||||
{p.target_port && <Tag>:{p.target_port}</Tag>}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
const FpGeneric: React.FC<{ p: any }> = ({ p }) => (
|
|
||||||
<div>
|
|
||||||
{p.value ? (
|
|
||||||
<span className="matrix-text" style={{ fontFamily: 'monospace', fontSize: '0.85rem' }}>
|
|
||||||
{p.value}
|
|
||||||
</span>
|
|
||||||
) : (
|
|
||||||
<span className="dim" style={{ fontSize: '0.8rem', wordBreak: 'break-all' }}>
|
|
||||||
{JSON.stringify(p)}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
const UA_CATEGORY_COLOR: Record<string, string> = {
|
|
||||||
scanner: 'var(--alert, #ff4d4d)',
|
|
||||||
nonstandard: 'var(--warn, #e0a040)',
|
|
||||||
empty: 'var(--warn, #e0a040)',
|
|
||||||
bot: 'var(--violet)',
|
|
||||||
cli: 'var(--matrix)',
|
|
||||||
library: 'var(--matrix)',
|
|
||||||
browser: 'var(--accent-color)',
|
|
||||||
};
|
|
||||||
|
|
||||||
const UA_SIGNAL_COLOR: Record<string, string> = {
|
|
||||||
injection_like: 'var(--alert, #ff4d4d)',
|
|
||||||
nonprintable: 'var(--alert, #ff4d4d)',
|
|
||||||
suspicious_long: 'var(--warn, #e0a040)',
|
|
||||||
suspicious_short: 'var(--warn, #e0a040)',
|
|
||||||
};
|
|
||||||
|
|
||||||
const FpUserAgent: React.FC<{ p: any }> = ({ p }) => {
|
|
||||||
const category = typeof p.category === 'string' ? p.category : 'unknown';
|
|
||||||
const color = UA_CATEGORY_COLOR[category] || 'var(--text-color)';
|
|
||||||
const signals: string[] = Array.isArray(p.signals) ? p.signals : [];
|
|
||||||
return (
|
|
||||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
|
|
||||||
{p.value !== undefined && p.value !== '' ? (
|
|
||||||
<span
|
|
||||||
className="matrix-text"
|
|
||||||
style={{
|
|
||||||
fontFamily: 'monospace',
|
|
||||||
fontSize: '0.85rem',
|
|
||||||
wordBreak: 'break-all',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{p.value}
|
|
||||||
</span>
|
|
||||||
) : (
|
|
||||||
<span className="dim" style={{ fontStyle: 'italic' }}>
|
|
||||||
(empty User-Agent)
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
<div style={{ display: 'flex', gap: '6px', flexWrap: 'wrap' }}>
|
|
||||||
<Tag color={color}>{category.toUpperCase()}</Tag>
|
|
||||||
{p.tool && <Tag>{String(p.tool).toUpperCase()}</Tag>}
|
|
||||||
{signals.map((s) => (
|
|
||||||
<Tag key={s} color={UA_SIGNAL_COLOR[s] || 'var(--warn, #e0a040)'}>
|
|
||||||
{s.toUpperCase().replace(/_/g, ' ')}
|
|
||||||
</Tag>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const FpSpoofedSource: React.FC<{ p: any }> = ({ p }) => (
|
|
||||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
|
|
||||||
<div>
|
|
||||||
<span className="dim" style={{ fontSize: '0.7rem' }}>CLAIMED: </span>
|
|
||||||
<span style={{
|
|
||||||
color: 'var(--warn, #e0a040)',
|
|
||||||
fontFamily: 'monospace',
|
|
||||||
fontSize: '0.85rem',
|
|
||||||
}}>
|
|
||||||
{p.claimed_ip || '—'}
|
|
||||||
</span>
|
|
||||||
<span className="dim" style={{ fontSize: '0.7rem', marginLeft: 8 }}>
|
|
||||||
via {p.source_header}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
|
|
||||||
{p.claim_category && (
|
|
||||||
<Tag color="var(--warn, #e0a040)">
|
|
||||||
{String(p.claim_category).toUpperCase()}
|
|
||||||
</Tag>
|
|
||||||
)}
|
|
||||||
<Tag>WAF-BYPASS ATTEMPT</Tag>
|
|
||||||
</div>
|
|
||||||
{p.source_ip && (
|
|
||||||
<div className="dim" style={{ fontSize: '0.7rem', fontFamily: 'monospace' }}>
|
|
||||||
real source · {p.source_ip}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
const FpHttpQuirks: React.FC<{ p: any }> = ({ p }) => {
|
|
||||||
const order: string[] = Array.isArray(p.order) ? p.order : [];
|
|
||||||
return (
|
|
||||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
|
|
||||||
<HashRow label="ORDER HASH" value={p.order_hash} />
|
|
||||||
<HashRow label="CASING HASH" value={p.casing_hash} />
|
|
||||||
<div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
|
|
||||||
{p.tool_guess && (
|
|
||||||
<Tag color="var(--violet)">{String(p.tool_guess).toUpperCase()}</Tag>
|
|
||||||
)}
|
|
||||||
{p.casing_category && (
|
|
||||||
<Tag>CASE · {String(p.casing_category).toUpperCase()}</Tag>
|
|
||||||
)}
|
|
||||||
{typeof p.stable_count === 'number' && (
|
|
||||||
<Tag>{p.stable_count} STABLE HEADERS</Tag>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
{order.length > 0 && (
|
|
||||||
<details>
|
|
||||||
<summary className="dim" style={{ fontSize: '0.7rem', cursor: 'pointer', letterSpacing: '1px' }}>
|
|
||||||
HEADER ORDER
|
|
||||||
</summary>
|
|
||||||
<div style={{ display: 'flex', gap: '4px', flexWrap: 'wrap', marginTop: '4px' }}>
|
|
||||||
{order.map((h, i) => (
|
|
||||||
<Tag key={`${h}-${i}`}>{h}</Tag>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</details>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const FingerprintGroup: React.FC<{ fpType: string; items: any[] }> = ({ fpType, items }) => {
|
|
||||||
const label = fpTypeLabel[fpType] || fpType.toUpperCase().replace(/_/g, ' ');
|
|
||||||
const icon = fpTypeIcon[fpType] || <Fingerprint size={14} />;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div style={{
|
|
||||||
border: '1px solid var(--border-color)',
|
|
||||||
padding: '12px 16px',
|
|
||||||
}}>
|
|
||||||
<div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '10px' }}>
|
|
||||||
<span style={{ opacity: 0.6 }}>{icon}</span>
|
|
||||||
<span style={{ fontSize: '0.75rem', letterSpacing: '2px', fontWeight: 'bold' }}>{label}</span>
|
|
||||||
{items.length > 1 && (
|
|
||||||
<span className="dim" style={{ fontSize: '0.7rem' }}>({items.length})</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
|
|
||||||
{items.map((fp, i) => {
|
|
||||||
const p = getPayload(fp);
|
|
||||||
switch (fpType) {
|
|
||||||
case 'ja3': return <FpTlsHashes key={i} p={p} />;
|
|
||||||
case 'ja4l': return <FpLatency key={i} p={p} />;
|
|
||||||
case 'tls_resumption': return <FpResumption key={i} p={p} />;
|
|
||||||
case 'tls_certificate':
|
|
||||||
case 'tls_certificate_active':
|
|
||||||
case 'tls_certificate_passive':
|
|
||||||
return <FpCertificate key={i} p={p} />;
|
|
||||||
case 'jarm': return <FpJarm key={i} p={p} />;
|
|
||||||
case 'hassh_server': return <FpHassh key={i} p={p} />;
|
|
||||||
case 'tcpfp': return <FpTcpStack key={i} p={p} />;
|
|
||||||
case 'http_quirks': return <FpHttpQuirks key={i} p={p} />;
|
|
||||||
case 'http_useragent': return <FpUserAgent key={i} p={p} />;
|
|
||||||
case 'spoofed_source': return <FpSpoofedSource key={i} p={p} />;
|
|
||||||
default: return <FpGeneric key={i} p={p} />;
|
|
||||||
}
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
// ─── Behavioral profile blocks ──────────────────────────────────────────────
|
// ─── Behavioral profile blocks ──────────────────────────────────────────────
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,149 @@
|
|||||||
|
/**
|
||||||
|
* @vitest-environment jsdom
|
||||||
|
*/
|
||||||
|
import { describe, it, expect } from 'vitest';
|
||||||
|
import { render, screen } from '@testing-library/react';
|
||||||
|
import {
|
||||||
|
FingerprintGroup, FpUserAgent, FpHttpQuirks, FpResumption,
|
||||||
|
FpCertificate, FpSpoofedSource, FpTcpStack,
|
||||||
|
} from './renderers';
|
||||||
|
|
||||||
|
describe('FpUserAgent', () => {
|
||||||
|
it('renders the value, category tag, and any signals', () => {
|
||||||
|
render(
|
||||||
|
<FpUserAgent
|
||||||
|
p={{
|
||||||
|
value: 'sqlmap/1.7',
|
||||||
|
category: 'scanner',
|
||||||
|
tool: 'sqlmap',
|
||||||
|
signals: ['injection_like', 'suspicious_short'],
|
||||||
|
}}
|
||||||
|
/>,
|
||||||
|
);
|
||||||
|
expect(screen.getByText('sqlmap/1.7')).toBeInTheDocument();
|
||||||
|
expect(screen.getByText('SCANNER')).toBeInTheDocument();
|
||||||
|
expect(screen.getByText('SQLMAP')).toBeInTheDocument();
|
||||||
|
expect(screen.getByText('INJECTION LIKE')).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('shows the empty-UA placeholder when value is missing', () => {
|
||||||
|
render(<FpUserAgent p={{ category: 'empty' }} />);
|
||||||
|
expect(screen.getByText(/empty User-Agent/)).toBeInTheDocument();
|
||||||
|
expect(screen.getByText('EMPTY')).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('FpHttpQuirks', () => {
|
||||||
|
it('renders order hash, casing hash, and stable header count', () => {
|
||||||
|
render(
|
||||||
|
<FpHttpQuirks
|
||||||
|
p={{
|
||||||
|
order_hash: 'aaaaaaaabbbbbbbbcccccccc',
|
||||||
|
casing_hash: 'dddddddd',
|
||||||
|
tool_guess: 'curl',
|
||||||
|
casing_category: 'all_lower',
|
||||||
|
stable_count: 7,
|
||||||
|
order: ['Host', 'User-Agent', 'Accept'],
|
||||||
|
}}
|
||||||
|
/>,
|
||||||
|
);
|
||||||
|
expect(screen.getByText('CURL')).toBeInTheDocument();
|
||||||
|
expect(screen.getByText('CASE · ALL_LOWER')).toBeInTheDocument();
|
||||||
|
expect(screen.getByText('7 STABLE HEADERS')).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('FpResumption', () => {
|
||||||
|
it('parses comma-separated mechanisms into upper-case tags', () => {
|
||||||
|
render(<FpResumption p={{ mechanisms: 'session_id,session_ticket' }} />);
|
||||||
|
expect(screen.getByText('SESSION ID')).toBeInTheDocument();
|
||||||
|
expect(screen.getByText('SESSION TICKET')).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('accepts an array of mechanisms', () => {
|
||||||
|
render(<FpResumption p={{ mechanisms: ['psk'] }} />);
|
||||||
|
expect(screen.getByText('PSK')).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('FpCertificate', () => {
|
||||||
|
it('renders a self-signed badge and shortened sha-256', () => {
|
||||||
|
render(
|
||||||
|
<FpCertificate
|
||||||
|
p={{
|
||||||
|
subject_cn: 'evil.example',
|
||||||
|
self_signed: 'true',
|
||||||
|
cert_sha256: 'abcdef1234567890abcdef1234567890abcdef1234567890abcdef1234567890',
|
||||||
|
}}
|
||||||
|
/>,
|
||||||
|
);
|
||||||
|
expect(screen.getByText('SELF-SIGNED')).toBeInTheDocument();
|
||||||
|
expect(screen.getByText('evil.example')).toBeInTheDocument();
|
||||||
|
expect(screen.getByText(/abcdef1234567890…/)).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('FpSpoofedSource', () => {
|
||||||
|
it('renders the WAF-bypass tag and claim category', () => {
|
||||||
|
render(
|
||||||
|
<FpSpoofedSource
|
||||||
|
p={{
|
||||||
|
claimed_ip: '1.1.1.1',
|
||||||
|
source_header: 'X-Forwarded-For',
|
||||||
|
claim_category: 'rfc1918',
|
||||||
|
source_ip: '8.8.8.8',
|
||||||
|
}}
|
||||||
|
/>,
|
||||||
|
);
|
||||||
|
expect(screen.getByText('WAF-BYPASS ATTEMPT')).toBeInTheDocument();
|
||||||
|
expect(screen.getByText('RFC1918')).toBeInTheDocument();
|
||||||
|
expect(screen.getByText(/8\.8\.8\.8/)).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('FpTcpStack', () => {
|
||||||
|
it('renders DF flag, SACK/TS toggles, and window scale', () => {
|
||||||
|
render(
|
||||||
|
<FpTcpStack
|
||||||
|
p={{
|
||||||
|
hash: 'tcp-hash',
|
||||||
|
ttl: 64,
|
||||||
|
window_size: 65535,
|
||||||
|
df_bit: '1',
|
||||||
|
sack_ok: '1',
|
||||||
|
timestamp: '0',
|
||||||
|
window_scale: '7',
|
||||||
|
}}
|
||||||
|
/>,
|
||||||
|
);
|
||||||
|
expect(screen.getByText('DF')).toBeInTheDocument();
|
||||||
|
expect(screen.getByText('SACK')).toBeInTheDocument();
|
||||||
|
expect(screen.getByText('WSCALE:7')).toBeInTheDocument();
|
||||||
|
expect(screen.queryByText('TS')).toBeNull();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('FingerprintGroup', () => {
|
||||||
|
it('dispatches by fpType and renders the canonical label', () => {
|
||||||
|
render(
|
||||||
|
<FingerprintGroup
|
||||||
|
fpType="ja3"
|
||||||
|
items={[{ payload: { ja3: 'aaaaaaaa', ja4: 'bbbbbbbb' } }]}
|
||||||
|
/>,
|
||||||
|
);
|
||||||
|
expect(screen.getByText('TLS FINGERPRINT')).toBeInTheDocument();
|
||||||
|
expect(screen.getByText('aaaaaaaa')).toBeInTheDocument();
|
||||||
|
expect(screen.getByText('bbbbbbbb')).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('falls back to FpGeneric for unknown types', () => {
|
||||||
|
render(
|
||||||
|
<FingerprintGroup
|
||||||
|
fpType="weird_unknown"
|
||||||
|
items={[{ payload: { value: 'mystery-value' } }]}
|
||||||
|
/>,
|
||||||
|
);
|
||||||
|
expect(screen.getByText('WEIRD UNKNOWN')).toBeInTheDocument();
|
||||||
|
expect(screen.getByText('mystery-value')).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -0,0 +1,91 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import {
|
||||||
|
Clock, Crosshair, FileKey, Fingerprint, Lock, Shield, Wifi,
|
||||||
|
} from '../../../icons';
|
||||||
|
|
||||||
|
export const fpTypeLabel: Record<string, string> = {
|
||||||
|
ja3: 'TLS FINGERPRINT',
|
||||||
|
ja4l: 'LATENCY (JA4L)',
|
||||||
|
tls_resumption: 'SESSION RESUMPTION',
|
||||||
|
tls_certificate: 'CERTIFICATE',
|
||||||
|
tls_certificate_active: 'CERTIFICATE (ACTIVE PROBE)',
|
||||||
|
tls_certificate_passive: 'CERTIFICATE',
|
||||||
|
http_useragent: 'HTTP USER-AGENT',
|
||||||
|
http_quirks: 'HTTP HEADER QUIRKS',
|
||||||
|
spoofed_source: 'SPOOFED SOURCE IP',
|
||||||
|
vnc_client_version: 'VNC CLIENT',
|
||||||
|
jarm: 'JARM',
|
||||||
|
hassh_server: 'HASSH SERVER',
|
||||||
|
tcpfp: 'TCP/IP STACK',
|
||||||
|
};
|
||||||
|
|
||||||
|
export const fpTypeIcon: Record<string, React.ReactNode> = {
|
||||||
|
ja3: <Fingerprint size={14} />,
|
||||||
|
ja4l: <Clock size={14} />,
|
||||||
|
tls_resumption: <Wifi size={14} />,
|
||||||
|
tls_certificate: <FileKey size={14} />,
|
||||||
|
tls_certificate_active: <FileKey size={14} />,
|
||||||
|
tls_certificate_passive: <FileKey size={14} />,
|
||||||
|
http_useragent: <Shield size={14} />,
|
||||||
|
http_quirks: <Fingerprint size={14} />,
|
||||||
|
spoofed_source: <Crosshair size={14} />,
|
||||||
|
vnc_client_version: <Lock size={14} />,
|
||||||
|
jarm: <Crosshair size={14} />,
|
||||||
|
hassh_server: <Lock size={14} />,
|
||||||
|
tcpfp: <Wifi size={14} />,
|
||||||
|
};
|
||||||
|
|
||||||
|
export const UA_CATEGORY_COLOR: Record<string, string> = {
|
||||||
|
scanner: 'var(--alert, #ff4d4d)',
|
||||||
|
nonstandard: 'var(--warn, #e0a040)',
|
||||||
|
empty: 'var(--warn, #e0a040)',
|
||||||
|
bot: 'var(--violet)',
|
||||||
|
cli: 'var(--matrix)',
|
||||||
|
library: 'var(--matrix)',
|
||||||
|
browser: 'var(--accent-color)',
|
||||||
|
};
|
||||||
|
|
||||||
|
export const UA_SIGNAL_COLOR: Record<string, string> = {
|
||||||
|
injection_like: 'var(--alert, #ff4d4d)',
|
||||||
|
nonprintable: 'var(--alert, #ff4d4d)',
|
||||||
|
suspicious_long: 'var(--warn, #e0a040)',
|
||||||
|
suspicious_short: 'var(--warn, #e0a040)',
|
||||||
|
};
|
||||||
|
|
||||||
|
/** Bounty payloads can be either a parsed object or a raw JSON string
|
||||||
|
* depending on producer; normalize before handing to the renderers. */
|
||||||
|
export function getPayload(bounty: unknown): Record<string, unknown> {
|
||||||
|
const b = bounty as { payload?: unknown } | null | undefined;
|
||||||
|
if (b?.payload && typeof b.payload === 'object') {
|
||||||
|
return b.payload as Record<string, unknown>;
|
||||||
|
}
|
||||||
|
if (b?.payload && typeof b.payload === 'string') {
|
||||||
|
try { return JSON.parse(b.payload) as Record<string, unknown>; }
|
||||||
|
catch { return (bounty ?? {}) as Record<string, unknown>; }
|
||||||
|
}
|
||||||
|
return (bounty ?? {}) as Record<string, unknown>;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Random ISN/IP-ID is the modern default; non-random patterns are
|
||||||
|
// fingerprinting gold (legacy stacks, custom raw-socket tools).
|
||||||
|
export const seqClassColor = (cls: string): string | undefined => {
|
||||||
|
switch (cls) {
|
||||||
|
case 'random': return undefined; // neutral, expected
|
||||||
|
case 'incremental': return '#e5c07b'; // amber — uncommon
|
||||||
|
case 'zero':
|
||||||
|
case 'constant': return '#98c379'; // green — strong signal
|
||||||
|
default: return undefined;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const HashRow: React.FC<{ label: string; value?: string | null }> = ({ label, value }) => {
|
||||||
|
if (!value) return null;
|
||||||
|
return (
|
||||||
|
<div style={{ display: 'flex', gap: '8px', alignItems: 'baseline' }}>
|
||||||
|
<span className="dim" style={{ fontSize: '0.7rem', minWidth: '36px' }}>{label}</span>
|
||||||
|
<span className="matrix-text" style={{ fontFamily: 'monospace', fontSize: '0.8rem', wordBreak: 'break-all' }}>
|
||||||
|
{value}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,10 @@
|
|||||||
|
export { FingerprintGroup } from './renderers';
|
||||||
|
export {
|
||||||
|
FpTlsHashes, FpLatency, FpResumption, FpCertificate, FpJarm,
|
||||||
|
FpHassh, FpTcpStack, FpGeneric, FpUserAgent, FpSpoofedSource,
|
||||||
|
FpHttpQuirks,
|
||||||
|
} from './renderers';
|
||||||
|
export {
|
||||||
|
fpTypeLabel, fpTypeIcon, getPayload, seqClassColor,
|
||||||
|
UA_CATEGORY_COLOR, UA_SIGNAL_COLOR, HashRow,
|
||||||
|
} from './helpers';
|
||||||
@@ -0,0 +1,362 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Fingerprint } from '../../../icons';
|
||||||
|
import { Tag } from '../ui';
|
||||||
|
import {
|
||||||
|
fpTypeIcon, fpTypeLabel, getPayload, HashRow,
|
||||||
|
UA_CATEGORY_COLOR, UA_SIGNAL_COLOR,
|
||||||
|
} from './helpers';
|
||||||
|
|
||||||
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||||
|
|
||||||
|
export const FpTlsHashes: React.FC<{ p: any }> = ({ p }) => (
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
|
||||||
|
<HashRow label="JA3" value={p.ja3} />
|
||||||
|
<HashRow label="JA3S" value={p.ja3s} />
|
||||||
|
<HashRow label="JA4" value={p.ja4} />
|
||||||
|
<HashRow label="JA4S" value={p.ja4s} />
|
||||||
|
{(p.tls_version || p.sni || p.alpn) && (
|
||||||
|
<div style={{ display: 'flex', gap: '8px', marginTop: '4px', flexWrap: 'wrap' }}>
|
||||||
|
{p.tls_version && <Tag>{p.tls_version}</Tag>}
|
||||||
|
{p.sni && <Tag color="var(--accent-color)">SNI: {p.sni}</Tag>}
|
||||||
|
{p.alpn && <Tag>ALPN: {p.alpn}</Tag>}
|
||||||
|
{p.dst_port && <Tag>:{p.dst_port}</Tag>}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
export const FpLatency: React.FC<{ p: any }> = ({ p }) => (
|
||||||
|
<div style={{ display: 'flex', gap: '24px', alignItems: 'center' }}>
|
||||||
|
<div>
|
||||||
|
<span className="dim" style={{ fontSize: '0.7rem' }}>RTT </span>
|
||||||
|
<span className="matrix-text" style={{ fontSize: '1.2rem', fontWeight: 'bold' }}>
|
||||||
|
{p.rtt_ms}
|
||||||
|
</span>
|
||||||
|
<span className="dim" style={{ fontSize: '0.7rem' }}> ms</span>
|
||||||
|
</div>
|
||||||
|
{p.client_ttl && (
|
||||||
|
<div>
|
||||||
|
<span className="dim" style={{ fontSize: '0.7rem' }}>TTL </span>
|
||||||
|
<span className="matrix-text" style={{ fontSize: '1.2rem', fontWeight: 'bold' }}>
|
||||||
|
{p.client_ttl}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
export const FpResumption: React.FC<{ p: any }> = ({ p }) => {
|
||||||
|
const mechanisms = typeof p.mechanisms === 'string'
|
||||||
|
? p.mechanisms.split(',')
|
||||||
|
: Array.isArray(p.mechanisms) ? p.mechanisms : [];
|
||||||
|
return (
|
||||||
|
<div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
|
||||||
|
{mechanisms.map((m: string) => (
|
||||||
|
<Tag key={m} color="var(--accent-color)">{m.trim().toUpperCase().replace(/_/g, ' ')}</Tag>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const FpCertificate: React.FC<{ p: any }> = ({ p }) => (
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
|
||||||
|
<div style={{ display: 'flex', gap: '8px', alignItems: 'center', flexWrap: 'wrap' }}>
|
||||||
|
<span className="matrix-text" style={{ fontFamily: 'monospace', fontSize: '0.85rem' }}>
|
||||||
|
{p.subject_cn}
|
||||||
|
</span>
|
||||||
|
{p.self_signed === 'true' && (
|
||||||
|
<Tag color="#ff6b6b">SELF-SIGNED</Tag>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{p.issuer && (
|
||||||
|
<div>
|
||||||
|
<span className="dim" style={{ fontSize: '0.7rem' }}>ISSUER: </span>
|
||||||
|
<span style={{ fontSize: '0.8rem' }}>{p.issuer}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{(p.not_before || p.not_after) && (
|
||||||
|
<div>
|
||||||
|
<span className="dim" style={{ fontSize: '0.7rem' }}>VALIDITY: </span>
|
||||||
|
<span style={{ fontSize: '0.75rem', fontFamily: 'monospace' }}>
|
||||||
|
{p.not_before || '?'} — {p.not_after || '?'}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{p.sans && (
|
||||||
|
<div style={{ display: 'flex', gap: '6px', flexWrap: 'wrap', marginTop: '2px' }}>
|
||||||
|
<span className="dim" style={{ fontSize: '0.7rem' }}>SANs: </span>
|
||||||
|
{(typeof p.sans === 'string' ? p.sans.split(',') : p.sans).map((san: string) => (
|
||||||
|
<Tag key={san}>{san.trim()}</Tag>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{p.cert_sha256 && (
|
||||||
|
<div>
|
||||||
|
<span className="dim" style={{ fontSize: '0.7rem' }}>SHA-256: </span>
|
||||||
|
<span style={{ fontSize: '0.75rem', fontFamily: 'monospace' }} title={p.cert_sha256}>
|
||||||
|
{p.cert_sha256.slice(0, 16)}…{p.cert_sha256.slice(-8)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{p.target_ip && (
|
||||||
|
<div>
|
||||||
|
<span className="dim" style={{ fontSize: '0.7rem' }}>FROM: </span>
|
||||||
|
<span style={{ fontSize: '0.75rem', fontFamily: 'monospace' }}>
|
||||||
|
{p.target_ip}{p.target_port ? `:${p.target_port}` : ''}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
export const FpJarm: React.FC<{ p: any }> = ({ p }) => (
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
|
||||||
|
<HashRow label="HASH" value={p.hash} />
|
||||||
|
{(p.target_ip || p.target_port) && (
|
||||||
|
<div style={{ display: 'flex', gap: '8px', marginTop: '4px', flexWrap: 'wrap' }}>
|
||||||
|
{p.target_ip && <Tag color="var(--accent-color)">{p.target_ip}</Tag>}
|
||||||
|
{p.target_port && <Tag>:{p.target_port}</Tag>}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
export const FpHassh: React.FC<{ p: any }> = ({ p }) => (
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
|
||||||
|
<HashRow label="HASH" value={p.hash} />
|
||||||
|
{p.ssh_banner && (
|
||||||
|
<div>
|
||||||
|
<span className="dim" style={{ fontSize: '0.7rem' }}>BANNER: </span>
|
||||||
|
<span className="matrix-text" style={{ fontFamily: 'monospace', fontSize: '0.8rem' }}>{p.ssh_banner}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{p.kex_algorithms && (
|
||||||
|
<details style={{ marginTop: '2px' }}>
|
||||||
|
<summary className="dim" style={{ fontSize: '0.7rem', cursor: 'pointer', letterSpacing: '1px' }}>
|
||||||
|
KEX ALGORITHMS
|
||||||
|
</summary>
|
||||||
|
<div style={{ display: 'flex', gap: '6px', flexWrap: 'wrap', marginTop: '4px' }}>
|
||||||
|
{p.kex_algorithms.split(',').map((algo: string) => (
|
||||||
|
<Tag key={algo}>{algo.trim()}</Tag>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
)}
|
||||||
|
{p.encryption_s2c && (
|
||||||
|
<details>
|
||||||
|
<summary className="dim" style={{ fontSize: '0.7rem', cursor: 'pointer', letterSpacing: '1px' }}>
|
||||||
|
ENCRYPTION (S→C)
|
||||||
|
</summary>
|
||||||
|
<div style={{ display: 'flex', gap: '6px', flexWrap: 'wrap', marginTop: '4px' }}>
|
||||||
|
{p.encryption_s2c.split(',').map((algo: string) => (
|
||||||
|
<Tag key={algo}>{algo.trim()}</Tag>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
)}
|
||||||
|
{(p.target_ip || p.target_port) && (
|
||||||
|
<div style={{ display: 'flex', gap: '8px', marginTop: '4px', flexWrap: 'wrap' }}>
|
||||||
|
{p.target_ip && <Tag color="var(--accent-color)">{p.target_ip}</Tag>}
|
||||||
|
{p.target_port && <Tag>:{p.target_port}</Tag>}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
export const FpTcpStack: React.FC<{ p: any }> = ({ p }) => (
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
|
||||||
|
<HashRow label="HASH" value={p.hash} />
|
||||||
|
<div style={{ display: 'flex', gap: '24px', alignItems: 'center', flexWrap: 'wrap' }}>
|
||||||
|
{p.ttl && (
|
||||||
|
<div>
|
||||||
|
<span className="dim" style={{ fontSize: '0.7rem' }}>TTL </span>
|
||||||
|
<span className="matrix-text" style={{ fontSize: '1.2rem', fontWeight: 'bold' }}>{p.ttl}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{p.window_size && (
|
||||||
|
<div>
|
||||||
|
<span className="dim" style={{ fontSize: '0.7rem' }}>WIN </span>
|
||||||
|
<span className="matrix-text" style={{ fontSize: '1.2rem', fontWeight: 'bold' }}>{p.window_size}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{p.mss && (
|
||||||
|
<div>
|
||||||
|
<span className="dim" style={{ fontSize: '0.7rem' }}>MSS </span>
|
||||||
|
<span className="matrix-text" style={{ fontSize: '1rem' }}>{p.mss}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
|
||||||
|
{p.df_bit === '1' && <Tag color="#ff6b6b">DF</Tag>}
|
||||||
|
{p.sack_ok === '1' && <Tag>SACK</Tag>}
|
||||||
|
{p.timestamp === '1' && <Tag>TS</Tag>}
|
||||||
|
{p.window_scale && p.window_scale !== '-1' && <Tag>WSCALE:{p.window_scale}</Tag>}
|
||||||
|
</div>
|
||||||
|
{p.options_order && (
|
||||||
|
<div>
|
||||||
|
<span className="dim" style={{ fontSize: '0.7rem' }}>OPTS: </span>
|
||||||
|
<span className="matrix-text" style={{ fontFamily: 'monospace', fontSize: '0.8rem' }}>{p.options_order}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{(p.target_ip || p.target_port) && (
|
||||||
|
<div style={{ display: 'flex', gap: '8px', marginTop: '2px', flexWrap: 'wrap' }}>
|
||||||
|
{p.target_ip && <Tag color="var(--accent-color)">{p.target_ip}</Tag>}
|
||||||
|
{p.target_port && <Tag>:{p.target_port}</Tag>}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
export const FpGeneric: React.FC<{ p: any }> = ({ p }) => (
|
||||||
|
<div>
|
||||||
|
{p.value ? (
|
||||||
|
<span className="matrix-text" style={{ fontFamily: 'monospace', fontSize: '0.85rem' }}>
|
||||||
|
{p.value}
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
<span className="dim" style={{ fontSize: '0.8rem', wordBreak: 'break-all' }}>
|
||||||
|
{JSON.stringify(p)}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
export const FpUserAgent: React.FC<{ p: any }> = ({ p }) => {
|
||||||
|
const category = typeof p.category === 'string' ? p.category : 'unknown';
|
||||||
|
const color = UA_CATEGORY_COLOR[category] || 'var(--text-color)';
|
||||||
|
const signals: string[] = Array.isArray(p.signals) ? p.signals : [];
|
||||||
|
return (
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
|
||||||
|
{p.value !== undefined && p.value !== '' ? (
|
||||||
|
<span
|
||||||
|
className="matrix-text"
|
||||||
|
style={{
|
||||||
|
fontFamily: 'monospace',
|
||||||
|
fontSize: '0.85rem',
|
||||||
|
wordBreak: 'break-all',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{p.value}
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
<span className="dim" style={{ fontStyle: 'italic' }}>
|
||||||
|
(empty User-Agent)
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
<div style={{ display: 'flex', gap: '6px', flexWrap: 'wrap' }}>
|
||||||
|
<Tag color={color}>{category.toUpperCase()}</Tag>
|
||||||
|
{p.tool && <Tag>{String(p.tool).toUpperCase()}</Tag>}
|
||||||
|
{signals.map((s) => (
|
||||||
|
<Tag key={s} color={UA_SIGNAL_COLOR[s] || 'var(--warn, #e0a040)'}>
|
||||||
|
{s.toUpperCase().replace(/_/g, ' ')}
|
||||||
|
</Tag>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const FpSpoofedSource: React.FC<{ p: any }> = ({ p }) => (
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
|
||||||
|
<div>
|
||||||
|
<span className="dim" style={{ fontSize: '0.7rem' }}>CLAIMED: </span>
|
||||||
|
<span style={{
|
||||||
|
color: 'var(--warn, #e0a040)',
|
||||||
|
fontFamily: 'monospace',
|
||||||
|
fontSize: '0.85rem',
|
||||||
|
}}>
|
||||||
|
{p.claimed_ip || '—'}
|
||||||
|
</span>
|
||||||
|
<span className="dim" style={{ fontSize: '0.7rem', marginLeft: 8 }}>
|
||||||
|
via {p.source_header}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
|
||||||
|
{p.claim_category && (
|
||||||
|
<Tag color="var(--warn, #e0a040)">
|
||||||
|
{String(p.claim_category).toUpperCase()}
|
||||||
|
</Tag>
|
||||||
|
)}
|
||||||
|
<Tag>WAF-BYPASS ATTEMPT</Tag>
|
||||||
|
</div>
|
||||||
|
{p.source_ip && (
|
||||||
|
<div className="dim" style={{ fontSize: '0.7rem', fontFamily: 'monospace' }}>
|
||||||
|
real source · {p.source_ip}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
export const FpHttpQuirks: React.FC<{ p: any }> = ({ p }) => {
|
||||||
|
const order: string[] = Array.isArray(p.order) ? p.order : [];
|
||||||
|
return (
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
|
||||||
|
<HashRow label="ORDER HASH" value={p.order_hash} />
|
||||||
|
<HashRow label="CASING HASH" value={p.casing_hash} />
|
||||||
|
<div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
|
||||||
|
{p.tool_guess && (
|
||||||
|
<Tag color="var(--violet)">{String(p.tool_guess).toUpperCase()}</Tag>
|
||||||
|
)}
|
||||||
|
{p.casing_category && (
|
||||||
|
<Tag>CASE · {String(p.casing_category).toUpperCase()}</Tag>
|
||||||
|
)}
|
||||||
|
{typeof p.stable_count === 'number' && (
|
||||||
|
<Tag>{p.stable_count} STABLE HEADERS</Tag>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{order.length > 0 && (
|
||||||
|
<details>
|
||||||
|
<summary className="dim" style={{ fontSize: '0.7rem', cursor: 'pointer', letterSpacing: '1px' }}>
|
||||||
|
HEADER ORDER
|
||||||
|
</summary>
|
||||||
|
<div style={{ display: 'flex', gap: '4px', flexWrap: 'wrap', marginTop: '4px' }}>
|
||||||
|
{order.map((h, i) => (
|
||||||
|
<Tag key={`${h}-${i}`}>{h}</Tag>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const FingerprintGroup: React.FC<{ fpType: string; items: any[] }> = ({ fpType, items }) => {
|
||||||
|
const label = fpTypeLabel[fpType] || fpType.toUpperCase().replace(/_/g, ' ');
|
||||||
|
const icon = fpTypeIcon[fpType] || <Fingerprint size={14} />;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{
|
||||||
|
border: '1px solid var(--border-color)',
|
||||||
|
padding: '12px 16px',
|
||||||
|
}}>
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '10px' }}>
|
||||||
|
<span style={{ opacity: 0.6 }}>{icon}</span>
|
||||||
|
<span style={{ fontSize: '0.75rem', letterSpacing: '2px', fontWeight: 'bold' }}>{label}</span>
|
||||||
|
{items.length > 1 && (
|
||||||
|
<span className="dim" style={{ fontSize: '0.7rem' }}>({items.length})</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
|
||||||
|
{items.map((fp, i) => {
|
||||||
|
const p = getPayload(fp);
|
||||||
|
switch (fpType) {
|
||||||
|
case 'ja3': return <FpTlsHashes key={i} p={p} />;
|
||||||
|
case 'ja4l': return <FpLatency key={i} p={p} />;
|
||||||
|
case 'tls_resumption': return <FpResumption key={i} p={p} />;
|
||||||
|
case 'tls_certificate':
|
||||||
|
case 'tls_certificate_active':
|
||||||
|
case 'tls_certificate_passive':
|
||||||
|
return <FpCertificate key={i} p={p} />;
|
||||||
|
case 'jarm': return <FpJarm key={i} p={p} />;
|
||||||
|
case 'hassh_server': return <FpHassh key={i} p={p} />;
|
||||||
|
case 'tcpfp': return <FpTcpStack key={i} p={p} />;
|
||||||
|
case 'http_quirks': return <FpHttpQuirks key={i} p={p} />;
|
||||||
|
case 'http_useragent': return <FpUserAgent key={i} p={p} />;
|
||||||
|
case 'spoofed_source': return <FpSpoofedSource key={i} p={p} />;
|
||||||
|
default: return <FpGeneric key={i} p={p} />;
|
||||||
|
}
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
Reference in New Issue
Block a user