Understanding Networks Wk 5-7: Packet Sniffing

 STEP 1: Packet Sniffing With Wireshark (~5 Hours)

I used Wireshark to capture and analyze the traffic on my home network. I left it running while I worked on other projects that required me to look up a bunch of sites for help (youtube, stack overflow, random blogs, unity’s documentation site). This step was done so I could get an overview of what a typical working session looks like on my home network. After this, I exported the data (which was way too large – a total of around 1 million data points, 300 MB) as a CSV. Then I used excel to do a little data analysis.

Screenshot 2019-10-21 23.03.38

snippet of excel sheet with summary

a.) With Excel, I grouped all the protocols then got all the unique values.
There are 22 unique protocols.

  • ARP: address resolution protocol;  “is a procedure for mapping a dynamic Internet Protocol address (IP address) to a permanent physical machine address in a local area network (LAN)”
  • Browser
  • DB-LSP: Dropbox LanSync Protocol,
  • DB-lSP-DISC: Dropbox LAN Sync Discovery
  • DNS: Domain Name System; “the phonebook of the Internet; DNS translates domain names to IP addresses so browsers can load Internet resources.”
  • EAPOL: “Extensible Authentication Protocol (EAP) over LAN (EAPoL) is a network port authentication protocol “
  • H1: “is a bi-directional communications protocol used for communications among field devices and to the control system”
  • HTTP: HyperText Transfer Protocol
  • ICMP: “(Internet Control Message Protocol) is an error-reporting protocol network devices like routers use to generate error messages to the source IP address when network problems prevent delivery of IP packets.”
  • ICMPv6: v6 of ICMP
  • IGMPv3: “Internet Group Management Protocol (IGMP) is the protocol used by IPv4 devices to report their IP multicast group memberships to neighboring multicast devices. “
  • MDNS: “multicast DNS protocol resolves hostnames to IP addresses within small networks that do not include a local name server.”
  • NBNS: “stands for NetBIO Name Service, which is a protocol for name resolution.”
  • NTP: ” is a networking protocol for clock synchronization between computer systems over packet-switched, variable-latency data networks. “
  • OCSP: “Online Certificate Status Protocol (OCSP) is an Internet protocol used for obtaining the revocation status of an X.509 digital certificate”
  • SSDP: “(SSDP) is a network protocol based on the Internet protocol suite for advertisement and discovery of network services and presence information.”
  • SSLv2: “is an obsolete version of SSL that has been deprecated since 2011 due to having security flaws.”
  • TCP: Transmission Control Protocol (explained elsewhere in blog)
  • TLSv1.2: TLSv1.2 is the newest SSL protocol version
  • TLSv1.3: rewrite of TLSv1.2.
  • UDP: User Datagram Protocol (explained elsewhere in blog)

b.) Then I filtered and organized the destinations (outbound).
There are 981 unique destinations.

The top 3 destinations are:

  1. emilys-MacBook-Pro-1798.local
  2. iMac.fios-router.home
  3. cs10.wpc.v0cdn.net (Verizon Business/ ISP: Edgecast Networks)

c.) I did the same for the source (incoming).
There are 970 unique sources.

The top 3 sources are:

  1. emilys-MacBook-Pro-1798.local
  2. cs10.wpc.v0cdn.net (Verizon Business/ ISP: Edgecast Networks)
  3. e5042.dsci.akamaiedge.net (akamai is a content-provider/CDN)

d.) HTTP traffic: 

Screen Shot 2019-10-21 at 3.18.26 PM

  • Observations from HTTP Packets:
    • Total HTTP Packets: 18457
    • Of the 18457, Response Packets: 779 (4.22%); Request Packets: 17512 (94.88%)
    • Of the 779 Response Packets: 3 Client Errors, 115 Redirection, 661 Success
    • I’m noticing the info HTTP/1.1 200 comes up a lot. Found out that “200 OK” means that everything went well and I was able to connect to the server.
  • Definitions (for personal understanding)
    • HTTP found at Layer 7 of OSI model (Application)
    • When I upload data to a web server, I am creating a POST packet. This requires 3 way handshake: from client to server then back again. 
    • Burst: the maximum number of packets sent per interval of time. 
    • Burst start: the time when the maximum number of packets sent occurred.
    • GET: Used when the client is requesting a resource on the Web server.
    • HEAD: Used when the client is requesting some information about a resource but not requesting the resource.
    • POST: Used when the client is sending information or data to the server—for example, filling out an online form (i.e. Sends a large amount of complex data to the Web Server).
    • PUT: Used when the client is sending a replacement document or uploading a new document to the Web server under the request URL.



STEP 2: Specific Activities Captured on Wireshark

After capturing hours of data (Step I), I then ran a couple of experiments to see what would show up if I performed specific internet activities such as going to streaming services, uploading files, downloading files.

a.) What would I find if I uploaded a video onto vimeo?

  • I noticed that when uploading to Vimeo (I know this because the source says: “emilys-MBP….”) the protocol is usually UDP. This makes sense because the video is a large data file so would benefit from the faster speed of UDP. However, how is it possible to ensure that my video data gets transferred reliably, since that is one of the main drawbacks of UDP? I’ve usually had good success with uploading to Vimeo and don’t have any issues with not getting my data sent. Is there a way they ensure it is transferred properly? Read on the below site that: “Although it (UDP) still has certain drawbacks that prevent it from being used in all applications, there have been great advancements in improving its stability and reliability.” Perhaps UDP file transfers are improving and that is why I rarely experience Vimeo issues?(*Reference for UDP/TCP: https://www.keycdn.com/support/udp-file-transfer)
Screenshot 2019-10-21 17.57.26.png

Screenshot of source: my network | destination: vimeo

  • When vimeo is sending to my network, the transfer is using TCP or TLSv1.2. This does make sense since vimeo isn’t sending me a large file back.
    • TLSv1.2: TLS stands for Transport Layer Security. It is a way to transfer information securely. (*Reference: https://www.appointmentplus.com/blog/top-8-things-know-about-tls-1-2/)
    • The TLSv1.2 version was required for any site by PCI (payment card industry) on  June 30, 2018. Apparently, PCI requires sites to upgrade to newer version our sites risk putting user’s data at risk. Wow, who knew?!
Screenshot 2019-10-21 17.58.05.png

Screenshot of source: vimeo | destination: my network

b.) What would I find it I downloaded something from the browser?

Then I wanted to see what packets would appear if I downloaded a file from the internet. So, I went to a course github page and downloaded that repo. I chose not to use SSH. I wonder if this would’ve made a difference?

Screenshot 2019-10-21 18.49.52.png

results from downloading a file from github

  • Most of the Protocol is with TCP. And in the info section it is often says [TCP Keep Alive]. The sources that come up consistently on github’s side are “github.map.fastly.net” and “api.github.com
    • Fastly is a CDN (Content Delivery Network) so there is no need to worry.
    • When looking into Api.github.com, I found this helpful page: https://developer.github.com/v3/. According to their site, all API access is over HTTPS. All data is sent and received as JSON. The page also mentions: “By default, all requests to https://api.github.com receive the v3 version of the REST API.” This leads me to my next question…
  • What is REST API?

c.) What would happen if I visited sites of other countries?

I was also curious what would happen if I tried to visit a website from another country like Taiwan or Iran. I first checked this taiwanese design site: https://www.oniondesign.com.tw.

Screenshot 2019-10-21 21.33.01.png

For Iran, I checked this site: http://footballitarin.com. This is what immediately came up in Wireshark.


what came up immediately when I went to this Iranian site

  • “eu-u.openx.net” came up a lot when I clicked. Discovered that us-U.Openx.Net is a high-risk domain. It acts as a browser hijacker infection. It can invade your system when you visit a risky web site, install unsafe freeware or open spam email attachments. That’s not good.
  • “ds.dotomi.com” came up many times as well and wanted to check it out. According to this site: https://malwaretips.com/blogs/remove-cj-dotomi-com/, if your browser is constantly redirected to this Cj.dotomi.com site, then it is possible that you have an adware program installed on your computer. It’s a malicious program that once installed in your program, your browser may get many unwanted ads or pop ups. Beware!

d.) What’s with all these different types of TCPs? Observation from these step: what is TCP Dup ACK? What does TCP Out-of-Order, TCP Keep Alive, and TCP Retransmission mean? It seems to always be colored in black when it is related to TCP, but not just a normal TCP, there is always a message in the “info” section. She helps break it down: https://www.youtube.com/watch?v=tjZ2IgiG2PU

  • TCP will judge the need for retransmission based on the RTO or the retransmission timeout. If the packet never receives a packet in a given time frame, it is retransmitted. If it is constantly showing TCP retransmission that means that there was no acknowledgement received.
  • TCP Duplicate Acknowledgements means that they received order packets out of order. All TCP connections start with a initial sequence number (ISN) and each packet after that will go up by the size of its data payload. Ex: If my computer has an ISN of 1000, I send a data with 200 bytes, then my acknowledgment should be 1200. Next ISN should be 1200.
  • TCP Keep Alive: two main purposes for keepalive is to check for dead peers and to prevent disconnection due to network inactivity.
Screenshot 2019-10-21 17.55.14.png

Example of the TCP Dup ACK


Super basic questions just to help me understand Wireshark, packet sniffing, and this assignment:

  • What is Wireshark? What exactly is it doing?
    • Series of data are considered frames, which are considered packets
    • Wireshark can detect and decode the packets for analysis.
    • Data is converted into packets when it passes through your network interfaces. Wireshark hunts for those packets in the TCP/IP layer during transmission and keep what it finds.

Other resources stumbled upon as I researching: 

Live Web Wk6: Midterm

Both are a work in progress, hoping to have a better “play” page soon: 

Code with socket io: https://github.com/emilylin-itp/live-web/tree/gh-pages/midterm/midterm_soundcolor_v13_wsocket

All code versions, including the mini tests I did for the oscillating sine waves + sound. ( i know i’m not using github properly, but this really helps me keep track of the different vs in a tangible way. will aim to use github better in the future): https://github.com/emilylin-itp/live-web/tree/gh-pages/midterm


Biggest thank you to Professor Shawn for helping me squash many bugs and explaining things so well! So much appreciation.

Screenshots of Process:

a.) Preliminary research online. Found some helpful diagrams.

Screenshot 2019-10-14 01.01.22

b.) First tried to code oscillating sine waves with varying frequencies. Also included a make frequency sound on hover function. Very bare bones test.

Screenshot 2019-10-14 14.39.38

c.) rough Sketch design for the site.

Screenshot 2019-10-14 01.02.08

d.)Tried a bunch of things out with making sine waves, used the web audio api, and really tried to understand how socket io works. I worked on the html, css + js part first before doing the socket io stuff. I definitely need to work on the “play” page more.

Questions + Answers:

  • Why does the oscillator.stop() work when I do mouseout? Read somewhere that you can not call the “start()” function for oscillators more than once? True???https://blog.szynalski.com/2014/04/web-audio-api/
    • Answer (Thank you Professor Shawn!): yes! need to create oscillator each time! also need to go through for loop to stop all elements.Screenshot 2019-10-15 12.15.49.png
      Screenshot 2019-10-15 13.01.19
  • I was trying to make the sine waves animate when user clicks. The “clearRect()” in javascript allows for animations because it redraws the background BUT it makes a white background. So I couldn’t overlap the sine waves without having the white background cover up the previously drawn one. Is there a way to get a transparent background with “clearRect()”? Or what’s a good work around?
    • Answer: have to add all sine waves into one canvas. No way of overlapping canvases with animation over it (without getting the background).
  • Trying to access a variable within a function to have as a global variable. Why won’t it work though? I added a “return” but it keeps saying it is undefined when I console.log it outside of the function.
    • Answer: didn’t have much to do with making a global var. had to do with adding a removing my click event listener. Have to remove the event listener if it is not the one clicked on. Shawn wrote the snippet below!Screenshot 2019-10-15 12.19.15.png

Bits of Research:

  • A source
  • The highest frequency that most humans can hear is 20,000 cycles per second or 20,000 Hz.
  • “Sound travels much slower than light. The audible sound spectrum consists of sounds between frequencies of 20 Hz and 20,000 Hz. These waves are very large and very slow compared to light waves. Sound waves are approximately 1,000,000,000,000 times larger than light waves.”
  • The pitch of the note A has a frequency of 440 Hz.
  • Sound and color are produced differently. Sound comes from an object that acts mechanically to produce a sound. But objects appear colored because of the interaction of white light with the object. For ex: when light hits an object, the object absorbs certain parts of the light; it absorbs all the colors but blue. The light leaving the object would then contain whatever color is left, in this case blue.

Resources for Web Audio API: 

Resources for JS, Canvas & Animation: 

Resources for Start + Stop Web Audio API Oscillator on Hover (had issues with this):

Resources for Mouse Movement:

Resources for my CSS Wave Animation (Homepage):

Resources for Socket io:

Resources for JS + CSS Animations:

Live Web Wk5: Midterm Concept

Objective: My goal is to visualize the phenomenon of color and pitch frequency. Since both pitch and color use frequencyI aim to show the correlation between the two.

a.) On the “learn” page, when a person clicks/hovers over a section of color, the wavelength of the color will show up and the associated pitch will also be played. For example, if the person hovers over the red section, the pitch played will be lower because red has a lower frequency. This also means a longer wavelength.

b.) There will be another “playground/drawing” page where people click to create wavelength lines. When the person selects a color, the person will be able click to draw that color’s wavelength. The associated pitch will also play.


Understanding Networks All Wk: Reading Notes

Live Web Wk 5: WebRTC – Peer Garden!

Try it out: https://el3015.itp.io:8085/main.html

Code here: https://github.com/emilylin-itp/live-web/tree/gh-pages/wk5/wk5_peergarden

For this assignment, I focused mostly on just trying to understand how peer js and socket.io could work together. The functions I wanted to achieve were: a.) show my/users’ personal peer id, b.) be able to send the peer id of the other user via socket when the user “joins” the garden, c.) display the video stream to other user.

There are some logical mistakes in what I ended up with though. First of all, if you are the last person to join you would not see any one else’s live stream. There needs to be a way that once you join the garden you can see everyone who is in there. Not sure how I would do this exactly, but something to look into. Treated this more as socket + peerjs practice then as a project that is conceptually sound.


  • If Peer to Peer/Web RTC is in between UDP + TCP, then what is an example of a a communication/app that is using completely UDP?
  • Having issues with getting this “run your own peer server” to work: https://itp.nyu.edu/~sve204/liveweb_fall2019/peerserver.html
  • Why can’t I appendChild for my video into a div? Following the syntax but not working…
  • Why won’t the setAttribute or className(‘class name’) work on my video in the client side js?
  • Why won’t this add the class ‘ovideoStyle’? Below doesn’t work…
    document.gvideoContainer.appendChild(ovideoElement, 'ovideoStyle');

References mentioned in class: 

Helpful resources:

Live Web Wk 4: GIF Chat!

Live website:

Code: https://github.com/emilylin-itp/live-web/tree/gh-pages/wk4/20191006_gif_chat

Note: still a WIP, need to work out the css/responsiveness bit. Also have to figure out why the camera + username input doesn’t work once I run it on forever in the terminal. In general, I need to learn how to properly add the SSL certificate to my express server. I went back to using the http request server so I could add the certificates, but it doesn’t always work?

Credit: Biggest thank you to super helpful resident Dan for helping me getting set up on glitch as a solution for the security issues I’ve been stumbling across! Will figure out security stuff, but am really digging glitch so far!

For this week’s assignment, Tushar and I decided to develop our gibberish chat project from week 2. Instead of chat messaging between 2 people, we wanted to allow the pair to send gifs to one another. Not only gifs, but gibberish gifs. Initially we had sought to mess with the base image text to create glitchy gifs. However, we didn’t get to it in time. Making a javascript gif turned out to be complicated enough.

I focused on integrating the socket room partnering code with our new gif code, html+ css, and trying to get the images to be displayed as frames. So every time I clicked the image would be stored in the array. Then the images would be displayed as animation frames using “appendChild” function. Tushar worked on the code for making it into a gif and sharing the gif via socket.io.

This time around, I wanted to use bootstrap (just a personal goal to try to make more responsive designs). But I think this messed things up a bit – it became a mess when really it shouldn’t have been. Need to spend more time make it look like the current version but without the bootstrap. Overall, coding this was a good time!


  • The moment I run “forever start server.js” the communication between the sockets are gone! The username doesn’t show up for the other persons and the gif also doesn’t appear. Why does this happen when I run it forever, works fine when I run node server.js?
  • How can I add the SSL certificate to my express server and still use socket.io.  Followed this: https://hackernoon.com/set-up-ssl-in-nodejs-and-express-using-openssl-f2529eab5bb, but it still didn’t work. I had to change my express to be https server.

Helpful Resources:

Joy and Games Wk 4: Rube Goldberg Machine

Assignment: Make a Rube Goldberg device in Unity. The device should include at least 5 separate steps/phases.

I know what I made is such a basic animation with very basic shapes and physics, but this was quite a challenge for me. Still trying to get a handle on Unity and everything (even the most simple event I have in mind) requires a tutorial viewing. It was a good time, but needless to say I am a noob and feeling it. Note to self: everyone needs to start somewhere! I’m starting here! Happy to have the semester to practice Unity.


  • How to make the colors change on an event and have that see-saw like cup motion in my 3rd reference? Tried to do it using hinge joint but didn’t work. What am I doing wrong? Does it require a script?
  • Why is that salon-like hinge at 0:23 so wonky and changing the shape of the door?
  • How to properly animate and save the animation? Right now, the below is just a screen recording for documentation purposes. If I were to render, how would I go about doing it in a fast way. Also, is it even worth it to render or should we only do it when we want to “deploy”?

Helpful Resources (that weren’t in the Unity Documentation): 

Understanding Networks Wk 2-4: Traceroute

Live site: https://emilylin-itp.github.io/understanding-networks/traceroute_dir/index.html

Code here: https://github.com/emilylin-itp/understanding-networks/tree/gh-pages/traceroute_dir

For this traceroute assignment, I used my traceroute data to create a spin-off of google maps. Calling it Traceroute Hop Stops!

I first collected the traceroute data from my home, school and a coffee shop. Next, I converted it into a json file.

I used https://www.iplocation.net/ to help to help me find the coordinates, city, ISP of each IP address that showed up in my traceroute. I noticed for each hop, traceroute will send three IP packets.

Helpful note I read from here: “Traceroute uses the TTL (Time to Live) field in the IP packet header. Normally, TTL is used to prevent packets from being forwarded forever when there is a routing loop. Whenever an IP packet is forwarded by a router, the TTL is decreased by one. When the TTL is zero, the IP packet will be discarded.”

With the json file, I was hoping to be able to dynamically alter the site by using AJAX xmlHttpRequest (as I did for my data art site). Unfortunately, I was struggling to get it to work in time. So, a lot of the data is manually inputted in HTML (I know, it is definitely not the smartest way of doing this). It is also not utilizing my json files!  I’m hoping to simplify my code in the following week so I don’t have endless lines of HTML.

Included an overview map with all the major ISP that keep coming up in my traceroutes. I used Mapbox to make these maps.

Helpful Resources:


Understanding Networks Wk 4: Definitions

WebRTC (Web Real Time Communication): is a free, open source project that enables web browsers with real-time communication capabilities. WebRTC doesn’t require any plug-ins or applications. The technology allows video, audio streaming, and data sharing between clients.

Routing: a process performed by network layer in order to deliver the packet. It chooses the optimal path from one network to another. 3 types of routing: a.) static routing, b.) default routing, c.) dynamic routing

  • Static routing: manually adding routers into routing table. Advantages of this are that it is more secure, there is no bandwidth usage, and there is “no routing overhead for router CPU which means a cheaper router can be used to do routing.”
  • Default routing: this routing doesn’t care about which network the packet belongs to. It will send all packets towards a single router that is configured for it to be sent to.
  • Dynamic routing:  this routing makes automatic adjustments of the routes according to the current state of the route in the routing table. When the router finds a change in the topology then the router advertises it to all the other routers. The advantage of dynamic routing are that it is more effective at finding the best route and that it’s easy to configure. Disadvantages are that is consumes more bandwidth and is less secure than static routing.
  • Reference: https://www.geeksforgeeks.org/types-of-routing/

UTF: character encoding capable of encoding all possible characters (also known as code points) in unicode. UTF stands for Unicode Transformation Format.

TCP vs UDP: stands for Transmission Control Protocol (TCP)/ Internet Protocol (IP). UDP stands for User Datagram Protocol.

  • TCP
    • “TCP provides a way to deliver and receive an ordered and error-checked stream of information packets over the network.”
    • TCP is most commonly used protocol on the Internet
    • When you request a site, your computer sends TCP packets to the web server’s address. The server sends back a stream of TCP packet, which your web browser stitches together to form the web page.
    • TCP is very reliable! Packets are sent with TCP are tracked so no data is lost or corrupted in the transit.
    • It is able to be this reliable because it orders packets by numbering them. It error-checks by having the recipient send a response back to the sender saying that is has received the message.
    • Error correction built it/ more reliable –> but slower
  • UDP
    • “UDP is used by apps to deliver a faster stream of information by doing away with error-checking.”
    • “When an app uses UDP, packets are just sent to the recipient. The sender doesn’t wait to make sure the recipient received the packet – it just keeps sending packets.”
    • They can be lost, sender won’t resend them. Losing all the check-ins means faster communication time though!
    • “UDP is used when speed is desirable and error correction isn’t necessary.” Often used for live broadcasts and online games.
    • No error correction –> but so fast!
  • Reference: https://www.howtogeek.com/190014/htg-explains-what-is-the-difference-between-tcp-and-udp/