< BLOG >

Web debugging with Wireshark

10/27/2024✲Tomasz Szewczyk

What is Wireshark

Modern network applications use REST, which is de facto the standard in today's development for both web and mobile applications. REST (Representational State Transfer) is an architecture of web applications that describes the backend as a state that can be fetched or modified through requests sent to a collection of endpoints (POST, PUT, GET) that accept and return objects in JSON format.

When debugging web applications, there is often a need to analyze REST requests. Sometimes logs in the application are insufficient or impossible to obtain. Then there is a need for a tool that will enable analyzing network traffic without interfering with the application itself. To achieve this, we can use Wireshark.

In this article, I will show how to use Wireshark to log and analyze network traffic between the backend and frontend parts of the application.

Hands-on

To install Wireshark, it is best to use the official instructions or the repository available for your operating system. Click here to go to the official download page.

Additionally, we will create a simple web application that will expose a simple REST endpoint. For this purpose, we will use the express.js framework, which is one of the most popular frameworks for creating web applications in Node.js. To do this, use the following code (paste into app.js in a new folder):

const express = require("express");
const app = express();
const port = 3000;

app.get("/api", (req, res) => {
  res.json({ message: "Hello World!" });
});

app.listen(port, () => {
  console.log(`Listening at http://localhost:${port}`);
});

To run the application, you will need node.js and to install dependencies using npm. To run the application, use the following commands (before starting, make sure you have installed node.js and are in the folder with the app.js file):

npm init -y
npm install express
node app.js

To test the operation of the application, open a browser and enter the address http://localhost:3000/api. The response should be {"message":"Hello World!"}.

Then start Wireshark and select the correct interface. If you do not know which interface to choose, use the any option, which allows listening to all network interfaces.

It should be noted that Wireshark requires administrator rights to listen to network traffic on all interfaces. If you suspect that Wireshark is not working correctly, check the permissions. For example, in Linux, you can run Wireshark with root permissions using the following command:

sudo wireshark

After performing these steps, Wireshark will start logging all network traffic passing through the selected network interface. Usually, the amount of logged data is very large, as Wireshark by default logs all network packets. To see only the HTTP requests that interest us, it is necessary to set up appropriate filters.

The most important filters for our case are:

http - filters all HTTP requests
ip.src - filters requests sent from a specific IP address
ip.dst - filters requests sent to a specific IP address

To filter the logged data, add the appropriate expression in the filter bar at the top of the interface. For example, to see all packets sent to the IP address localhost, enter: ip.dst = 127.0.0.1, to see all HTTP requests sent or received by the application running on localhost, enter: (ip.dst = 127.0.0.1 or ip.src = 127.0.0.1 and http).

Localhost (127.0.0.1) is the IP address assigned to the network interface loopback, which is used for communication between processes on the same device. In the case of a web application running on a local server, HTTP requests will be sent to this IP address.

Usage example

Now Wireshark displays only the incoming and outgoing traffic of our application. After refreshing the page in the browser, new HTTP requests should appear. In the example below, the first two requests are respectively the request to and response from our application.

It is also worth knowing how to see the payload of requests in JSON format. By default, Wireshark allows the analysis of request payloads in an unintuitive, native format. To obtain the data in a more readable format, use the "copy as printable text" function available in the menu, under the right mouse button in the section displaying the body of the request.

To obtain the body of the request in JSON format, select the appropriate request and Java Script Object Notation and then use the option copy as printable text.

To obtain the header of the request, select the appropriate request and Hypertext Transfer Protocol, and then use the option copy as printable text.

Summary

I have discussed the key aspects of using the Wireshark tool for debugging web applications, focusing on REST requests, which are the basis of modern internet and mobile applications. Wireshark, as an advanced tool for analyzing network traffic, allows observing HTTP requests without the need to interfere with the application code. Properly configured filters allow tailoring Wireshark's operation to our needs.

Let's Talk

Struggling with stubborn bug? Need help with developing or maintaining web applications? Looking for a creative team of developers to solve your problem? You've come to the right place! Contact us.