XSS via innerHTML en hoe u dit voorkomt

Een gebruikersnaam "Bob<img src=x onerror=alert(1)>" die via div.innerHTML = `Welcome, ${user}` wordt ingesteld, voert alert(1) uit wanneer de afbeelding niet kan worden geladen. Diezelfde lading als platte tekst (via textContent) is onschadelijk — de browser ziet alleen tekens, geen tags.

textContent stelt alleen tekst in — speciale HTML-tekens verschijnen als letterlijke tekens, nooit als tags. Dit is in 90% van de gevallen het juiste hulpmiddel. Schakel alleen over naar innerHTML wanneer je daadwerkelijk opmaak moet weergeven, niet tekst.

Als je elementen met gebruikersgegevens wilt maken, bouw je ze op met createElement en textContent: const li = document.createElement("li"); li.textContent = name; ul.appendChild(li);. Het resultaat is structureel identiek aan innerHTML, maar XSS-veilig door de manier waarop het wordt opgebouwd.

Voor door de server gegenereerde, vertrouwde HTML (je eigen sjabloonuitvoer of opgeschoonde rijke tekst van een betrouwbare editor) is innerHTML prima. Pas het nooit rechtstreeks toe op gegevens uit onbetrouwbare bronnen zonder ze op te schonen.

Als gebruikers rijke tekst indienen (een reactieteksteditor of markdownweergave), moet je deze opschonen voordat je innerHTML instelt: el.innerHTML = DOMPurify.sanitize(richHtml). DOMPurify verwijdert gevaarlijke tags en attributen, maar behoudt veilige opmaak zoals <b>, <em> en <a>.

el.insertAdjacentHTML("beforeend", html) parseert HTML-tekenreeksen — hetzelfde XSS-oppervlak als innerHTML. Dezelfde regels gelden: voer gebruikersgegevens nooit rechtstreeks in; schoon ze op of gebruik DOM-methoden. Hetzelfde geldt voor document.write, al zou niemand dat tegenwoordig nog moeten gebruiken.

React, Vue, Svelte en Angular escapen geïnterpoleerde tekst standaard — {name} is veilig. Ze bieden uitzonderingsmechanismen (dangerouslySetInnerHTML in React en v-html in Vue) die hetzelfde XSS-risico met zich meebrengen; gebruik ze spaarzaam en met opschoning.

Zelfs attribuutwaarden kunnen een aanvalsvector zijn: <a href={url}> met url="javascript:alert(1)" voert code uit wanneer erop wordt geklikt. Valideer URL-schema's een voor een (sta alleen http:, https:, mailto: en tel: toe) voordat je gebruikersinvoer in href, src of andere attributen met een URL plaatst.

Moderne browsers ondersteunen Trusted Types: configureer CSP met require-trusted-types-for 'script', waarna innerHTML onbewerkte tekenreeksen weigert — alleen door een beleid verpakte waarden worden geaccepteerd. Zo wordt XSS onmogelijk door de API in plaats van door discipline.

Geen enkele laag is voldoende. Combineer: invoervalidatie op de server, escaping van uitvoer bij het renderen, CSP om geïnjecteerde scripts te blokkeren, Trusted Types om onbewerkte tekenreeksen te weigeren, en een beveiligingsreview voor elk gebruik van innerHTML. Gelaagde beveiliging blijft werken als er in één laag een fout zit.

innerHTML op gebruikersinvoer is de klassieke XSS-vector. Gebruik textContent voor tekst, createElement+textContent voor structuur en DOMPurify wanneer rijke HTML nodig is. Valideer URL-schema's voor attribuutwaarden. Combineer CSP en Trusted Types om fouten die door de code-review glippen onschadelijk te maken. Moderne frameworks escapen standaard — houd hun onveilige ontsnappingsmogelijkheden zeldzaam en laat ze reviewen.