marcus/mitm-webserver
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

frontedn updates and backend test without unknown in packet parser
All checks were successful
Build and Deploy MITM Webserver / build (push) Successful in 10s
Details

Browse Source
This commit is contained in:
malmert
2026-03-01 15:58:58 +01:00
parent 3fc5b6db48
commit f8647ab3ed
5 changed files with 364 additions and 365 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
backend/src/network_sniffer.py
View File

@@ -129,10 +129,10 @@ def parse_packet(pkt, bridge_label: str) -> None:
"src_mac": None,
"dst_mac": None,
"eth_type_raw": None,
"eth_type": EtherTypeEnum.UNKNOWN,
"eth_type": None,
"vlan_id": None,
"protocol_raw": None,
"protocol": IPProtocolEnum.UNKNOWN,
"protocol": None,
"protocol_name": None,
"src_ip": None,
"dst_ip": None,
@@ -197,7 +197,7 @@ def parse_packet(pkt, bridge_label: str) -> None:
try:
pkt_info["protocol"] = protocol_from_number(proto_num)
except Exception:
pkt_info["protocol"] = IPProtocolEnum.UNKNOWN
pkt_info["protocol"] = proto_num
if proto_num == 6 and TCP in pkt:
pkt_info["protocol_name"] = "TCP"
@@ -229,7 +229,7 @@ def parse_packet(pkt, bridge_label: str) -> None:
try:
pkt_info["protocol"] = protocol_from_number(nh)
except Exception:
pkt_info["protocol"] = IPProtocolEnum.UNKNOWN
pkt_info["protocol"] = nh
if nh == 6 and TCP in pkt:
pkt_info["protocol_name"] = "TCP"

2
frontend/src/Layout/Footer.tsx
View File

@@ -1,5 +1,5 @@
import { Footer } from 'antd/es/layout/layout';
export const AppFooter: React.FC = () => {
return <Footer>MitM Webserver App by Marcus Almert ©2025</Footer>;
return <Footer>MitM Webserver App by Marcus Almert ©2025-2026</Footer>;
};

36
frontend/src/api/apiClient.ts
View File

@@ -24,6 +24,7 @@ import {
SnifferStartRequest,
SnifferStartResponse,
SnifferStatusResponse,
SnifferStopRequest,
SnifferStopResponse,
} from '../types/sniffer';
@@ -104,21 +105,50 @@ export const removeBridge = async (req: BridgeRemoveRequest) => {
Sniffer
------------------------- */
/**
* Start a sniffer session. Provide exactly one of { bridge, interface }.
* Returns a session_id that you can use to stop the session later.
*/
export const startSniffer = async (payload: SnifferStartRequest): Promise<SnifferStartResponse> => {
const res = await api.post<SnifferStartResponse>('/sniffer/start', payload);
return res.data;
};
export const stopSniffer = async (): Promise<SnifferStopResponse> => {
const res = await api.post<SnifferStopResponse>('/sniffer/stop');
/**
* Stop sniffer(s).
* - If you pass a body with { session_id }, it will stop that specific session.
* - If you call without body and without query params, it will stop all sessions.
*/
export const stopSniffer = async (body?: SnifferStopRequest): Promise<SnifferStopResponse> => {
const res = await api.post<SnifferStopResponse>('/sniffer/stop', body ?? {});
return res.data;
};
/**
* Stop sniffing for a specific interface across sessions.
* Calls: POST /sniffer/stop?interface=eth0 (empty body)
*/
export const stopSnifferByInterface = async (iface: string): Promise<SnifferStopResponse> => {
const res = await api.post<SnifferStopResponse>(`/sniffer/stop?interface=${encodeURIComponent(iface)}`, {});
return res.data;
};
/**
* Stop sniffing for a specific bridge across sessions.
* Calls: POST /sniffer/stop?bridge=br0 (empty body)
*/
export const stopSnifferByBridge = async (bridge: string): Promise<SnifferStopResponse> => {
const res = await api.post<SnifferStopResponse>(`/sniffer/stop?bridge=${encodeURIComponent(bridge)}`, {});
return res.data;
};
/**
* Fetch the sniffer status (per-interface).
*/
export const fetchSnifferStatus = async (): Promise<SnifferStatusResponse> => {
const res = await api.get<SnifferStatusResponse>('/sniffer/status');
return res.data;
};
/* -------------------------
Packets
------------------------- */

642
frontend/src/pages/Sniffing.tsx
View File

@@ -3,398 +3,346 @@ import {
CheckCircleOutlined,
ExclamationCircleOutlined,
PlayCircleOutlined,
PlusOutlined,
ReloadOutlined,
StopOutlined,
SyncOutlined,
} from '@ant-design/icons';
import { Button, Card, Col, Divider, List, message, Row, Select, Space, Spin, Tag, Tooltip, Typography } from 'antd';
import { ReactElement, useCallback, useEffect, useState } from 'react';
import { fetchSnifferStatus as fetchSnifferStatusApi, startSniffer, stopSniffer } from '../api/apiClient';
import { useBackendAPI } from '../hooks/useBackendAPI';
import {
Button,
Card,
Col,
Form,
List,
message,
Modal,
Radio,
Row,
Select,
Space,
Spin,
Tag,
Tooltip,
Typography,
} from 'antd';
import { ReactElement, useCallback, useEffect, useMemo, useState } from 'react';
import {
fetchBridges,
fetchInterfaces,
fetchSnifferStatus,
startSniffer,
stopSniffer,
stopSnifferByInterface,
} from '../api/apiClient';
import { BridgeInfo, InterfaceInfo } from '../types/network';
import { InterfaceSnifferStatus } from '../types/sniffer';
const { Title, Text } = Typography;
const { Option } = Select;
/** Local type for the interface objects returned by your backend/hook.
* Adjust fields if your backend has different shape.
*/
type NetworkInterface = {
ifindex: number;
name: string;
state?: string;
mac?: string;
mtu?: number;
flags?: string[];
addresses?: string[];
};
export default function Sniffing(): ReactElement {
const {
interfacesQuery,
bridgesQuery,
fetchInterfaces,
fetchBridges,
refreshInterfaces,
refreshBridges,
snifferStatusQuery,
} = useBackendAPI();
// local UI state
const [selectedInterface, setSelectedInterface] = useState<string | undefined>(undefined);
const [busy, setBusy] = useState(false);
const [interfaces, setInterfaces] = useState<InterfaceInfo[]>([]);
const [bridges, setBridges] = useState<BridgeInfo[]>([]);
const [statusMap, setStatusMap] = useState<Record<string, InterfaceSnifferStatus>>({});
const [loading, setLoading] = useState(false);
const [statusLoading, setStatusLoading] = useState(false);
// ensure data is fetched on mount
// modal / form
const [isModalOpen, setIsModalOpen] = useState(false);
const [startMode, setStartMode] = useState<'interface' | 'bridge'>('interface');
const [form] = Form.useForm();
// initial load
useEffect(() => {
fetchInterfaces().catch(() => {});
fetchSnifferStatusApi().catch(() => {});
if (fetchBridges) fetchBridges().catch(() => {});
}, [fetchInterfaces, fetchBridges]);
// Properly type interfaces as array of objects (not string[])
const interfaces = (interfacesQuery?.data ?? []) as NetworkInterface[];
const bridges = (bridgesQuery?.data ?? []) as Array<{ name: string }>;
const statusMap = (snifferStatusQuery?.data?.interfaces ?? {}) as Record<string, InterfaceSnifferStatus>;
// Explicitly type entries so renderItem knows the types
const statusEntries = Object.entries(statusMap) as [string, InterfaceSnifferStatus][];
refreshAll().catch(() => {});
}, []);
const refreshAll = useCallback(async () => {
setLoading(true);
try {
if (refreshInterfaces) await refreshInterfaces();
if (snifferStatusQuery?.refetch) await snifferStatusQuery.refetch();
if (refreshBridges) await refreshBridges();
} catch {
// ignore — queries will surface errors
}
}, [refreshInterfaces, snifferStatusQuery, refreshBridges]);
const [ifs, brs] = await Promise.allSettled([fetchInterfaces(), fetchBridges()]);
if (ifs.status === 'fulfilled') setInterfaces(ifs.value);
if (brs.status === 'fulfilled') setBridges(brs.value);
// actions
const handleStart = async () => {
if (!selectedInterface) {
message.warning('Please select an interface to start sniffing on.');
await refreshStatus();
} catch (err) {
// ignore; errors handled in individual calls
} finally {
setLoading(false);
}
}, []);
const refreshStatus = useCallback(async () => {
setStatusLoading(true);
try {
const st = await fetchSnifferStatus();
setStatusMap(st.interfaces ?? {});
} catch (err: any) {
console.error('fetchSnifferStatus error', err);
message.error(err?.message ?? 'Failed to fetch sniffer status');
} finally {
setStatusLoading(false);
}
}, []);
// derived entries
const statusEntries = useMemo(() => Object.entries(statusMap) as [string, InterfaceSnifferStatus][], [statusMap]);
// open/close modal
const onOpenStartModal = () => {
form.resetFields();
setStartMode('interface');
setIsModalOpen(true);
};
const onCloseModal = () => setIsModalOpen(false);
// start submit
const handleStartSubmit = async (values: any) => {
const { target } = values;
if (!target) {
message.warning('Please select a target to start sniffing on.');
return;
}
setBusy(true);
setLoading(true);
try {
await startSniffer({ bridge: selectedInterface });
message.success(`Sniffer started on ${selectedInterface}`);
await refreshAll();
const payload = startMode === 'interface' ? { interface: target } : { bridge: target };
const res = await startSniffer(payload);
message.success(`Sniffer started on ${target} (session ${res.session_id})`);
await refreshStatus();
// if interface/bridge lists may have changed, refresh them too
try {
const [ifs, brs] = await Promise.allSettled([fetchInterfaces(), fetchBridges()]);
if (ifs.status === 'fulfilled') setInterfaces(ifs.value);
if (brs.status === 'fulfilled') setBridges(brs.value);
} catch {}
setIsModalOpen(false);
} catch (err: any) {
console.error('startSniffer error', err);
message.error(err?.message ?? 'Failed to start sniffer');
} finally {
setBusy(false);
setLoading(false);
}
};
const handleStop = async () => {
setBusy(true);
// stop all
const handleStopAll = async () => {
setLoading(true);
try {
await stopSniffer();
message.success('Sniffer stopped');
await refreshAll();
message.success('All sniffers stopped');
await refreshStatus();
} catch (err: any) {
console.error('stopSniffer error', err);
message.error(err?.message ?? 'Failed to stop sniffer');
message.error(err?.message ?? 'Failed to stop sniffers');
} finally {
setBusy(false);
setLoading(false);
}
};
// Quick action per-interface (start/stop)
const handleStartOn = async (ifaceName: string) => {
setBusy(true);
// stop per-interface
const handleStopFromList = async (ifaceName: string, session_id?: string | null) => {
setLoading(true);
try {
await startSniffer({ bridge: ifaceName });
message.success(`Started sniffer on ${ifaceName}`);
await refreshAll();
// prefer stop by interface
await stopSnifferByInterface(ifaceName);
message.success(`Stopped sniffing on ${ifaceName}`);
await refreshStatus();
return;
} catch (err: any) {
console.error('handleStartOn error', err);
message.error(err?.message ?? `Failed to start on ${ifaceName}`);
} finally {
setBusy(false);
}
};
const handleStopFromList = async (ifaceName?: string) => {
setBusy(true);
try {
await stopSniffer();
message.success(`Stopped sniffer${ifaceName ? ` (requested from ${ifaceName})` : ''}`);
await refreshAll();
} catch (err: any) {
console.error('handleStopFromList error', err);
console.error('stopSnifferByInterface error', err);
// try stop by session as fallback
if (session_id) {
try {
await stopSniffer({ session_id });
message.success(`Stopped session ${session_id}`);
await refreshStatus();
return;
} catch (err2: any) {
console.error('stopSniffer by session fallback failed', err2);
}
}
message.error(err?.message ?? 'Failed to stop sniffer');
} finally {
setBusy(false);
setLoading(false);
}
};
return (
<div style={{ padding: 16 }}>
<Row gutter={[16, 16]}>
<Col span={16}>
<Card>
<Row justify="space-between" align="middle">
<Col>
<Title level={4} style={{ margin: 0 }}>
Sniffing
</Title>
<Text type="secondary">Start, stop and view AF_PACKET sniffer status</Text>
</Col>
<Col>
<Space>
<Tooltip title="Refresh interfaces & status">
<Button icon={<ReloadOutlined />} onClick={() => refreshAll()} disabled={busy} />
</Tooltip>
<Tooltip title="Refresh sniffer status">
<Button
icon={<SyncOutlined spin={snifferStatusQuery?.isFetching} />}
onClick={() => snifferStatusQuery?.refetch?.()}
disabled={busy}
/>
</Tooltip>
</Space>
</Col>
</Row>
<Divider />
<Space direction="vertical" size="middle" style={{ width: '100%' }}>
<Row gutter={[12, 12]} align="middle">
<Col>
<Text strong>Select interface / bridge</Text>
</Col>
<Col flex="1">
<Select
showSearch
placeholder="Choose interface or bridge"
style={{ width: '100%' }}
value={selectedInterface}
onChange={(val) => setSelectedInterface(val as string | undefined)}
loading={interfacesQuery?.isLoading}
allowClear
optionFilterProp="children"
filterOption={(input, option) =>
(option?.children as unknown as string)?.toLowerCase().includes(input.toLowerCase())
}
>
{/* interfaces from the system: use iface.name */}
{interfaces.map((iface) => (
<Option key={`if:${iface.name}`} value={iface.name}>
{iface.name}
</Option>
))}
{/* optional bridges (if present) */}
{bridges && bridges.length > 0 && (
<>
<Option key="__divider__" value="__divider__" disabled>
────────── bridges ──────────
</Option>
{bridges.map((b) => (
<Option key={`br:${b.name}`} value={b.name}>
{b.name}
</Option>
))}
</>
)}
</Select>
</Col>
<Col>
<Space>
<Button
type="primary"
icon={<PlayCircleOutlined />}
onClick={handleStart}
loading={busy && !snifferStatusQuery?.isFetching}
disabled={
!selectedInterface || busy || (selectedInterface && statusMap[selectedInterface]?.running)
}
>
Start
</Button>
<Button
danger
icon={<StopOutlined />}
onClick={handleStop}
loading={busy && !snifferStatusQuery?.isFetching}
disabled={busy}
>
Stop
</Button>
</Space>
</Col>
</Row>
<Row>
<Col span={24}>
<Text type="secondary">Tip: you can also start/stop directly from the list below.</Text>
</Col>
</Row>
</Space>
</Card>
<Divider />
<Card title="Sniffer status" bordered>
{snifferStatusQuery?.isLoading ? (
<div style={{ textAlign: 'center', padding: 24 }}>
<Spin />
</div>
) : snifferStatusQuery?.isError ? (
<div style={{ padding: 12 }}>
<Space direction="vertical">
<Text type="danger">Failed to load sniffer status.</Text>
<Text type="secondary">
{(snifferStatusQuery?.error as any)?.message ?? String(snifferStatusQuery?.error)}
</Text>
</Space>
</div>
) : statusEntries.length === 0 ? (
<div style={{ padding: 12 }}>
<Text type="secondary">No status information available.</Text>
</div>
) : (
<List
dataSource={statusEntries}
renderItem={([name, st]: [string, InterfaceSnifferStatus]) => {
const running = st.running;
const exists = st.exists;
const up = st.up;
return (
<List.Item
actions={[
running ? (
<Button
key="stop"
size="small"
icon={<StopOutlined />}
onClick={() => handleStopFromList(name)}
disabled={busy}
>
Stop
</Button>
) : (
<Button
key="start"
size="small"
type="primary"
icon={<PlayCircleOutlined />}
onClick={() => handleStartOn(name)}
disabled={busy}
>
Start
</Button>
),
]}
>
<List.Item.Meta
title={
<Space>
<Text strong>{name}</Text>
{running ? (
<Tag icon={<CheckCircleOutlined />} color="success">
running
</Tag>
) : (
<Tag icon={<ExclamationCircleOutlined />} color="default">
stopped
</Tag>
)}
{!exists && <Tag color="error">missing</Tag>}
{exists && !up && <Tag color="warning">down</Tag>}
{exists && up && <Tag color="processing">up</Tag>}
</Space>
}
description={
<Space size="small">
<Text type="secondary">interface: {name}</Text>
</Space>
}
/>
</List.Item>
);
}}
/>
)}
</Card>
</Col>
<Col span={8}>
<Card title="Quick actions" size="small" bordered>
<Space direction="vertical" style={{ width: '100%' }}>
<Button icon={<ReloadOutlined />} onClick={() => refreshAll()} block disabled={busy}>
Refresh all
</Button>
<Button icon={<SyncOutlined />} onClick={() => snifferStatusQuery?.refetch?.()} block disabled={busy}>
Refresh status
</Button>
<Divider />
<Button
icon={<PlayCircleOutlined />}
onClick={() => {
// start on selected, fallback to first available interface
const target = selectedInterface ?? interfaces[0]?.name;
if (!target) {
message.warning('No interface selected / available');
return;
}
setSelectedInterface(target);
handleStartOn(target);
}}
block
disabled={busy || interfaces.length === 0}
>
Start on selected / first
</Button>
<Button danger icon={<StopOutlined />} onClick={() => handleStop()} block disabled={busy}>
Stop sniffer
</Button>
</Space>
</Card>
<Card title="Available interfaces" size="small" style={{ marginTop: 12 }}>
{interfacesQuery?.isLoading ? (
<Spin />
) : interfaces.length === 0 ? (
<Text type="secondary">No interfaces found.</Text>
) : (
<List
size="small"
dataSource={interfaces}
renderItem={(iface: NetworkInterface) => <List.Item>{iface.name}</List.Item>}
/>
)}
</Card>
<Card title="Bridges" size="small" style={{ marginTop: 12 }}>
{bridgesQuery?.isLoading ? (
<Spin />
) : bridges.length === 0 ? (
<Text type="secondary">No bridges found.</Text>
) : (
<List
size="small"
dataSource={bridges}
renderItem={(b: { name: string }) => <List.Item>{b.name}</List.Item>}
/>
)}
</Card>
<Row justify="space-between" align="middle" style={{ marginBottom: 12 }}>
<Col>
<Title level={2} style={{ margin: 0 }}>
Sniffing
</Title>
<Text type="secondary">Start, stop and view AF_PACKET sniffer sessions</Text>
</Col>
</Row>
<Card
title="Sniffer sessions"
style={{ marginBottom: 16 }}
extra={
<Space>
<Tooltip title="Start a new sniffer session">
<Button icon={<PlusOutlined />} onClick={onOpenStartModal} />
</Tooltip>
<Tooltip title="Refresh status">
<Button icon={<ReloadOutlined />} onClick={() => refreshStatus()} />
</Tooltip>
<Tooltip title="Stop all sniffers">
<Button danger icon={<StopOutlined />} onClick={handleStopAll} />
</Tooltip>
</Space>
}
>
{statusLoading ? (
<div style={{ textAlign: 'center', padding: 24 }}>
<Spin />
</div>
) : statusEntries.length === 0 ? (
<div style={{ padding: 12 }}>
<Text type="secondary">No status information available.</Text>
</div>
) : (
<List
dataSource={statusEntries}
renderItem={([name, st]: [string, InterfaceSnifferStatus]) => {
const running = st.running;
const exists = st.exists;
const up = st.up;
const session_id = st.session_id ?? null;
const session_label = st.session_label ?? null;
return (
<List.Item
actions={[
running ? (
<Button
key="stop"
size="small"
icon={<StopOutlined />}
onClick={() => handleStopFromList(name, session_id)}
disabled={loading}
>
Stop
</Button>
) : (
<Button
key="start"
size="small"
type="primary"
icon={<PlayCircleOutlined />}
onClick={async () => {
// start on this interface
setLoading(true);
try {
const res = await startSniffer({ interface: name });
message.success(`Started sniffer on ${name} (session ${res.session_id})`);
await refreshStatus();
} catch (err: any) {
console.error('startSniffer quick', err);
message.error(err?.message ?? 'Failed to start sniffer');
} finally {
setLoading(false);
}
}}
disabled={loading}
>
Start
</Button>
),
]}
>
<List.Item.Meta
title={
<Space>
<Text strong>{name}</Text>
{running ? (
<Tag icon={<CheckCircleOutlined />} color="success">
running
</Tag>
) : (
<Tag icon={<ExclamationCircleOutlined />} color="default">
stopped
</Tag>
)}
{!exists && <Tag color="error">missing</Tag>}
{exists && !up && <Tag color="warning">down</Tag>}
{exists && up && <Tag color="processing">up</Tag>}
{session_id && (
<Tag>
{session_label ? `${session_label}` : 'session'}:{' '}
<Text code copyable={{ text: session_id }}>
{session_id.slice(0, 8)}
</Text>
</Tag>
)}
</Space>
}
description={<Text type="secondary">interface: {name}</Text>}
/>
</List.Item>
);
}}
/>
)}
</Card>
{/* Start sniffer modal */}
<Modal
title="Start sniffer session"
open={isModalOpen}
onCancel={onCloseModal}
onOk={() => form.submit()}
confirmLoading={loading}
okText="Start"
>
<Form form={form} layout="vertical" onFinish={handleStartSubmit} initialValues={{ target: undefined }}>
<Form.Item label="Mode" name="mode">
<Radio.Group
value={startMode}
onChange={(e) => {
setStartMode(e.target.value);
form.setFieldsValue({ target: undefined });
}}
>
<Radio value="interface">Interface</Radio>
<Radio value="bridge">Bridge</Radio>
</Radio.Group>
</Form.Item>
<Form.Item
label={startMode === 'interface' ? 'Interface' : 'Bridge'}
name="target"
rules={[{ required: true, message: 'Please select a target' }]}
>
<Select
showSearch
placeholder={startMode === 'interface' ? 'Select interface' : 'Select bridge'}
optionFilterProp="children"
filterOption={(input, option) =>
(option?.children as unknown as string)?.toLowerCase().includes(input.toLowerCase())
}
>
{startMode === 'interface'
? interfaces.map((i) => (
<Option key={`if:${i.name}`} value={i.name}>
{i.name}
</Option>
))
: bridges.map((b) => (
<Option key={`br:${b.ifname}`} value={b.ifname}>
{b.ifname} ({b.members.map((m) => m.ifname).join(', ')})
</Option>
))}
</Select>
</Form.Item>
</Form>
</Modal>
</div>
);
}

41
frontend/src/types/sniffer.ts
View File

@@ -1,20 +1,49 @@
/**
* Request to start a sniffer session.
* Exactly one of `bridge` or `interface` should be provided.
*/
export interface SnifferStartRequest {
bridge: string;
bridge?: string;
interface?: string;
}
/**
* Response returned when starting a sniffer session.
*/
export interface SnifferStartResponse {
started: boolean;
bridge: string;
session_id: string;
target: string;
target_type: 'bridge' | 'interface';
}
/**
* Optional body when stopping a sniffer session.
* Prefer providing session_id to stop a specific session.
*/
export interface SnifferStopRequest {
session_id?: string | null;
}
/**
* Response returned when stopping sniffer(s).
*/
export interface SnifferStopResponse {
stopped: boolean;
session_id?: string | null;
target?: string | null;
target_type?: 'bridge' | 'interface' | null;
}
/**
* Per-interface sniffer status (now includes owning session info).
*/
export interface InterfaceSnifferStatus {
running: boolean;
exists: boolean;
up: boolean;
session_id?: string | null;
session_label?: string | null;
}
/**
@@ -23,11 +52,3 @@ export interface InterfaceSnifferStatus {
export interface SnifferStatusResponse {
interfaces: Record<string, InterfaceSnifferStatus>;
}
/**
* Standard API error shape we expect from FastAPI HTTPException(detail=...)
*/
export interface ApiError {
detail?: string | Record<string, any>;
// FastAPI sometimes returns {"detail": "message"} or other shapes
}