XSS in React: dangerouslySetInnerHTML e script di terze parti

React esegue automaticamente l'escape di tutti i valori renderizzati tramite JSX prima di inserirli nel DOM. Quando si scrive {userInput} in JSX, React esegue l'equivalente dell'assegnazione a textContent: il valore viene trattato come testo, mai come HTML. Per impostazione predefinita, questo previene la maggior parte degli attacchi XSS nelle applicazioni React.

dangerouslySetInnerHTML={{ __html: htmlString }} è il meccanismo di React che consente di aggirare l'escape automatico. Il nome è volutamente allarmante: indica che la responsabilità della sicurezza della stringa HTML ricade su chi la utilizza. React imposta direttamente innerHTML, eseguendo qualsiasi elemento HTML, inclusi script e gestori di eventi.

dangerouslySetInnerHTML è realmente necessario quando si esegue il rendering di HTML proveniente da un editor di testo avanzato (come TipTap o Quill), da un CMS che memorizza HTML oppure da un convertitore da Markdown a HTML. Queste fonti producono un markup HTML reale che deve essere renderizzato come HTML, non come testo sottoposto a escape.

Se la stringa HTML contiene <script>stealCookies()</script> oppure <img src=x onerror="stealData()">, impostarla come innerHTML esegue il codice dell'attaccante. Qualsiasi contenuto fornito dall'utente passato direttamente a dangerouslySetInnerHTML senza sanificazione costituisce una vulnerabilità XSS critica.

DOMPurify è il sanificatore HTML standard del settore per i browser. Analizza la stringa HTML in un contesto isolato, rimuove elementi e attributi pericolosi (tag script, gestori di eventi, URL javascript:) e restituisce una stringa HTML sicura. Utilizzo: DOMPurify.sanitize(dirtyHtml) prima di passare il risultato a dangerouslySetInnerHTML.

Gli script di terze parti (strumenti di analisi, widget di chat, reti pubblicitarie) vengono eseguiti con gli stessi permessi del JavaScript dell'applicazione. Uno script di terze parti compromesso o dannoso può leggere document.cookie, accedere a localStorage, leggere i dati inseriti nei moduli e inviare richieste a server esterni, senza che l'utente ne abbia alcuna indicazione.

La Content Security Policy è un'intestazione HTTP che dichiara quali script possono essere eseguiti. Anche se nel DOM viene iniettato un payload XSS, una CSP configurata correttamente può bloccarne l'esecuzione limitando gli script inline e consentendo solo le origini degli script inserite in una lista di autorizzazione. La CSP è la seconda linea di difesa dopo la sanificazione degli input.

I pacchetti npm costituiscono un vettore reale per gli attacchi XSS. Una dipendenza può includere codice dannoso che esfiltra variabili d'ambiente o dati degli utenti. L'incidente node-ipc del 2022 e la compromissione di ua-parser-js del 2021 hanno dimostrato che pacchetti ampiamente utilizzati possono essere presi in controllo e contaminati. Verificare le dipendenze con npm audit e usare i lockfile.

Un attacco XSS riuscito consente a un attaccante di sottrarre il token JWT dell'utente da sessionStorage (inviandolo a un server controllato dall'attaccante), eseguire azioni come l'utente autenticato (chiamate API usando la sessione dell'utente), modificare il DOM per visualizzare contenuti di phishing oppure registrare ogni tasto premuto dall'utente nell'applicazione.

L'API del browser Trusted Types richiede che tutti i sink del DOM (innerHTML, eval, script.src) ricevano oggetti tipizzati speciali anziché stringhe non elaborate. In questo modo impedisce ai payload XSS basati su stringhe di raggiungere il DOM a livello della piattaforma. React sta lavorando alla compatibilità con Trusted Types e la CSP può imporne l'uso.

Il pattern sicuro per il rendering dell'HTML proveniente da un CMS è il seguente: recuperare l'HTML, passarlo a DOMPurify.sanitize() con una lista di autorizzazione di tag e attributi sicuri, quindi eseguire il rendering con dangerouslySetInnerHTML={{ __html: cleanHtml }}. Non saltare mai il passaggio di sanificazione, nemmeno quando il CMS è considerato affidabile, perché il database del CMS stesso potrebbe essere compromesso.

Cosa fa DOMPurify quando si chiama DOMPurify.sanitize(htmlString)?

React esegue automaticamente l'escape dei valori JSX, prevenendo la maggior parte degli attacchi XSS. dangerouslySetInnerHTML aggira questa protezione per consentire il rendering legittimo di HTML: è sempre necessario sanificare prima l'input con DOMPurify. Gli script di terze parti e i pacchetti npm compromessi sono vettori XSS della catena di distribuzione. La Content Security Policy fornisce un secondo livello di difesa. Un attacco XSS riuscito consente di sottrarre token, impersonare utenti e mostrare contenuti di phishing.