Ga naar hoofdinhoud

Netwerken – Het grote plaatje

In dit labo maak je zichtbaar wat er gebeurt tussen het moment dat je op Enter drukt en het moment dat een pagina op je scherm staat. Je bouwt een kleine site, leest je eigen netwerkverkeer, meet hoelang elke stap duurt en volgt je pakketten tot in Zuid-Afrika. Op het einde installeer je Wireshark voor het volgende lesmoment.

Leerstof

Raadpleeg deze secties als je iets wil nalezen:

Hoe werk je dit labo door?
  1. Doe eerst, denk daarna. Bij elke doe-opdracht staat een lijstje stappen dat je afvinkt terwijl je ze uitvoert. Je voortgang blijft bewaard in je browser, dus je mag de pagina sluiten en later verdergaan.
  2. Schrijf je waarneming zelf op. Pas als je zelf iets genoteerd hebt, verschijnt de knop om met het modelantwoord te vergelijken. Dat is met opzet: eerst kijken, dan pas nalezen.
  3. De controlevragen zijn af te lezen. Je vindt het antwoord in je eigen DevTools of terminal, niet in de cursus. Loop je vast, vraag dan een Hint. Na twee foute pogingen verschijnt ook Toon antwoord.
  4. De hulp neemt af. De eerste oefeningen geven hints en uitleg bij elk item, de laatste enkel nog een score. Tegen dan heb je de redenering te pakken.

Oefening 1 – Internet of web?​

"Internet" en "het web" worden door elkaar gebruikt, maar ze zijn niet hetzelfde. Deel elke situatie in. Stel jezelf telkens dezelfde vraag: is er een URL, is er HTTP, en is er een browser die HTML verwerkt?

1.Je bekijkt een YouTube-video in Chrome.
2.Je stuurt een mail met de Outlook-app op je laptop.
3.Je doet git push naar een remote die begint met git@github.com.
4.Je computer zoekt op welk IP-adres bij ap.be hoort.
5.Je opent https://mail.google.com in je browser.
6.Je logt in op een server met ssh student@server.ap.be.
7.Je code voert fetch('https://api.example.com/users') uit.
8.Je speelt een online game die zijn eigen protocol over UDP gebruikt.

Oefening 2 – Client of server?​

Bij elke netwerkverbinding vraagt de ene partij en antwoordt de andere. Bepaal voor elk onderdeel welke rol het opneemt.

1.Je browser op het moment dat je https://www.ap.be opent.
2.Het Vite-proces dat je start met npm run dev.
3.De Spotify-app op je gsm.
4.Het programma dat luistert op poort 443 en wacht op verzoeken.
5.Het commando curl https://example.com.
6.GitHub bij een git pull.
7.Je JavaScript-code die fetch('/api/producten') uitvoert.
8.De machine die een 404 Not Found terugstuurt.

Je eigen voorbeeld​

Een rol herkennen in een lijstje is één ding. Ze zelf benoemen in iets dat je gisteren gebruikt hebt, is de echte test.

Doe-opdrachtBeschrijf een toepassing die je zelf gebruikt in het client-servermodel.0 / 4 stappen

Schrijf je voorbeeld uit in vier zinnen: wie is de client, wie is de server, wat werd er gevraagd, wat kwam er terug?

Schrijf eerst zelf op wat je zag.

Oefening 3 – Je eigen mini-site in de Network tab​

Je kijkt eerst naar verkeer dat je zelf veroorzaakt en volledig begrijpt: een pagina van vier bestanden die je zelf maakt.

Gebruik gerust dit startpunt voor index.html:

<!DOCTYPE html>
<html lang="nl">
  <head>
    <meta charset="utf-8" />
    <title>Mini-site</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>Mijn mini-site</h1>
    <p>Deze pagina veroorzaakt netwerkverkeer dat ik zelf kan volgen.</p>
    <img src="logo.png" alt="Een afbeelding naar keuze" width="200" />
    <script src="script.js"></script>
  </body>
</html>
Doe-opdrachtBouw een kleine site en bekijk het verkeer dat ze veroorzaakt.0 / 6 stappen

Noteer hoeveel requests je in totaal ziet, en welke bestanden dat zijn.

Schrijf eerst zelf op wat je zag.

Zoek bij het eerste request de request header Host en de response header Content-Type. Wat staat erin, en wat betekenen ze?

Schrijf eerst zelf op wat je zag.

Controleer wat je ziet​

Lees de antwoorden af in je eigen Network tab.

1.Welke method gebruikte je browser om index.html op te halen?
2.Welke statuscode kwam terug voor index.html?
3.Welke waarde staat er in de kolom Type bij index.html?
4.Welke Initiator staat er bij style.css?
5.Hoeveel responses horen er bij dat ene request?

Oefening 4 – Request of response?​

Blijf in de Network tab van je mini-site en klik het request naar style.css aan. Bepaal voor elk gegeven of het bij het request hoort (wat jouw browser verstuurde) of bij de response (wat de server terugstuurde).

1.GET
2.200 OK
3.Host: 127.0.0.1:5500
4.Content-Type: text/css
5.User-Agent: Mozilla/5.0 ...
6.De inhoud van je CSS-bestand.
7.De JSON die je bij een POST meestuurt (tabblad Payload).
8.De waarde in de kolom Size.

Oefening 5 – De cache betrappen​

Niet elk request haalt effectief data op. Soms bevestigt de server enkel dat jouw kopie nog goed is. Dat verschil zie je live.

Doe-opdrachtZie het verschil tussen een bestand dat opnieuw wordt opgehaald en een bestand uit je cache.0 / 4 stappen

Wat veranderde er bij de tweede refresh, en wat veranderde er opnieuw met Disable cache aan?

Schrijf eerst zelf op wat je zag.

Controleer wat je ziet​

1.Welke statuscode krijgt een ongewijzigd bestand bij de tweede refresh?
2.Welke optie vink je aan om je cache te negeren terwijl je ontwikkelt?

Schermafbeelding van de bovenste balk van de Network tab in Chrome, met aanduidingen bij Disable cache, Preserve log, de filterknoppen (All, Doc, JS, Img, Fetch/XHR) en het dropdownmenu voor throttling.

Oefening 6 – De reis van een URL meten​

Het tabblad Timing toont hoelang elke fase van één request duurde. Je herkent er de eerste stappen van de reis van een URL in terug, met een tijd erbij.

Doe-opdrachtMeet de fasen van één request en herken er de reis van een URL in.0 / 4 stappen

Noteer de duur van DNS Lookup, Initial connection, SSL, Waiting (TTFB) en Content Download. Welke fase duurde het langst, en wat gebeurt daar?

Schrijf eerst zelf op wat je zag.

Controleer wat je ziet​

1.In welke fase gebeurt de vertaling van de domeinnaam naar een IP-adres?
2.Welke fase hoort bij het opzetten van de TCP-verbinding?
3.Welke fase toont hoelang de server nadenkt voor het eerste byte terugkomt?

Teken de reis​

Je moet de reis van een URL aan de hand van een diagram kunnen beschrijven. Maak het niet mooier dan nodig, wel volledig: je moet er later zelf mee kunnen uitleggen wat er gebeurt.

Doe-opdrachtTeken de volledige reis van een URL, van adresbalk tot pagina in beeld.0 / 5 stappen

Som de stappen van je diagram op in de juiste volgorde.

Schrijf eerst zelf op wat je zag.

Oefening 7 – Welke laag is dit?​

Elk begrip hieronder hoort bij één laag. Deel ze in. Er staan geen hints meer bij: gebruik het OSI-model als je twijfelt.

1.DNS Lookup in het Timing-tabblad
2.Initial connection: de SYN, SYN-ACK, ACK-handdruk
3.Een router die beslist naar welke volgende hop je pakket gaat
4.De glasvezelkabel tussen twee datacenters
5.Het poortnummer 5173 in localhost:5173
6.De statuscode 404
7.Het IP-adres 193.190.253.10
8.Waiting (TTFB): de server verwerkt je verzoek

Oefening 8 – Het netwerk van netwerken zien​

Tot nu keek je naar de twee uiteinden van de verbinding. Nu kijk je naar wat ertussen zit: de routers die je pakketten doorgeven.

Doe-opdrachtMaak zichtbaar dat het internet een netwerk van netwerken is.0 / 5 stappen

Vergelijk beide traceroutes: aantal hops en tijden. Wat verklaart het verschil? En wat betekenen de regels met enkel sterretjes?

Schrijf eerst zelf op wat je zag.
Werkt het niet?

Veel school- en bedrijfsnetwerken blokkeren dit verkeer. Krijg je enkel time-outs, probeer het dan thuis of via je gsm-hotspot. Ook dat is een resultaat: het zegt iets over wie het netwerk beheert.

Controleer wat je ziet​

1.Welk commando gebruik je op Windows voor een traceroute?
2.Op welke OSI-laag werken de routers die je in de traceroute ziet passeren? Geef het laagnummer.
3.Welk toestel is thuis bijna altijd de eerste hop?

Oefening 9 – Waar zit het probleem?​

Elke foutmelding hoort bij een laag. Wie dat herkent, zoekt niet in het wilde weg. Deel elk scenario in bij de laag waar je zou beginnen zoeken.

1.DNS_PROBE_FINISHED_NXDOMAIN bij het openen van een site
2.ERR_CONNECTION_REFUSED op localhost:5173
3.404 Not Found op /api/gebruikers
4.Je laptop vindt geen enkel wifi-netwerk meer
5.500 Internal Server Error na het versturen van een formulier
6.Destination host unreachable bij ping
7.ping 8.8.8.8 werkt, ping www.google.com niet
8.De netwerkkabel is uit de switch geschoten

Huiswerk – Wireshark installeren​

Dit moet klaar zijn voor het volgende lesmoment. De installatiestappen per besturingssysteem staan bij Netwerkverkeer bekijken.

Doe-opdrachtInstalleer Wireshark en maak je eerste opname.0 / 6 stappen

Wat zag je bij beide filters, en welke stappen uit de reis van een URL herken je?

Schrijf eerst zelf op wat je zag.

Controleer wat je ziet​

1.Uit hoeveel pakketten bestaat een volledige TCP-handdruk?
2.Welk filter toont enkel de naamsvertalingen in je opname?
Afbeelding invoegen

Schermafbeelding van Wireshark met de filterbalk ingevuld (dns), zodat studenten weten waar ze moeten typen en hoe een geslaagde opname eruitziet.

Enkel je eigen verkeer

Neem enkel verkeer op op je eigen netwerk en van je eigen toestel. Meeluisteren op een netwerk dat niet van jou is, is in veel gevallen strafbaar.

Uitdaging – De grote request-zoektocht​

Geen stappenplan en geen modelantwoorden meer: kies zelf je site en je tool. Vink af wat je gevonden hebt, en noteer er voor jezelf bij op welke site en hoe.

Doe-opdrachtZoek zelf, met de tool die jij kiest. Vink af wat je gevonden hebt.0 / 8 stappen

Wie eerst alle acht vindt, wint.

Denk tot slot na over deze twee vragen:

  • Welke vondst verraste je het meest?
  • Wat zegt punt 5 over de manier waarop moderne websites opgebouwd zijn?