stevekerrison/dabao

Network packet tracing with levels of detail, visualisation and animation

Dabao - A network visualiser

Dabao is a network visualiser with the aim of showing step-by-step, layer-by-layer, how communication happens on the Internet. It is created with the intent to answer, in-depth, the question: "How does my computer download a web page?". However, it's designed in such a way that other scenarios can be played out too.

The name

In Singapore, to "dabao" or "打包" means to take-away food. More directly, it means to bale/pack or unpack something. This software helps to pack/unpack the contents of messages at different layers of the network stack, so the name seems somewhat fitting.

How to use

Right now, Dabao approximately simluates a simple HTTP request, including DNS lookup and some ARP exchanges. You can "step" through each "hop" of packets, or run the exchange continuously. You will see the packets traverse a network and the contents of the packets change along the way.

Software utilised

• IP-Num, a library for creating/manipulating IP addresses
• CytoscapeJS, a JavaScript version of the Cytoscape graph visualiser
  • Cytoscape-fcose, Fast Compound Spring Embedder for layout
  • Cytoscape-automove, for layout
• D3 for packet and node data presentation

dabao's Issues

Programmatically define packet sequences

Create an iterator that produces valid entries for trace JSON schema, but doesn't require hand-writing all the packets out.

Detailed TCP

• 3-way handshake
• ACKs
• Fragmentation
• Windowing

Would all be nice to show if the LoD is set accordingly

Animate/step packet transmission

• Highlight relevant parts of the packet as it transits between nodes
• Highlight changes to the packet as it is forwarded

Simulate ICMP requests (for ping and tracert examples)

It would be great to show how these work.

Define LoD data structures and visuals

• A visual selector for what LoDs we want.
• A way to define what LoDs different packet components will be present in
• Consider a "direct transit" mode where at one of the higher LoDs, we just see packets move between source and final destination, not intermediates

PCAP support

• Define nodes and networks based on observed MACs
• Challenging because ideally it needs packets captured on every edge of the observed network

Routing tables

Provide a way to demonstrate how nodes determine where to forward packets.

Adding an extra AS may help give more rich examples of this, otherwise it'll be single-choice routes most of the way.

Allow simulation reset

Start again from the beginning

Support NAT

• Label a node as performing NAT, or define subnets that are expected to be behind NAT and automatically perform NAT on appropriate nodes
• Apply Source address NAT (SNAT) on outgoing packets

Add packet elements to network

• Not subject to same layout algorithm as network nodes
• Will be animated/created/destroyed as part of stepwise/animated data sequences

Remove layout configuration panel

Keep container, as we'll use it for setting up the scenario to run (i.e. GET / from an HTTPS server) as well as the LoD we want.

IPv6 support

• IPv6 packets
• NDP to replace ARP

Define packet data structure

• Packets and their info
• Changes to a packet as it traverses network

Allow simulation rewind

Jump back to a previous stage. Currently simulation is irreversible.

Show packet contents

• Each packet's contents bytes and decoded data (a bit like wireshark)
• Able to drill down the LoDs as desired

Improve visuals

I've done very little to the CSS so far, so it needs enhancements.

TLS Client Hello

https://tlsfingerprint.io/
Found about about TLS fingerprinting recently, Client Hello details could be included if you want.