Debug je HTTP verkeer met Fiddler

 
08 februari 2014

Deze maand in de categorie ‘gave technologie’ weer eens een keer een tool. Fiddler is een ‘web debugging proxy’ waarmee je HTTP(S) verkeer kunt monitoren en debuggen. Het HTTP protocol wordt in veel situaties gebruikt. Navigeer je in je browser naar een pagina dan gaat dat over HTTP net als eventuele AJAX calls op de achtergrond. En REST API’s en webservices worden veelal gebouwd op het HTTP protocol, zowel voor client -server als voor server-server verkeer.

Als je software aan het ontwikkelen bent waarbij je op enige manier gebruik maakt van de HTTP stack dan komt het regelmatig voor dat je wil zien wat er precies over de lijn gaat. In de meeste browsers zit functionaliteit waarmee je kunt zien welke requests er gedaan zijn maar dit werkt alleen als je communicatie vanuit de browser hebt (dus in server-server heb je er niets aan) en de functionaliteit is vaak beperkt. Wil je meer dan komt Fiddler in beeld. Met Fiddler zitten er bijna geen restricties aan wat je kunt monitoren op de HTTP stack en kun je op alle manieren inbreken op de requests en responses die verstuurd worden.

Achtergrond en werking

Fiddler bestaat al sinds ca. 2003 en is ontwikkeld door Eric Lawrence die in de tijd bij Microsoft werkte. Sinds 2012 valt Fiddler onder de vlag van Telerik (waar Eric Lawrence nu ook werkt). Al die tijd is Fiddler freeware geweest en het lijkt het er op dat dat ook zo blijft.

Fiddler is een HTTP proxy. Dit houdt in dat hij zich nestelt tussen de cliënt en de server en al het HTTP verkeer onderschept en doorstuurt. Bij het opstarten van Fiddler registreert hij zichzelf op je computer als default proxy. Dit kun je ook zien als je Fiddler opent en daarna de Proxy Settings bekijkt van je internet connectie. Hier zie je dat de proxy is ingesteld op de localhost op poort 8888 (Figuur 1) en dat is de poort waar Fiddler op luistert.
Proxy Settings

Figuur 1: Fiddler in de proxy settings

Grafisch weergegeven in Figuur 2 zie je hoe een request en response verloopt met Fiddler als proxy er tussen. Stel dat je vanuit je browser navigeert naar www.nu.nl dan wordt het request eerst naar Fiddler gestuurd (localhost:8888) waarna die het request doorstuurt. De response van de webserver komt ook eerst binnen bij Fiddler waarna die het doorstuurt naar de browser. Doordat al het verkeer nu via Fiddler geleid wordt kun je op dit punt precies zien wat er verstuurd wordt en wat er als antwoord terug komt

Verkeer Door De Proxy

Figuur 2: Een request – response met Fiddler als proxy

Wat kun je met Fiddler zien

Als je Fiddler opent zie je dat het scherm in twee delen is opgesplitst (Figuur 3). Aan de linkerkant zie je alle requests die langs Fiddler zijn gekomen en aan de rechterkant kun je de details zien van het geselecteerde request. In dit geval zien we aan de linkerkant een aantal GET requests en één POST die naar een website zijn gestuurd. Daarbij zie je meteen naar welke URL de requests zijn gegaan en welke statuscode is geretourneerd.

Request response statistics

We hebben de POST geselecteerd en aan de rechterkant zien we gedetailleerde statistics van het request. We kunnen bijvoorbeeld zien hoeveel bytes er verstuurd en ontvangen zijn, en hoeveel daarvan headerinformatie was en hoeveel er in de body van het bericht zat. We kunnen daarnaast precies zien hoeveel tijd de totale request-response cycle heeft geduurd en waar de tijd in is gaan zitten.


Request Statistics



Figuur 3: Hoofdscherm van Fiddler met statistics van één request

De inhoud in detail zien

Naast de overkoepelende statistics kunnen we ook de request en response berichten zelf in detail bekijken met de ‘inspectors’ view. Hier kun je op verschillende manieren de berichten weergeven. In dit voorbeeld (Figuur 4) kijken we met de WebForms view naar het request zodat we op een gestructureerde manier de geposte waardes en de elementen uit de querystring kunnen zien. Voor de response hebben we de JSON view gekozen zodat we de JSON response op een nette manier zien. Naast deze twee views zijn er ook speciale views om o.a. XML berichten, images, de headers en de cookies te bekijken. En als je je wil kun je altijd terugvallen op de Raw view waarin je de berichten ziet zoals ze echt over de lijn gaan.

Request En Response In Detail

Figuur 4: Inhoud request en response in detail

Als zien niet voldoende is

Met Fiddler kun je niet alleen kijken naar het verkeer dat langs gekomen is, je kunt hier ook mee spelen. Je kunt bijvoorbeeld een request nogmaals uitvoeren. Hiervoor selecteer je het request aan de linkerkant en druk je op ‘R’. Je kan een bericht ook aanpassen. Als je een request geselecteerd hebt kun je deze met F2 unlocken waarna je het bericht kunt aanpassen. Je kan dan bijvoorbeeld in de WebForms view die we zien in Figuur 4 de formdata aanpassen die verstuurd wordt. Maar je kunt bijvoorbeeld ook de url, headers en cookies aanpassen. Nadat je een bericht hebt aangepast kun je het versturen op de eerder genoemde manier.

Naast het aanpassen en opnieuw versturen van eerdere requests kun je ook breakpoints zetten. In de ‘filter’ tab kun je bijvoorbeeld een breakpoint zetten op alle POST requests zodat je de data kunt aanpassen voordat het naar de server verstuurd wordt.

Verder is er nog de composer tab waarmee je een request helemaal custom kunt opbouwen. Hierbij kun je bijvoorbeeld ook een file upload toevoegen.

Wat kan Fiddler nog meer

De essentie van Fiddler is HTTP verkeer bekijken en manipuleren. Daaromheen zijn er verschillende nuttige ‘toeters en bellen’ die je kunt gebruiken. Je kunt bijvoorbeeld nauwkeurig filteren welk verkeer er wel en niet gemonitord moet worden. Bij connecties die lang openstaan en af en toe data sturen (bijvoorbeeld bij long polling) kun je tussentijds zien wat er al ontvangen is. Je kunt requests exporteren en importeren wat handig kan zijn als je iets wil naspelen of door iemand anders nagespeeld wil hebben. Er is een ‘autoresponder’ die een vooropgezette response kan geven op bepaalde requests. En verder is Fiddler nog uit te breiden met add-ons die te vinden zijn op http://www.telerik.com/Fiddler/add-ons.

Alsof dat nog niet genoeg is, is er een scripting engine waarmee je het gedrag van Fidder kan aanpassen en bijvoorbeeld geautomatiseerd requests en responses aanpassen. En de kern van Fiddler is als los .Net component te krijgen zodat je de proxy- en manipulatiekracht van Fiddler in eigen applicaties kan inzetten. Een voorbeeld hiervan is de Telerik Test Studio waarbij ze gebruik maken van de Fiddler core voor een product waarmee je performance testen kunt doen op websites.

Conclusie

Als het aankomt op grip krijgen op HTTP verkeer dan gaat er weinig boven Fiddler. Het is ideaal om bij het werken aan websites te zien welk verkeer er loopt en eventuele bugs op te sporen. Je kunt Fiddler ook goed gebruiken voor het doen van security testen op websites. Je kunt bijvoorbeeld kijken in hoeverre de security van een site blijft staan als je handmatig URL’s of form parameters gaat aanpassen of bijvoorbeeld cookies gaat manipuleren.

Het gemak van Fiddler is zo krachtig dat dit bijvoorbeeld voor de makers van RavenDb de reden is geweest om voor HTTP als protocol te kiezen voor hun client-server communicatie (http://ayende.com/blog/157282/why-tcp-is-evil-and-HTTP-is-kinghttp://ayende.com/blog/157282/why-tcp-is-evil-and-HTTP-is-king).

Probeer het dus uit als je dat nog nooit gedaan hebt. Je kunt Fiddler gratis downloaden vanaf http://www.telerik.com/FiddlerHTTP://www.telerik.com/Fiddler en ik heb van een collega begrepen dat je het zelfs onder Mono op Linux aan de praat kan krijgen.

[[ In de interne nieuwsbrief van Sogyo schrijf ik, onder de titel ‘gave technologie’, over technologiën waar ik enthousiast over ben en waarvan ik vind dat iedere collega op zijn minst moet weten dat het bestaat. Dit artikel komt uit de Sogyo Nieuwsbrief van februari 2014 ]]


Werken met ?
Kijk dan bij onze mogelijkheden voor starters en/of ervaren IT'ers.


Categorieën: Development


Reactie

  • Daan schreef:

    Beste Arno,

    Helaas ben ik totaal niet bekend met de ins en outs van het internet en mijn pc.
    Sinds een aantal dagen krijg ik bij het opstarten de ‘DO NOT TRUST FIDLER’ melding met de vraag of ik deze wil accepteren of niet. Na enig internet research ben ik nog niet veel wijzer geworden, de blog van Erik Lawrence is voor mij ietwat abacadabra en uit jou verhaal denk ik te begrijpen dat voor een leek dit programma niet van belang is.
    Ik vraag mij allereerst af hoezo deze melding iedere keer verschijnt, hoe ik bij fiddler terecht ben gekomen en of het wijs is constant nee te drukken zonder verder actie te ondernemen? Ik hoop dat je mij kunt helpen bij mijn vragen.

    Met vriendelijke groet,

    Daan

    Geplaatst op 11 november 2014 om 15:23 Permalink