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 { MailLogPanel } from './AttackerDetail/sections/MailLogPanel';
|
||||
import { Tag, Section } from './AttackerDetail/ui';
|
||||
import {
|
||||
FingerprintGroup, getPayload, seqClassColor,
|
||||
} from './AttackerDetail/fingerprints';
|
||||
import type {
|
||||
AttackerBehavior,
|
||||
BehaviouralObservation,
|
||||
@@ -27,441 +30,6 @@ import './Dashboard.css';
|
||||
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 ──────────────────────────────────────────────
|
||||
|
||||
|
||||
@@ -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