mitmproxy

Av og til lurer man på hva som egentlig blir sendt mellom frontend og backend. Hvor mange requester blir sendt til backend når en bruker treffer landingssiden? Hvordan ser egentlig en graphql-request ut på http-laget? Hva ville skjedd om man endret en request litt?

I slike tilfeller trenger man en reverse proxy.

Der en vanlig proxy settes foran klienten for å formidle requesten utover, settes en reverse proxy foran backend for å formidle requester innover.

Dermed får en reverse proxy all trafikk som går mellom frontend og backend, og kan inspisere, modifisere og spille av requester på nytt.

Verktøyvalg

Hvis man vil ha mest mulig funksjonalitet i en applikasjon og mener at grafisk brukergrensesnitt peaket på Linux i slutten av 90-tallet, da bør man velge Burp Suite

De som kun er ute etter et ekstra verktøy i verktøykassen og ikke har tenkt til å basere sin karriere på dette verktøyet bør se på mitmproxy^[1]

Installering

mise

mise use uv
mise use pipx:mitmproxy

Docker

mitmproxy kommer også som et docker-image:

https://hub.docker.com/r/mitmproxy/mitmproxy

Dette er veldig godt egnet til å ta med i en egen debug-versjon av compose.yaml

macOS

brew install mitmproxy

Linux

De fleste distribusjoner tilbyr mitmproxy gjennom distribusjonens pakkesystem.

Windows

Bruk WSL og installer på samme måte som ved Linux.

Sett opp en reverse proxy:

mitmproxy -p 4001 --mode reverse:http://localhost:4000

Nå kjører proxyen på port 4001 og videresender all trafikk til localhost:4000.

Frontend må nå konfigureres til å gå mot port 4001 istedenfor port 4000 for at trafikken skal gå igjennom mitmproxy.

Hva kan man gjøre med mitmproxy?

Når proxyen kjører får du en sanntidsvisning av alle HTTP-requester som går gjennom den:

Trykk Enter på en request for å se nærmere på requesten.

Request body

Her kan du se hvordan en GraphQL-query ser ut på http-laget:

Trykk Tab for å skifte fra å se requesten til å se responsen.

Response body

Her kan du se response body for requesten over:

mitmweb

mitmproxy kommer også som et web-grensesnitt:

Dette passer fint til å bruke i den nevnte debug-versjonen av compose.yaml.

Konklusjon

mitmproxy er et nyttig verktøy når du trenger å:

• Forstå hva som faktisk sendes mellom frontend og backend
• Debugge API-problemer ved å inspisere og endre requests
• Teste hvordan applikasjonen reagerer på ulike scenarioer

Det er raskt å komme i gang med, krever minimalt med konfigurasjon, og gir deg full kontroll over HTTP-trafikken i utviklingsmiljøet ditt.

---

1. mitmproxy står for "Man-In-The-Middle Proxy" - et begrep som kommer fra "Man-in-the-Middle Attack" (MITM). Dette er et kjent angrep innen sikkerhet hvor en angriper setter seg mellom to parter som kommuniserer, og kan da avlytte eller manipulere trafikken uten at partene vet om det.