File size: 7,459 Bytes
221ab44 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Packet Peeper Pro - Documentation</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
<style>
.terminal {
font-family: 'Courier New', monospace;
background-color: #1a1a1a;
color: #00ff00;
border-radius: 8px;
overflow-y: auto;
padding: 1rem;
}
.code-block {
background-color: #1a1a1a;
color: #00ff00;
padding: 1rem;
border-radius: 8px;
font-family: 'Courier New', monospace;
margin: 1rem 0;
}
</style>
</head>
<body class="bg-gray-900 text-white">
<div id="vanta-bg" class="fixed inset-0 z-0"></div>
<div class="relative z-10 container mx-auto px-4 py-8">
<header class="flex justify-between items-center mb-8">
<div class="flex items-center">
<i data-feather="book" class="text-blue-500 mr-2"></i>
<h1 class="text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-500">
Packet Peeper Pro Documentation
</h1>
</div>
<a href="index.html" class="bg-gray-700 hover:bg-gray-600 px-4 py-2 rounded-lg flex items-center">
<i data-feather="arrow-left" class="mr-2"></i> Back to App
</a>
</header>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<div class="lg:col-span-2 space-y-6">
<div class="bg-gray-800 bg-opacity-70 rounded-xl p-6 backdrop-blur-sm">
<h2 class="text-xl font-semibold mb-4 flex items-center text-blue-400">
<i data-feather="activity" class="mr-2"></i> Working with Real Network Data
</h2>
<p class="mb-4">This guide explains how to ensure Packet Peeper Pro works with real network data instead of relying on synthetic data.</p>
<h3 class="text-lg font-semibold mt-4 text-green-400">1. Live Packet Capture</h3>
<p>Packet Peeper Pro uses PyShark or Scapy libraries to capture live network packets directly from your network interfaces.</p>
<div class="code-block">
<p class="text-yellow-300"># Example tcpdump command</p>
<p>tcpdump -i eth0 -w capture.pcap</p>
</div>
<h3 class="text-lg font-semibold mt-4 text-purple-400">2. Flow Collection (NetFlow/IPFIX/sFlow)</h3>
<p>Configure your network devices to export flow data:</p>
<div class="code-block">
<p class="text-yellow-300"># Example Cisco router configuration</p>
<p>ip flow-export version 5</p>
<p>ip flow-export destination <PacketPeeper-IP> 9995</p>
<p>ip flow-export source <Router-Interface></p>
<p>interface GigabitEthernet0/0</p>
<p class="ml-4">ip flow ingress</p>
</div>
<h3 class="text-lg font-semibold mt-4 text-red-400">3. PCAP File Import</h3>
<p>Public PCAP repositories with real anonymized data:</p>
<ul class="list-disc pl-5 space-y-1 mt-2">
<li><a href="https://www.malware-traffic-analysis.net/" class="text-blue-400 hover:underline" target="_blank">Malware Traffic Analysis</a></li>
<li><a href="https://www.netresec.com/?page=PcapFiles" class="text-blue-400 hover:underline" target="_blank">NETRESEC PCAP files</a></li>
<li><a href="https://www.ll.mit.edu/r-d/datasets" class="text-blue-400 hover:underline" target="_blank">DARPA Intrusion Detection Data Sets</a></li>
</ul>
</div>
</div>
<div class="space-y-6">
<div class="bg-gray-800 bg-opacity-70 rounded-xl p-6 backdrop-blur-sm">
<h2 class="text-xl font-semibold mb-4 flex items-center text-yellow-400">
<i data-feather="alert-triangle" class="mr-2"></i> Important Considerations
</h2>
<h3 class="text-lg font-semibold mt-4">Data Verification</h3>
<ul class="list-disc pl-5 space-y-1 mt-2">
<li>Check source and destination IPs</li>
<li>Verify protocol distribution</li>
<li>Look for expected patterns</li>
</ul>
<h3 class="text-lg font-semibold mt-4">Troubleshooting</h3>
<ul class="list-disc pl-5 space-y-1 mt-2">
<li>Verify capture privileges</li>
<li>Check interface configuration</li>
<li>Confirm network positioning</li>
<li>Test with broader filters</li>
</ul>
<h3 class="text-lg font-semibold mt-4 text-red-400">Security & Privacy</h3>
<ul class="list-disc pl-5 space-y-1 mt-2">
<li>Regulatory compliance (GDPR, HIPAA)</li>
<li>Anonymize sensitive data</li>
<li>Implement access controls</li>
<li>Secure stored capture files</li>
<li>Data retention policy</li>
</ul>
</div>
<div class="bg-gray-800 bg-opacity-70 rounded-xl p-6 backdrop-blur-sm">
<h2 class="text-xl font-semibold mb-4 flex items-center text-green-400">
<i data-feather="key" class="mr-2"></i> Quick Reference
</h2>
<div class="terminal">
<p class="text-yellow-300"># Common capture filters:</p>
<p>tcp port 80 or tcp port 443</p>
<p>host 192.168.1.100</p>
<p>net 192.168.1.0/24</p>
<br>
<p class="text-yellow-300"># Useful commands:</p>
<p>tcpdump -i eth0 -w capture.pcap</p>
<p>tshark -i eth0 -f "tcp port 80" -w http.pcap</p>
</div>
</div>
</div>
</div>
</div>
<script>
// Initialize Vanta.js background
VANTA.NET({
el: "#vanta-bg",
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.00,
minWidth: 200.00,
scale: 1.00,
scaleMobile: 1.00,
color: 0x3fff00,
backgroundColor: 0x111111,
points: 10.00,
maxDistance: 22.00,
spacing: 17.00
});
// Initialize feather icons
feather.replace();
</script>
</body>
</html> |