< BLOG >

Debugowanie aplikacji webowych z Wiresharkiem

27.10.2024✲Tomasz Szewczyk

Zielonkawy cyfrowy rekin w cyberprzestrzeni

Czym jest Wireshark

Nowoczesne aplikacje sieciowe korzystają z REST, który jest de facto standardem w dzisiejszym developmencie, zarówno dla aplikacji webowych jak i aplikacji mobilnych. REST (Representational state transfer) to architektura aplikacji webowych, która opisuje backend jako stan, który może być pobierany lub modyfikowany poprzez zapytania wysyłane do zbioru endpointów (POST, PUT, GET), które przyjmują i zwracają obiekty w formacie JSON.

Przy debugowaniu aplikacji webowych często pojawia się potrzeba przeanalizowania zapytań REST. Czasami logi w aplikacji są niewystarczające lub niemożliwe do uzyskania. Wtedy pojawia się potrzeba narzędzia, które umożliwi przenalizowanie ruchu sieciowego bez ingerencji w samą aplikację. Aby to osiągnąć możemy skorzystać z narzędzia Wireshark.

W tym artykule zaprezentuję jak skorzystać z Wiresharka do zalogowania i analizy ruchu sieciowego pomiędzy częścią backendową i frontendową aplikacji.

Hands on

Aby zainstalować Wiresharka najlepiej skorzystać z oficjalnych instrukcji lub z repozytorium dostępnego dla wybranego systemu operacyjnego. Kliknij, aby przejść do oficjalnej strony pobierania.

Dodatkowo stworzymy prostą aplikację webową, która wystawi prosty endpoint RESTowy. W tym celu skorzystamy z frameworka express.js, który jest jednym z najpopularniejszych frameworków do tworzenia aplikacji webowych w Node.js. Aby tego dokonać skorzystamy z poniższego kodu (wklej do pliku app.js w nowym folderze):

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}`);
});

Do uruchomienia aplikacji niezbędny będzie node.js oraz zainstalowanie zależności za pomocą npm. Aby uruchomić aplikację należy skorzystać z poniższych komend (przed uruchomieniem upewnij się, że masz zainstalowanego node.js oraz jesteś w folderze z plikiem app.js):

npm init -y
npm install express
node app.js

Aby przetestować działanie aplikacji należy otworzyć przeglądarkę i wpisać adres http://localhost:3000/api. W odpowiedzi powinno pojawić się {"message":"Hello World!"}.

Następnie należy uruchomić Wiresharka i wybrać właściwy interfejs. Jeżeli nie wiesz, który interfejs wybrać, skorzystaj z opcji any, która pozwala na nasłuchiwanie wszystkich interfejsów sieciowych.

Warto zaznaczyć, że Wireshark wymaga uprawnień administratora, aby móc nasłuchiwać ruch sieciowy na wszystkich interfejsach. Jeżeli podejrzewasz, że Wireshark nie działa poprawnie, sprawdź uprawnienia. Np. w systemie Linux można uruchomić Wiresharka z uprawnieniami roota za pomocą poniższej komendy:

sudo wireshark

Po wykonaniu tych kroków Wireshark zacznie logować cały ruch sieciowy, który przechodzi przez wybrany interfejs sieciowy. Zwykle ilość zalogowanych danych jest bardzo duża, ponieważ domyślnie Wireshark loguje wszystkie pakiety sieciowe. Aby zobaczyć tylko interesujące nas zapytania HTTP, należy skonfigurować odpowiednie filtry.

Najważniejsze filtry dla naszego przypadku to:

http - filtruje wszystkie zapytania HTTP
ip.src - filtruje zapytania wysyłane z określonego adresu IP
ip.dst - filtruje zapytania wysyłane do określonego adresu IP

Aby przefiltrować zalogowane dane należy dodać odpowiednie wyrażenie w pasku filtrów w górnej części interfejsu. Np. aby zobaczy wszystkie pakiety wysyłane na adres ip localhost należy wpisać: ip.dst = 127.0.0.1, aby zobaczyć wszystkie zapytania HTTP wysyłane lub odbierane przez aplikację uruchomioną na localhoście należy wpisać: (ip.dst = 127.0.0.1 or ip.src = 127.0.0.1 and http).

Localhost (127.0.0.1) to adres IP, który jest przypisany do interfejsu sieciowego loopback, który jest używany do komunikacji między procesami na tym samym urządzeniu. W przypadku aplikacji webowej uruchomionej na lokalnym serwerze, zapytania HTTP będą wysyłane na adres IP.

Przykład użycia

Teraz wireshark wyświetla tylko przychodzący i wychodzący ruch naszej aplikacji. Po odświeżeniu strony w przeglądarce powinny pojawić się nowe zapytania HTTP. Na przykładzie poniżej pierwsze dwa zapytania to odpowiednio request do i response z naszej aplikacji.

Warto wiedzieć również jak zobaczyć payload zapytań w formacie JSON. Domyślnie Wireshark pozwala na analizę payloadu zapytań w nieintuicyjnym, natywnym formacie. Aby otrzymać dane w bardziej czytelnym formacie należy skorzystać z funkcji "copy as printable text" dostępną w menu, pod prawym przyciskiem myszy w sekcji wyświetlającej body zapytania.

Aby otrzymać body zapytania w formacie JSON należy wybrać odpowiednie zapytanie oraz Java Script Object Notation, a następnie skorzystać z opcji copy as printable text.

Aby otrzymać header zapytania należy wybrać odpowiednie zapytanie oraz Hypertext Transfer Protocol, a następnie skorzystać z opcji copy as printable text.

Podsumowanie

Omówiłem kluczowe aspekty wykorzystania narzędzia Wireshark do debugowania aplikacji webowych, koncentrując się na zapytaniach REST, które są podstawą nowoczesnych aplikacji internetowych i mobilnych. Wireshark, jako zaawansowane narzędzie do analizy ruchu sieciowego, pozwala na obserwację zapytań HTTP bez konieczności ingerencji w kod aplikacji. Prawidłowo skonfigurowane filtry pozwalają na dostosowanie działania Wiresharka do naszych potrzeb.

Porozmawiajmy

Szukasz irytującego buga? Potrzebujesz pomocy w rozwoju lub utrzymaniu aplikacji webowych? Szukasz kreatywnego zespołu programistów do rozwiązania Twojego problemu? Świetnie trafiłeś! Skontaktuj się z nami.