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

cleaned up the code a little bit, no other changes

i am trying to ship again because of a payout problem

Analyser update

• added the two boolean directives (upgrade-insecure-requests and block-all-mixed-content)
• better scoring system! last one only punished but this once has bonuses and reason of penalty/bonus
• recommendation system, it recommends stuff, duh
• UI changes, using more icons now and changed input method part too

code not the best , my finals going on, so i will refactor the code after march.

Big Update - Added Policy Builder

Built a complete CSP Policy Builder, integrated with existing analysis capabilities

Features (in builder only)

• 2 new boolean directives (upgrade-insecure-requests, block-all-mixed-content)
• Real time security analysis (red flags, missing directives, scoring)
• Import existing CSP to edit
• Report-Only mode toggle
• Search/filter directives
• Quick add buttons for common sources
• 4 Presets for quick building

Presets

• Strict - Maximum security (‘none’ fallbacks)
• Balanced - Security + compatibility (‘self’ + ‘unsafe-inline’)
• Legacy - Older browser support (wildcards, dangerous!)
• API Only - For API endpoints (‘none’ everywhere)

some changes are yet to be made in analyser like the boolean directives

Git Changelogs

thanks FT Utils

• fixed a small problem and updated readme
• forgot to run prettier
• Added complete policy builder with 2 new boolean directives and with better component file structure, big update

Started working on policy builder after long
just UI right now but the hook is also in development, it uses the same functions from analyser to follow single source of truth principal

Exporting analysis report - added!

Formats supported:

• JSON
• Markdown
  pdf coming soon!

now you can save the reports locally and show in meetings if you are employed

• added a little loading skeleton in analysis
  

Added attack surface, improved types to include attack class, improved parser to remove header name and work around invalid directives, added bunch of more directives in rule table

MPV is ready.

Major style changes, improved badges, changed directive item style a bit, added missing directives list in overview, added a small help component, removed unique sources for now (will be added in future), made a banner for this and also made the README file

A lot of stuff:

• Replaced that boring stats with policy grade
• Added a better tooltip with reason, fix recommendation, and reference
• Updated parser logic

Policy breakdown and overview

started analysis work, it can evaluate sources right now

started the UI work, may not look the best but UI is not my top priority right now :3