Invoervalidatie en de basis van escapen
Valideer en normaliseer invoer met kleine allowlists en guards; escape riskante tekens voordat u tekst toont
Invoervalidatie en de basis van escapen is een gratis JavaScript Academy-les op CoddyKit. Dit is les 1 van 3. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject JavaScript Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus JavaScript Academy bevat in totaal 3 lessen.
Het grote geheel
Doel: invoer voorspelbaar en veilig maken.
- Gebruik vroegtijdige controles om invoer meteen af te wijzen
- Geef de voorkeur aan lijsten met toegestane waarden boven vage regels
- Normaliseer naar een eenvoudige structuur
- Escape speciale tekens voordat je tekst toont
Basiscontroles voor getallen
Voeg eenvoudige controles toe: controleer het type en het bereik en normaliseer naar een eindwaarde.
// Validate age: number and range guard
function parseAge(input) {
// trim and parse
const n = Number(input);
if (!Number.isFinite(n)) return null; // reject non-numbers
if (n < 0 || n > 130) return null; // reject out-of-range
return Math.floor(n); // normalize to integer
}
console.log("age ok:", parseAge("21"));
console.log("age bad:", parseAge("twenty"));
Escapen voor veilige weergave
Voordat je tekst van gebruikers toont, moet je speciale tekens escapen, zodat de gebruikersinterface die als platte tekst behandelt.
// Escape a few risky characters before displaying in HTML contexts
function escapeText(s) {
if (typeof s !== "string") return "";
return s
.replaceAll("&", "&")
.replaceAll("<", "<")
.replaceAll(">", ">")
.replaceAll("\"", """)
.replaceAll("'", "'");
}
console.log("escaped:", escapeText("<b>Hello & bye</b>"));
Toelatingslijsten in de praktijk
Gebruik bij voorkeur toelatingslijsten voor vaste verzamelingen, zoals codes of rollen. Normaliseer hoofdlettergebruik en spaties.
// Allowlist example: only certain country codes
const ALLOWED = new Set(["TR", "US", "DE", "GB"]);
function parseCountry(code) {
if (typeof code !== "string") return null;
const up = code.trim().toUpperCase();
if (!ALLOWED.has(up)) return null; // reject unknown
return up; // normalized
}
console.log("country ok:", parseCountry("tr"));
console.log("country bad:", parseCountry("xx"));
Kleine objectvalidator
Controleer het type en de grenzen en geef daarna een genormaliseerde vorm terug waarop de rest van je code kan vertrouwen.
// Validate a tiny user object and normalize
function validateUser(input) {
if (typeof input !== "object" || input === null) return null;
const nameOk = typeof input.name === "string" && input.name.trim().length >= 1 && input.name.trim().length <= 40;
const ageOk = parseAge(input.age) !== null;
if (!nameOk || !ageOk) return null;
return {
name: input.name.trim(),
age: parseAge(input.age)
};
}
console.log("user ok:", validateUser({ name: " Ayla ", age: "22" }));
console.log("user bad:", validateUser({ name: "", age: "old" }));
Goede gewoonten voor defensief programmeren
Tips:
- Valideer aan de grenzen (gebruikersinvoer, netwerk).
- Gebruik toelatingslijsten, bereiken en typecontroles.
- Normaliseer één keer en houd de rest eenvoudig.
- Escape tekst voordat je die aan gebruikers toont.
Kennistoets over de basis van defensieve invoer
Korte controle: veilig invoerpatroon.
Samenvatting
Samenvatting: Beveilig vroeg, gebruik toelatingslijsten, normaliseer naar een veilige vorm en escape voordat je iets toont. Houd elke stap klein en leesbaar.
Leer JavaScript met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 59
- Lessen
- 200
Veelgestelde vragen
Is de les “Invoervalidatie en de basis van escapen” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad JavaScript Academy, waaronder “Invoervalidatie en de basis van escapen”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus JavaScript Academy bevat in totaal 3 lessen.
Wat leer ik in “Invoervalidatie en de basis van escapen”?
Valideer en normaliseer invoer met kleine allowlists en guards; escape riskante tekens voordat u tekst toont Je oefent met JavaScript Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met JavaScript Academy te beginnen?
Ervaring vooraf is niet nodig. JavaScript Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 3.
Hoe lang duurt de les “Invoervalidatie en de basis van escapen”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over JavaScript Academy?
Ja. Elke les over JavaScript Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Invoervalidatie en de basis van escapen
- Objecten veilig samenvoegen; bevriezen en verzegelen
- Error boundaries (conceptueel) zonder frameworks