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.
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 HTTPip.src
- filtruje zapytania wysyłane z określonego adresu IPip.dst
- filtruje zapytania wysyłane do określonego adresu IPAby 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.
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
.
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.
W Blues Brackets zajmujemy się rozwiązywaniem prawdziwych problemów za pomocą najnowszych technologii.