“What the hell” page added

for people who got no idea about any of this, so i dont get bad votes just because they dont know what network packets are T__T

so if you are a voter, PLEASE read that page!

Added HTTP-heavy pcap file as sample

so now you have two files as samples, one mix of all kinds of protocols and other is full of HTTP stuff

i used scapy library of python do it

it includes:

• GET
• POST
• 200
• 401
• 404
• 201

“Follow Stream” Added!

just like wireshark, it loads the application layer protocol data by assembling all the TCP streams, and displaying the data, i feel like doing the UI was harder than doing the logic T__T
so i have added a button to follow stream which opens a StreamModal which will display the application layer protocol data accordingly right now only supports HTTP/1.1, soon FTP too

ngl i think i should display the data a bit more in raw form like wireshark but lets just leave it like that for now as i have to ship for lock in side quest lol

Started UI and display work

and i started with DNS cuz well UDP is simple. but sadly DNS isnt.
the complex structure had me going crazy trying to have proper offsets in details builder function, so i just gave up for now hehe
right now clicking on DNS fields highlights the entire raw DNS packet in hex dump, in future i will add proper offsets.
and to do this i had to make offset and length field optional in types which took a long time cuz i had to update every file and calculation of relative offset and all that stuff for hex dump highlighting
but at the end i dont think i have to touch DNS again until i wish to. relieved fr.

DNS Parser!!

i hate it.
it was so hard because DNS packets are compressed like zip files, labels arent repeated, like there will be “google” in one place and pointer to that everywhere else when needed so parser needs to interact with whole raw DNS packet not the usual bytes reading i do with my custom BinaryReader class

and i had to make a different application layer dispatcher and types and everything because DNS runs on UDP and UDP and TCP have complete different things so i cant have a common application layer structure

New Protocol: FTP

added support for FTP packets!

it was simple as its just lines of text but took longer because there was a small bug in TCP parsing where i was not skipping 6 bytes that were meant to be skipped for now, and those 6 bytes were leaking into leaking into applicaiton layer
it was there in HTTP/1.1 parser too but i didnt understand where it was coming from so i added a temporary solution to remove garbage bytes from HTTP raw bytes, but then i had the same problem in FTP too so i spent a whole probably 40 mins trying to figure out why, and found the problem and fixed it permanently

ps: added a flush function in stream tracker class that will clear out the streams list (any left over stuff)

again, no UI work yet

Big Things Added ->

+ TCP Stream Reassembly

this was huge pain T_T
i made a TCPStream class which handles single streams to reassemble, it includes .ingest() function which takes in a sequence number and data and processes them according to 3 cases, check TCPStream.ts file if you want to i have wrote a comment about those cases

and a StreamTracker class, which will be on global class be store all reassembled streams and parsed application layer packets, i have made the output of stream tracker be a part of the base PCAP parsing along with GlobalHeaders and Packets

had a lot of problems in this and so many mistakes because of the way sequence number works T__T
but it works now :3

+ Application Layer

while half-way through writing StreamTracker i realised i cant complete it without application layer dispatcher lol, so i started working application layer dissectors/parsers

Made HTTP/1.1 Parser

this was easy ngl, cuz it text parsing not binary, i am not doing much in this for now just basic stuff.

but had a hard time figuring out how to handle multiple packets in one stream which is common in HTTP/1.1 which uses keep-alive

at the end i stiched everything together and it works :))))

attached a screenshot of one processed HTTP packet from reassembled TCP stream, didnt do any UI work lol

Smol things added

• added pcap generation code using python
• added sample test file on UI
• added error on uploading non-PCAP files
• updated dev note

Completed Hex Dump Pane

oof, it was very tiring

• started hex work with builders giving absolute offse but it was having lots of problems
• converted absolute offsets to relative which will be added with protocol’s offset to get absolute
• created 3 columns in hex pane to show binary ascii and hex
• added hex highlighting when clicked/field clicked and vice versa
• added a tool tip to show offset
• had to rewrite entire hex dump pane because i was having so much problem with absolute offsets and console logs and stuff were everywhere lol

stable now tho!

UI Update

• connected builder functions to UI
• now all protocol contents are shown in packet details pane

Internal updates

• made “Details Builder” function which takes a packet and gives it’s details of the protocols in a flat array like [link, network, transport], it will be used to show data on UI
• controlled easily using registry i made just like parsing functions
• preparation for packet details pane (currently named protocol tree, will change it)
• made ICMP and ICMPv6 save icmpType in the struct too for ease in details building
• removed the type flag: number from IPv4 and made it a boolean object, which is eaiser to understand and corrct way to do it
• fixed a typo in etherTypes constant

image is of an ARP packet, showing protocol details of both Link layer (ethernet) and Network layer (ARP)

UI Update

• made the 3 pane UI layout
• made resize hanldes for all 3 panes
• completed packet list pane, used @tanstack/react-virtual to show the packets
• added colors for each protocol, makes it so beautiful
• removed an ugly scroll bar using webkit

Parsers and thingamajigs updates:

• added parser for ICMPv4
• added parser for ICMPv6
• added parser for IPv6
• added parser for ARP
• updated types to include raw bytes along side other data too so i can show it on a hex pane like wireshark
• added definition look table for codes and types of packets: ARP, ICMPv4, IP Protocols (shared between IPv4 and IPv6), Link types, and application layer ports

lots of stuff

• created a BinaryReader class to easily read PCAP files, passing the buffer through DataView API and using UInt8Array in some places too
• made structs for typing the data, like PacketHeader, GlobalHeader, EthernetFrame, IPv4Packet, etc
• created parsers for PCAP file global header
• created parser for packet headers
• started working on ethernet link type dissector in which i built parsers for Link Layer, Network Layer, and Transport Layer
• Link layer parsers: parseEthernet (ethernet frames)
• Network layer parsers: parseIPv4
• Transport layer parsers: parseTCP and parseUDP

nothing worked.

Refactored EVERYTHING

• this time started from bottom most parser, network layer stuff that is, then went up towards link layer
• while refactoring identified the problem which was in ethernet frame parser function parseEthernet where i was doing rawPayload = reader.readBytes(1500); which is wrong, because 1500 bytes is the theoretical upper limit of payload size in ethernet frame
• fixed the problem by creating a function in reader class readRemaining which reads the remaining bytes by calculating total packet size - offset, exactly needed this
• fixed the file structure of dissectors, bad structure was also one reason last time stuff didnt work

it works now.

–

things left to do:

1. complete network layer parsers: IPv6, ARP
2. complete transport layer parsers: ICMP
3. start working on TCP packet reassembly for application layer parsing

sorry for bad pic, i could’ve edited it to show better but i have to GOO T___T

What i did:

• initialized the project
• cleand up the vite bs
• made the home page with the drag and drop uploading thingy
• created basic workspaceheader

Changelog

• fixed some damn path problems that my idiot eyes couldnt see
• completed home page with drag and drop uploading, created workspace header
• empty site, cleaned the vite code to start from clean slate