Simulated Page

Path: ${getRequestPacket.info.split(' ')[1]}

`; return { timestamp: simulationTime + Math.random() * 0.2, // Server processing delay sourceIp: SERVER_IP, destinationIp: CLIENT_IP, sourcePort: getRequestPacket.destinationPort, // 80 destinationPort: getRequestPacket.sourcePort, protocol: 'HTTP', subProtocol: 'TCP', info: `HTTP/1.1 ${status}`, payload: `HTTP/1.1 ${status}\r\nContent-Type: text/html\r\nContent-Length: ${body.length}\r\nConnection: close\r\n\r\n${body}`, isAnomaly: false, anomalyType: null, flowId: getRequestPacket.flowId }; }; const generateHttpFlow = () => { const clientPort = getRandomPort(); const packets = []; // Optional DNS lookup first if (Math.random() < 0.3) { const dnsQuery = generateDnsQuery('api.server.com'); packets.push(dnsQuery); packets.push(generateDnsResponse(dnsQuery)); simulationTime += 0.2; // Simulate DNS lookup time } // TCP Handshake packets.push(...generateHttpHandshake(clientPort, 80)); simulationTime += 0.1; // Simulate handshake time // HTTP GET Request const httpGet = generateHttpGet(clientPort, Math.random() < 0.5 ? '/index.html' : '/api/data'); packets.push(httpGet); simulationTime += 0.05; // HTTP Response (simple simulation) packets.push(generateHttpResponse(httpGet)); simulationTime += 0.1; // TCP FIN/ACK teardown (simplified) packets.push({ timestamp: simulationTime, sourceIp: CLIENT_IP, destinationIp: SERVER_IP, sourcePort: clientPort, destinationPort: 80, protocol: 'TCP', subProtocol: null, info: '[FIN, ACK] Seq=X Ack=Y', payload: 'TCP Teardown FIN', isAnomaly: false, anomalyType: null, flowId: httpGet.flowId }); packets.push({ timestamp: simulationTime + 0.02, sourceIp: SERVER_IP, destinationIp: CLIENT_IP, sourcePort: 80, destinationPort: clientPort, protocol: 'TCP', subProtocol: null, info: '[ACK] Seq=Y Ack=X+1', payload: 'TCP Teardown ACK', isAnomaly: false, anomalyType: null, flowId: httpGet.flowId }); packets.push({ timestamp: simulationTime + 0.04, sourceIp: SERVER_IP, destinationIp: CLIENT_IP, sourcePort: 80, destinationPort: clientPort, protocol: 'TCP', subProtocol: null, info: '[FIN, ACK] Seq=Y Ack=X+1', payload: 'TCP Teardown FIN', isAnomaly: false, anomalyType: null, flowId: httpGet.flowId }); packets.push({ timestamp: simulationTime + 0.06, sourceIp: CLIENT_IP, destinationIp: SERVER_IP, sourcePort: clientPort, destinationPort: 80, protocol: 'TCP', subProtocol: null, info: '[ACK] Seq=X+1 Ack=Y+1', payload: 'TCP Teardown ACK', isAnomaly: false, anomalyType: null, flowId: httpGet.flowId }); return packets; } const introduceAnomaly = (packet) => { const chance = parseInt(anomalyChanceInput.value, 10); if (Math.random() * 100 >= chance) return packet; // No anomaly this time packet.isAnomaly = true; const anomalyTypes = ['Unusual Port', 'Malformed Info', 'Strange Sequence', 'Wrong Protocol']; // Add more types const type = anomalyTypes[Math.floor(Math.random() * anomalyTypes.length)]; packet.anomalyType = type; switch (type) { case 'Unusual Port': if (packet.protocol === 'HTTP') packet.destinationPort = 8080; // Common proxy port, but unusual here else if (packet.protocol === 'DNS') packet.destinationPort = 5353; // mDNS port else packet.sourcePort = Math.floor(Math.random() * 1024); // Use a well-known port as source packet.info += ` [ANOMALY: Unusual Port ${packet.destinationPort}]`; break; case 'Malformed Info': packet.info = packet.info.substring(0, packet.info.length / 2) + "... [Malformed Info]"; packet.payload = "Invalid$Data@*&"; // Simulate garbage payload break; case 'Strange Sequence': // e.g., Send HTTP request before TCP handshake (harder to simulate realistically here) // For simplicity, just mark it. A real tool would correlate packets. packet.info += " [ANOMALY: Out of Order?]"; // Could swap src/dest IP for confusion // [packet.sourceIp, packet.destinationIp] = [packet.destinationIp, packet.sourceIp]; break; case 'Wrong Protocol': if (packet.protocol === 'HTTP') { packet.protocol = 'FTP'; // Pretend it's FTP traffic on port 80 packet.info = `USER anonymous [ANOMALY: Wrong Protocol?]`; } else if (packet.protocol === 'DNS') { packet.protocol = 'SNMP'; // Something unlikely packet.info = `GET request-id=123 [ANOMALY: Wrong Protocol?]` } break; } return packet; }; const generatePacketBatch = (rate) => { const packetsToAdd = []; const packetsThisSecond = Math.random() * rate * 0.5 + rate * 0.5; // Add some variability for (let i = 0; i < packetsThisSecond; i++) { const packetType = Math.random(); let newPackets = []; if (packetType < 0.6) { // More HTTP traffic newPackets = generateHttpFlow(); } else { // DNS traffic const dnsQuery = generateDnsQuery( Math.random() < 0.5 ? 'www.google.com' : 'internal.service.local'); newPackets.push(dnsQuery); newPackets.push(generateDnsResponse(dnsQuery)); } simulationTime += Math.random() * (1 / packetsThisSecond); // Advance time slightly per packet/flow // Apply anomalies to some packets within the flow newPackets.forEach(p => { p.timestamp = simulationTime; // Ensure timestamp is current before anomaly check packetsToAdd.push(introduceAnomaly(p)); // Introduce potential anomaly simulationTime += 0.01 + Math.random() * 0.05; // Tiny gap between packets in a flow }); } allPackets.push(...packetsToAdd); }; // --- Display Logic --- const formatTime = (seconds) => seconds.toFixed(3); const applyFilters = () => { const protoFilter = currentFilters.protocol; const ipFilter = currentFilters.ip.trim(); displayedPackets = allPackets.filter(packet => { const protoMatch = !protoFilter || (protoFilter === 'ANOMALY' && packet.isAnomaly) || packet.protocol === protoFilter || packet.subProtocol === protoFilter; // Allow filtering by TCP/UDP as well const ipMatch = !ipFilter || packet.sourceIp === ipFilter || packet.destinationIp === ipFilter; return protoMatch && ipMatch; }); renderPacketTable(); }; const renderPacketTable = () => { packetTableBody.innerHTML = ''; // Clear existing rows displayedPackets.forEach((packet, index) => { // Use index from filtered array for display# const row = packetTableBody.insertRow(); row.dataset.packetIndex = allPackets.indexOf(packet); // Store original index row.insertCell().textContent = packetCounter + index + 1; // Display packet number row.insertCell().textContent = formatTime(packet.timestamp); row.insertCell().textContent = packet.sourceIp; row.insertCell().textContent = packet.destinationIp; const protocolCell = row.insertCell(); protocolCell.textContent = packet.protocol + (packet.subProtocol ? ` (${packet.subProtocol})` : ''); protocolCell.classList.add(`protocol-${packet.protocol}`); // Add class for potential styling row.insertCell().textContent = packet.sourcePort; row.insertCell().textContent = packet.destinationPort; row.insertCell().textContent = packet.info; if (packet.isAnomaly) { row.classList.add('anomaly'); row.title = `Anomaly Detected: ${packet.anomalyType}`; // Tooltip for anomaly } // Add click listener for details and highlighting row.addEventListener('click', () => showPacketDetails(allPackets.indexOf(packet))); // Re-apply selection highlight if this row was selected if (allPackets.indexOf(packet) === selectedPacketIndex) { row.classList.add('selected'); } }); // Update the base counter for the next batch // packetCounter = allPackets.length; // Update: Let's make # relative to the filtered view packetCounter = 0; // Reset counter for each render based on filtered list }; const showPacketDetails = (originalIndex) => { if (originalIndex < 0 || originalIndex >= allPackets.length) { detailsContent.textContent = 'Error: Invalid packet index.'; return; } // Remove previous selection const prevSelectedRow = packetTableBody.querySelector('.selected'); if (prevSelectedRow) { prevSelectedRow.classList.remove('selected'); } selectedPacketIndex = originalIndex; // Store the selected original index // Highlight the newly selected row (if visible) const newSelectedRow = packetTableBody.querySelector(`[data-packet-index="${originalIndex}"]`); if (newSelectedRow) { newSelectedRow.classList.add('selected'); } const packet = allPackets[originalIndex]; let details = `Packet #${originalIndex + 1} Details:\n`; details += `--------------------------------\n`; details += `Timestamp: ${formatTime(packet.timestamp)}s\n`; details += `Source: ${packet.sourceIp}:${packet.sourcePort}\n`; details += `Destination: ${packet.destinationIp}:${packet.destinationPort}\n`; details += `Protocol: ${packet.protocol}${packet.subProtocol ? ` (over ${packet.subProtocol})` : ''}\n`; details += `Info: ${packet.info}\n`; if (packet.isAnomaly) { details += `Anomaly Type: ${packet.anomalyType}\n`; details += `Anomaly Flag: Yes\n`; } else { details += `Anomaly Flag: No\n`; } details += `\n--- Simulated Payload ---\n${packet.payload || '(No payload data)'}`; detailsContent.textContent = details; // Optional: Highlight related packets in the flow highlightFlow(packet.flowId); }; const highlightFlow = (flowId) => { if (!flowId) return; // No flow ID to link // Remove previous flow highlights (optional, could keep multiple highlighted) // packetTableBody.querySelectorAll('.flow-related').forEach(r => r.classList.remove('flow-related')); // Add highlight to related rows currently visible displayedPackets.forEach((p, index) => { const rowIndex = allPackets.indexOf(p); const row = packetTableBody.querySelector(`[data-packet-index="${rowIndex}"]`); if (row && p.flowId === flowId && rowIndex !== selectedPacketIndex) { // Highlight related, but not the selected one // row.classList.add('flow-related'); // Add a specific class for styling flow // Simple approach: just change background slightly row.style.backgroundColor = 'rgba(255, 204, 0, 0.3)'; // Lighter yellow tint } else if (row) { row.style.backgroundColor = ''; // Reset others } }); // Ensure selected row keeps its specific highlight const selectedRow = packetTableBody.querySelector(`[data-packet-index="${selectedPacketIndex}"]`); if(selectedRow) selectedRow.classList.add('selected'); // Re-apply selected class styling } // --- Control Functions --- const startSimulation = () => { if (isRunning) return; isRunning = true; // Reset state allPackets = []; displayedPackets = []; simulationTime = 0; packetCounter = 0; selectedPacketIndex = -1; packetTableBody.innerHTML = ''; detailsContent.textContent = 'Click on a packet row to see details.'; statusDiv.textContent = 'Status: Running...'; startBtn.disabled = true; stopBtn.disabled = false; const duration = parseInt(durationInput.value, 10); const rate = parseInt(packetRateInput.value, 10); const intervalMs = 1000; // Generate batches every second generatePacketBatch(rate); // Initial batch applyFilters(); // Display initial batch let elapsedSeconds = 0; simulationInterval = setInterval(() => { elapsedSeconds++; simulationTime = elapsedSeconds; // Align simulation time with elapsed time for simplicity here if (elapsedSeconds >= duration) { stopSimulation(); return; } generatePacketBatch(rate); applyFilters(); // Update display with new packets based on filters statusDiv.textContent = `Status: Running... (${elapsedSeconds + 1}/${duration}s)`; }, intervalMs); }; const stopSimulation = () => { if (!isRunning) return; isRunning = false; clearInterval(simulationInterval); simulationInterval = null; statusDiv.textContent = `Status: Stopped (Generated ${allPackets.length} packets)`; startBtn.disabled = false; stopBtn.disabled = true; }; // --- Event Listeners --- startBtn.addEventListener('click', startSimulation); stopBtn.addEventListener('click', stopSimulation); applyFilterBtn.addEventListener('click', () => { currentFilters.protocol = filterProtocolSelect.value; currentFilters.ip = filterIpInput.value; applyFilters(); // Re-filter and render the existing packets detailsContent.textContent = 'Filters applied. Click on a packet row to see details.'; selectedPacketIndex = -1; // Clear selection when filters change }); clearFilterBtn.addEventListener('click', () => { filterProtocolSelect.value = ''; filterIpInput.value = ''; currentFilters.protocol = ''; currentFilters.ip = ''; applyFilters(); // Re-filter and render detailsContent.textContent = 'Filters cleared. Click on a packet row to see details.'; selectedPacketIndex = -1; // Clear selection }); // Initial setup stopBtn.disabled = true; // Stop button disabled initially });