Gevorderd · Bouwen met AI · module 143 van 155
Een veilig webformulier of kleine webapp bouwen
Bouw met AI-hulp een formulier of kleine webapp, en controleer de basisregels voor veiligheid, privacy en toegankelijkheid.
Na deze les
Je herkent de belangrijkste veiligheidsfouten in een kleine webtoepassing en laat AI-code daarop nakijken voordat ze online gaat.
In beeld · Zo hangt het samen
Een kleine webapp met een veilige basis
Sleutels staan nooit in de code die de browser krijgt.
De server controleert elk veld; inzendingen staan achter een login.
Vreemde invoer, foutmeldingen zonder technische details en een tweede lezer.
Onderdeel 1 van 3 · Geheimen op de server
Je voorkeur voor minder beweging staat aan. Kies zelf elk onderdeel.
Snel gebouwd, nog niet veilig
AI kan in enkele minuten een formulier, een kleine database en een webpagina maken. Dat werkt vaak meteen, maar werken is iets anders dan veilig zijn. Typische fouten: een geheime sleutel in de code van de webpagina, waar iedereen ze kan lezen; invoer die de server niet controleert; een pagina met inzendingen die bereikbaar is voor wie de link kent. Zo’n fout lekt gegevens van echte mensen. Ga er dus van uit dat een eerste versie nog niet klaar is voor echte gegevens.
De basisregels
Geheimen, zoals sleutels voor een betaal- of AI-dienst, horen op de server en nooit in de code die de browser krijgt. De server controleert elk veld opnieuw, ook als de pagina dat al deed, want een aanvaller stuurt gewoon zijn eigen verzoek. Vraag alleen de gegevens die je nodig hebt, en zeg op de pagina wat je ermee doet (les 117). Laat inzendingen alleen zien aan wie ingelogd is en ze mag zien. Toon bij een fout een gewone melding, geen technische details van je server.
Laten nakijken en testen
Vraag de AI uitdrukkelijk om de code op deze punten na te kijken, en lees het antwoord kritisch: een zelfcontrole is geen garantie. Test zelf met vreemde invoer, een leeg formulier en een heel lange tekst. Controleer of het formulier met het toetsenbord bruikbaar is en of de velden een label hebben (les 124). Laat een toepassing die echte persoonsgegevens verwerkt, nalezen door iemand met ervaring in beveiliging voordat ze online gaat.
Nieuw oefenvoorbeeld
Van uitleg naar een bruikbaar resultaat.
Een kleine webapp die werkt, is nog niet veilig. Geheimen op de server, controle op de server en gegevens achter een login vormen de basis.
Fictieve oefensituatieFictief: een vrijwilliger bouwt met AI een formulier om vrijwilligers voor een loopwedstrijd in te schrijven. Het formulier vraagt naam, e-mailadres, telefoonnummer, rijksregisternummer en T-shirtmaat.
Bekijk een mogelijke uitwerking
Zo kan het
Het rijksregisternummer is niet nodig voor deze taak; dat veld schrap ik. De server controleert e-mailadres en telefoonnummer. De lijst met inschrijvingen staat achter een login voor de twee organisatoren. Op het formulier staat waarvoor we de gegevens gebruiken en wanneer we ze verwijderen.
Waarom dit werkt
Minder gegevens vragen is de eenvoudigste bescherming. Wat overblijft, ziet alleen wie het nodig heeft.
Maak het iets moeilijker
Schrijf de zin voor op het formulier die uitlegt wat er met de gegevens gebeurt en wanneer ze verwijderd worden.
Extra oefenen, op jouw tempo. Je hoeft niets in te sturen. Dit telt niet mee als automatische beoordeling.
Jouw werkplek · leren door te proberen
Maak iets. Kijk wat er verandert.
Even de AI-verbinding controleren… Je kunt het geschreven voorbeeld al bekijken.
Stel je opdracht voor aan Ende.
Lees het antwoord, verander één ding en vergelijk.
Eerder vastgehouden
Nieuwe versie
Jij houdt de controle
Wat wil je in je volgende poging verbeteren?
Alleen op dit apparaat. AI-antwoorden blijven alleen in dit paginageheugen. Dit is zelfcontrole, geen cijfer.
Waarom deze aanpak werkt
Minder gegevens vragen is de eenvoudigste bescherming. Wat overblijft, ziet alleen wie het nodig heeft.
Een stap verder
Schrijf de zin voor op het formulier die uitlegt wat er met de gegevens gebeurt en wanneer ze verwijderd worden.
Probeer & ontdek · vrijblijvend
Word zelf de broncontroleur
Markeer alleen uitspraken die de bron niet ondersteunt. Controleer daarna je selectie.
Fictieve inschrijvingsapp voor een buurtfeest, gebouwd met AI-hulp. Een vrijwilliger beschrijft hoe ze werkt.
Kies hierboven welke zinnen je zou corrigeren. Het antwoord blijft verborgen tot je je selectie controleert.
Deze proef werkt lokaal met fictieve gegevens en telt niet mee voor je lesafronding. Bij een nieuwe les of herladen begint ze opnieuw.
Een prompt om mee te starten
Kijk deze fictieve code van een inschrijvingsformulier na op veiligheid en privacy. Controleer vooral: staan er geheimen in de browsercode, controleert de server elk veld, wie kan de inzendingen zien, welke gegevens worden gevraagd en wat ziet een bezoeker bij een fout? Geef per probleem de ernst en een concrete aanpassing. [Plak hier de code]
Pas het toe
Je liet AI een kleine reservatie-app bouwen. Ze werkt goed en je wilt ze vandaag delen met de leden van je club. De lijst met reservaties staat op een pagina zonder login.
Welke aanpak past het best bij deze situatie?
- Vandaag delen; niemand zal de pagina met de lijst vinden.
- De link naar de lijst wat langer maken, zodat ze moeilijker te raden is.
- Zet de lijst achter een login, controleer de andere basisregels en test met een paar leden voordat je de app breed deelt.
Met JavaScript kun je je aanpak controleren en direct feedback krijgen.
Test je inzicht
De code van je formulier controleert in de browser of een e-mailadres geldig is. Is een controle op de server dan nog nodig?
- Nee, de browser controleert het al.
- Ja, want iemand kan een verzoek naar de server sturen zonder je pagina te gebruiken.
- Alleen als het formulier betalingen verwerkt.
Extra oefenen
Neem een klein formulier of een voorbeeldapp die je met AI maakte. Loop de basisregels van deze les af en noteer per regel of de toepassing eraan voldoet.
Bevinding 1: de sleutel voor de maildienst stond in de JavaScript van de pagina; die staat nu op de server. Bevinding 2: de server aanvaardde een e-mailadres zonder @; er is een controle toegevoegd. Bevinding 3: de pagina met inzendingen was bereikbaar zonder login; ze vraagt nu een login. Bevinding 4: het formulier vroeg ook het geboortejaar, dat niet nodig is; dat veld is weg.
