Advanced · Building with AI · module 143 of 155
Building a secure web form or small web app
Build a form or small web app with AI help, and check the basic rules for security, privacy and accessibility.
After this lesson
You recognise the main security mistakes in a small web application and have AI code checked for them before it goes online.
In view · How it connects
A small web app with a secure foundation
Keys are never in the code the browser receives.
The server checks every field; submissions are behind a login.
Unusual input, error messages without technical details and a second reader.
Part 1 of 3 · Secrets on the server
Your preference for less movement is on. Choose each part yourself.
Built quickly, not yet secure
AI can make a form, a small database and a web page in a few minutes. That often works straight away, but working is not the same as being secure. Typical mistakes: a secret key in the web page’s code, where anyone can read it; input that the server does not check; a page of submissions that anyone who knows the link can reach. Such a mistake leaks the data of real people. So assume that a first version is not yet ready for real data.
The basic rules
Secrets, such as keys for a payment or AI service, belong on the server and never in the code the browser receives. The server checks every field again, even if the page already did, because an attacker simply sends their own request. Ask only for the data you need, and say on the page what you do with it (lesson 117). Show submissions only to people who are logged in and allowed to see them. When there is an error, show an ordinary message, not technical details of your server.
Having it reviewed and tested
Explicitly ask the AI to review the code on these points, and read the answer critically: a self-check is not a guarantee. Test it yourself with odd input, an empty form and a very long text. Check whether the form can be used with the keyboard and whether the fields have a label (lesson 124). Have an application that processes real personal data reviewed by someone with security experience before it goes online.
New practice example
From explanation to a usable result.
A small web app that works is not yet secure. Secrets on the server, checks on the server and data behind a login form the basis.
Fictional practice situationFictional: a volunteer uses AI to build a form for registering volunteers for a running race. The form asks for name, email address, phone number, national register number and T-shirt size.
View a possible solution
This is how it can be done
The national register number is not needed for this task; I remove that field. The server checks the email address and phone number. The list of registrations is behind a login for the two organisers. The form states what we use the data for and when we delete it.
Why this works
Asking for less data is the simplest protection. What remains is only seen by those who need it.
Make it slightly more difficult
Write the sentence for the form that explains what happens to the data and when it is deleted.
Extra practice, at your own pace. You do not need to submit anything. This does not count towards an automatic assessment.
Your workplace · learning by doing
Make something. See what changes.
Checking the AI connection… You can already view the written example.
Present your assignment to Ende.
Read the answer, change one thing, and compare.
Previously held
New version
You remain in control
What do you want to improve in your next attempt?
On this device only. AI answers remain only in this page memory. This is self-review, not a grade.
Why this approach works
Asking for less data is the simplest protection. What remains is only seen by those who need it.
A step further
Write the sentence for the form that explains what happens to the data and when it is deleted.
Try & discover · no obligation
Become the source checker yourself
Only mark statements that the source does not support. Then check your selection.
Fictional sign-up app for a neighbourhood party, built with AI help. A volunteer describes how it works.
Select which sentences you would correct above. The answer remains hidden until you check your selection.
This trial works locally with fictitious data and does not count towards your lesson completion. It starts anew with a new lesson or reload.
A prompt to get you started
Review this fictional code of a registration form for security and privacy. Check in particular: are there secrets in the browser code, does the server check every field, who can see the submissions, what data is requested and what does a visitor see when there is an error? For each problem, give the severity and a concrete fix. [Paste the code here]
Apply it
You had AI build a small booking app. It works well and you want to share it with your club’s members today. The list of bookings is on a page without a login.
Which approach best fits this situation?
- Share it today; nobody will find the page with the list.
- Make the link to the list a bit longer so it is harder to guess.
- Put the list behind a login, check the other basic rules and test with a few members before you share the app widely.
With JavaScript, you can check your approach and receive immediate feedback.
Test your insight
Your form’s code checks in the browser whether an email address is valid. Is a check on the server still needed?
- No, the browser already checks it.
- Yes, because someone can send a request to the server without using your page.
- Only if the form processes payments.
Extra practice
Take a small form or a sample app that you made with AI. Go through the basic rules of this lesson and note for each rule whether the application meets it.
Finding 1: the key for the mail service was in the page’s JavaScript; it is now on the server. Finding 2: the server accepted an email address without @; a check has been added. Finding 3: the page with submissions could be reached without a login; it now asks for a login. Finding 4: the form also asked for the year of birth, which is not needed; that field is gone.
