XSS in React: dangerouslySetInnerHTML en scripts van derden

React zet alle waarden die via JSX worden weergegeven automatisch om naar veilige tekst voordat ze in de DOM worden geplaatst. Wanneer je {userInput} in JSX schrijft, voert React het equivalent uit van een toewijzing aan textContent: de waarde wordt als tekst behandeld en nooit als HTML. Hierdoor voorkomt React standaard het merendeel van de XSS-aanvallen in React-toepassingen.

dangerouslySetInnerHTML={{ __html: htmlString }} is het omzeilingsmechanisme van React waarmee de automatische ontsnapping wordt overgeslagen. De naam is bewust alarmerend: hij maakt duidelijk dat je zelf verantwoordelijk bent voor de veiligheid van de HTML-tekenreeks. React stelt innerHTML rechtstreeks in, waardoor alle HTML wordt uitgevoerd, inclusief scripts en gebeurtenisafhandelaars.

Je hebt dangerouslySetInnerHTML echt nodig wanneer je HTML weergeeft die afkomstig is van een editor voor opgemaakte tekst, zoals TipTap of Quill, van een CMS dat HTML opslaat of van een omzetter van Markdown naar HTML. Deze bronnen leveren echte HTML-markeringen die als HTML moeten worden weergegeven en niet als ontsnapte tekst.

Als de HTML-tekenreeks <script>stealCookies()</script> of <img src=x onerror="stealData()"> bevat, voert het instellen ervan als innerHTML de code van de aanvaller uit. Alle inhoud van gebruikers die zonder opschoning rechtstreeks aan dangerouslySetInnerHTML wordt doorgegeven, vormt een kritieke XSS-kwetsbaarheid.

DOMPurify is de industriestandaard voor het opschonen van HTML in browsers. Het analyseert de HTML-tekenreeks in een afgeschermde context, verwijdert gevaarlijke elementen en attributen (scripttags, gebeurtenisafhandelaars en javascript:-URL's) en retourneert een veilige HTML-tekenreeks. Gebruik DOMPurify.sanitize(dirtyHtml) voordat je de waarde aan dangerouslySetInnerHTML doorgeeft.

Scripts van derden, zoals analysescripts, chatwidgets en advertentienetwerken, draaien met dezelfde rechten als de JavaScript van je toepassing. Een gecompromitteerd of kwaadaardig script van derden kan document.cookie lezen, toegang krijgen tot localStorage, formulierinvoer lezen en verzoeken naar externe servers sturen — allemaal zonder dat de gebruiker daar iets van merkt.

Content Security Policy is een HTTP-header die vastlegt welke scripts mogen worden uitgevoerd. Zelfs als XSS-aanvalscode in de DOM wordt geïnjecteerd, kan een goed geconfigureerde CSP de uitvoering ervan blokkeren door scripts in de pagina te beperken en alleen toegestane scriptbronnen toe te staan. CSP is de tweede verdedigingslaag na het opschonen van invoer.

npm-pakketten vormen een reële XSS-aanvalsvector. Een afhankelijkheid kan kwaadaardige code bevatten die omgevingsvariabelen of gebruikersgegevens buitmaakt. Het node-ipc-incident uit 2022 en het gecompromitteerde ua-parser-js-pakket uit 2021 lieten zien dat veelgebruikte pakketten kunnen worden overgenomen en besmet. Controleer afhankelijkheden met npm audit en gebruik vergrendelingsbestanden.

Een geslaagde XSS-aanval stelt een aanvaller in staat het JWT-token van de gebruiker uit diens sessionStorage te stelen en naar een server te sturen die door de aanvaller wordt beheerd, handelingen uit te voeren als de geauthenticeerde gebruiker (API-aanroepen met de sessie van de gebruiker), de DOM aan te passen om phishinginhoud weer te geven of elke toetsaanslag van de gebruiker in de toepassing te registreren.

De Trusted Types-browser-API vereist dat alle DOM-invoegpunten (innerHTML, eval, script.src) speciale objecten met een type ontvangen in plaats van onbewerkte tekenreeksen. Hierdoor wordt voorkomen dat XSS-aanvalscode op platformniveau de DOM bereikt. React werkt aan ondersteuning voor Trusted Types en CSP kan dit afdwingen.

Het veilige patroon voor het weergeven van CMS-HTML is als volgt: haal de HTML op, stuur die door DOMPurify.sanitize() met een toestaanlijst van veilige elementen en attributen en geef de uitkomst vervolgens weer met dangerouslySetInnerHTML={{ __html: cleanHtml }}. Sla de opschoningsstap nooit over, zelfs niet als je het CMS vertrouwt, want ook de CMS-database zelf kan worden gecompromitteerd.

React zet JSX-waarden automatisch om naar veilige tekst, waardoor de meeste XSS-aanvallen worden voorkomen. dangerouslySetInnerHTML omzeilt dit voor legitieme HTML-weergave — ontsmet de invoer altijd eerst met DOMPurify. Scripts van derden en gecompromitteerde npm-pakketten vormen XSS-aanvallen via de toeleveringsketen. Content Security Policy biedt een tweede verdedigingslaag. Een geslaagde XSS-aanval maakt het mogelijk tokens te stelen, zich voor iemand anders uit te geven en phishing uit te voeren.