← Terug naar alle modules
Beginner MODULE 03 ⏱️ 2-3 uur

Web Fundamentals & HTTP

Je navigeert elke dag over het internet, maar weet je ook precies hoe jouw browser met servers praat? Tijd om onder de motorkap van het web te kijken.

Jouw voortgang: 0%

1. Frontend vs. Backend

Een webapplicatie bestaat in de basis uit twee delen:

  • Frontend (Client-side): Dit is alles wat er in jouw browser gebeurt. Het bestaat uit HTML (structuur), CSS (opmaak) en JavaScript (interactiviteit). Omdat deze code naar jouw browser wordt gestuurd, heb je als hacker volledige controle over de frontend. Vertrouw dus nooit iets vanaf de frontend!
  • Backend (Server-side): De computer (server) die ergens anders ter wereld staat. Deze draait de databases (zoals MySQL of PostgreSQL) en de applicatielogica (in talen zoals PHP, Python, Java of Node.js). De code op de backend kun je als normale bezoeker niet inzien.

2. Het HTTP Protocol

Wanneer je een website bezoekt, communiceren je browser en de server via HTTP (HyperText Transfer Protocol) of de veilige variant HTTPS. Dit is eigenlijk gewoon een tekstgebaseerd gesprek tussen twee computers.

Jouw browser stuurt een Request (verzoek). De server stuurt een Response (antwoord) terug.

Een HTTP Request (Jouw Browser)

GET /profiel HTTP/1.1
Host: cyberpad.nl
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)
Cookie: session_id=12345abcde

In dit voorbeeld "vraag" je (GET) om de pagina /profiel op te halen. Je stuurt ook een cookie mee om te bewijzen wie je bent.

Een HTTP Response (De Server)

HTTP/1.1 200 OK
Content-Type: text/html
Set-Cookie: nieuwe_sessie=999

<html><body>Welkom op je profiel!</body></html>

3. HTTP Methods (Verbs)

In het voorbeeld hierboven zagen we 'GET'. Dit zijn de belangrijkste HTTP-methodes die je moet kennen:

  • GET: Vraag data op. Wordt gebruikt voor vrijwel elke normale pagina die je bezoekt. Stuur NOOIT wachtwoorden via een GET-request (ze komen dan in de URL te staan!).
  • POST: Stuur data naar de server. Dit gebruik je wanneer je een login-formulier invult, een reactie plaatst, of een bestand uploadt.
  • PUT / PATCH: Bestaande data updaten (bijv. je profielnaam wijzigen).
  • DELETE: Bestaande data verwijderen.
Hacker Inzicht: Soms controleert een server niet of jij wel de rechten hebt om een DELETE request te sturen. Wat gebeurt er als je de browser manipuleert en zelf een DELETE /gebruiker/1 request stuurt?

4. HTTP Status Codes

Wanneer de server antwoordt, geeft hij een statuscode mee (bijvoorbeeld 200 OK). Deze codes vallen uiteen in 5 klassen:

  • 1xx (Informatie): Het verzoek is ontvangen, het proces gaat door.
  • 2xx (Succes): Gelukt! De bekendste is 200 OK.
  • 3xx (Redirection): Je wordt doorgestuurd. Bijv. 301 Moved Permanently of 302 Found.
  • 4xx (Client Error): Jij hebt iets fout gedaan. Bijv. 400 Bad Request, de beroemde 404 Not Found, of 403 Forbidden (je hebt geen toegang).
  • 5xx (Server Error): De server heeft iets fout gedaan. Bijv. 500 Internal Server Error. Als hacker ben je dol op 500-errors, omdat dit betekent dat je de applicatie onverwacht gedrag hebt laten vertonen, wat vaak een kwetsbaarheid onthult!

5. Cookies & Sessions

HTTP is een stateless protocol. Dat betekent dat HTTP geen geheugen heeft. De server weet bij je tweede request niet meer dat jij degene was die zojuist is ingelogd.

Om dit op te lossen gebruiken we Cookies en Sessies.

  1. Jij logt in met gebruikersnaam en wachtwoord (POST request).
  2. De server controleert of dit klopt en maakt in zijn database een unieke, tijdelijke code aan (Sessie-ID).
  3. De server stuurt die code naar jou terug en zegt: "Sla dit op in een Cookie".
  4. Bij elke volgende pagina die je opent, stuurt jouw browser automatisch die cookie mee, zodat de server weet: "Oh ja, dat is Nils!".
💡 Session Hijacking: Als een hacker jouw Session-Cookie weet te stelen (bijvoorbeeld via Cross-Site Scripting (XSS)), kan hij die cookie in zijn eigen browser plakken. De server zal denken dat de hacker jou is, en hij is ingelogd zónder jouw wachtwoord te weten!

🎯 Praktijkopdrachten

  • Klik in je browser op de rechtermuisknop ergens op deze pagina en kies "Inspecteren" (of druk op F12). Ga naar de tab "Network" en ververs de pagina. Klik op het bovenste document en bekijk de Request Headers en Response Headers.

  • Ga in diezelfde Developer Tools naar de tab "Application" of "Storage" en zoek het kopje "Cookies". Welke cookies heeft CyberPad opgeslagen?

📝 Kennis Test

Vraag 1 van 3