Frontend Academy · Les

XSS-preventie: outputencoding en CSP

Begrijp reflected, stored en DOM-based XSS, escape door gebruikers beheerde output, vermijd innerHTML met onbetrouwbare gegevens en voeg een Content Security Policy-header toe.

Les 1 van 414 stappen

XSS-preventie: outputencoding en CSP is een gratis Frontend Academy-les op CoddyKit. Dit is les 1 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Frontend Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Frontend Academy bevat in totaal 4 lessen.

Wat is XSS?

Cross-Site Scripting vindt plaats wanneer een aanvaller uitvoerbare JavaScript in je pagina injecteert. De browser voert deze uit met de rechten van jouw origin — waardoor cookies kunnen worden gestolen, sessies kunnen worden gekaapt, de pagina kan worden verminkt en gebruikers naar malware kunnen worden doorgestuurd.

Drie varianten van XSS

Opgeslagen: een kwaadaardig script wordt in de database opgeslagen en aan elke bezoeker geleverd. Gereflecteerd: invoer wordt teruggestuurd in het antwoord (?q=<script>...). DOM-gebaseerd: JavaScript aan clientzijde schrijft niet-vertrouwde gegevens naar de DOM.

De oorzaak: innerHTML met niet-vertrouwde gegevens

innerHTML (of v-html, dangerouslySetInnerHTML) gebruiken met tekenreeksen die door gebruikers worden beheerd, is de belangrijkste XSS-aanvalsroute.

// BAD: user input rendered as HTML
el.innerHTML = userComment;  // attacker submits <img onerror=alert(1)>

// Vue equivalent:
<div v-html="userComment"></div>  // same bug

// React equivalent:
<div dangerouslySetInnerHTML={{ __html: userComment }} />  // same bug

Uitvoercodering (de veilige standaard)

Behandel niet-vertrouwde tekenreeksen als tekst, niet als HTML. React, Vue, Angular en Svelte doen dit standaard in {value}-interpolatie.

// SAFE: text content, not HTML
el.textContent = userComment;  // <script> shows as literal text

// React (auto-escaped):
<div>{userComment}</div>

// Vue (auto-escaped):
<div>{{ userComment }}</div>

Opschonen wanneer je HTML moet weergeven

Als je echt HTML van gebruikers moet weergeven (bij teksteditors met opmaak), schoon je die op met DOMPurify — schrijf nooit zelf een opschoner op basis van reguliere expressies.

import DOMPurify from 'dompurify';

const clean = DOMPurify.sanitize(userHtml);
el.innerHTML = clean; // strips <script>, on* handlers, dangerous URLs

URL-validatie

URL's die door gebruikers worden beheerd in href of src kunnen XSS activeren via javascript:-schema's.

// BAD:
<a href={userUrl}>Click</a>
// attacker submits: javascript:alert(1)

// GOOD: whitelist protocols:
function safeUrl(url) {
  if (!/^https?:\/\//.test(url) && !url.startsWith('/')) return '#';
  return url;
}

Content Security Policy (CSP)

CSP is een HTTP-responsheader die de browser vertelt welke bronnen voor scripts, stijlen, afbeeldingen enzovoort zijn toegestaan. Zelfs als een aanvaller een script injecteert, weigert de browser het uit te voeren.

Content-Security-Policy: default-src 'self'; script-src 'self' https://cdn.trusted.com; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:

Strikte CSP met noncewaarden

Gebruik voor inline scripts die je beheert een nonce per verzoek. Door een aanvaller geïnjecteerde scripts hebben niet de overeenkomende nonce.

// Server generates a random nonce per request:
const nonce = crypto.randomBytes(16).toString('base64');
res.setHeader('Content-Security-Policy', `script-src 'nonce-${nonce}' 'strict-dynamic'`);

// Inject into the HTML:
<script nonce="abc123">/* trusted inline code */</script>

HttpOnly + Secure-cookies

Stel sessiecookies in met HttpOnly, zodat JavaScript ze niet kan lezen — zelfs als er XSS plaatsvindt, kan de aanvaller het sessietoken niet bemachtigen.

Set-Cookie: session=abc; HttpOnly; Secure; SameSite=Strict

Subresource Integrity (SRI)

Wanneer je scripts van derden via een CDN laadt, gebruik je SRI om te controleren of de inhoud overeenkomt met een hash. Een gecompromitteerde CDN kan geen kwaadaardig script aanbieden zonder dat de hashcontrole mislukt.

<script
  src="https://cdn.example.com/lib.js"
  integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"
  crossorigin="anonymous"
></script>

Trusted Types (experimenteel)

Trusted Types is een browserfunctie (op Chromium gebaseerd) die afdwingt dat gevaarlijke sinks (innerHTML) een Trusted Type-object ontvangen — daardoor kunnen tekenreeksen helemaal niet worden ingevoegd.

XSS testen

Probeer <img src=x onerror=alert(1)> in te voegen in elk tekstinvoerveld waarvan de inhoud opnieuw wordt weergegeven. Als je een melding ziet, heb je een XSS-fout. Gebruik hulpmiddelen zoals OWASP ZAP voor geautomatiseerde scans.

Snelle controle

Waarom is Reacts {userInput} standaard veilig, maar dangerouslySetInnerHTML niet?

Beantwoord dit in de interactieve les

Samenvatting: XSS-preventie

Gebruik standaard tekstweergave (React-weergave met {x} en Vue-weergave met {{ x }} zijn veilig). Gebruik DOMPurify om HTML te saneren. Gebruik een witte lijst voor URL-protocollen. Een CSP-header (met nonces of 'strict-dynamic') blokkeert geïnjecteerde scripts. HttpOnly-cookies voorkomen diefstal via JavaScript. Gebruik SRI-hashes voor CDN-scripts. Test invoer met klassieke payloads.

Gratis beginnen

Leer HTML 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: 41
Lessen: 163

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “XSS-preventie: outputencoding en CSP” gratis?

Ja — de volledige tekst van “XSS-preventie: outputencoding en CSP” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Frontend Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Frontend Academy bevat in totaal 4 lessen.

Wat leer ik in “XSS-preventie: outputencoding en CSP”?

Begrijp reflected, stored en DOM-based XSS, escape door gebruikers beheerde output, vermijd innerHTML met onbetrouwbare gegevens en voeg een Content Security Policy-header toe. Je oefent met Frontend 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 Frontend Academy te beginnen?

Ervaring vooraf is niet nodig. Frontend 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 4.

Hoe lang duurt de les “XSS-preventie: outputencoding en CSP”?

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 Frontend Academy?

Ja. Elke les over Frontend 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

← Terug naar Frontend Academy