Sanitizzazione HTML in Javascript con DOMPurify

DOMPurify è una libreria Javascript di sanitizzazione HTML che protegge le applicazioni web dagli attacchi XSS (Cross-Site Scripting).

In pratica prende del codice HTML potenzialmente pericoloso (ad esempio inserito da un utente) e restituisce solo la parte sicura, rimuovendo tutto ciò che potrebbe eseguire codice Javascript malevolo.

Può essere usato sia nel browser, che lato server; noi vediamo qualche esempio di utilizzo in Node.js.

Prima di tutto installiamo queste librerie con npm:

npm install dompurify jsdom

Qui sotto un pò di codice:

const createDOMPurify = require('dompurify');
const {JSDOM} = require('jsdom');

const window = new JSDOM('').window;
const DOMPurify = createDOMPurify(window);

console.log('=== ESEMPIO 1: HTML Sicuro ===');
const safeHTML = '<b>Testo in grassetto</b> e <em>corsivo</em>';
console.log('Input:', safeHTML);
console.log('Output:', DOMPurify.sanitize(safeHTML));
console.log('');

console.log('=== ESEMPIO 2: Tentativo di XSS con script ===');
const maliciousScript = '<b>Ciao</b><script>alert("XSS Attack!")</script>';
console.log('Input:', maliciousScript);
console.log('Output:', DOMPurify.sanitize(maliciousScript));
console.log('Nota: lo script è stato rimosso!');
console.log('');

console.log('=== ESEMPIO 3: Evento onclick pericoloso ===');
const maliciousOnclick = '<button onclick="alert(\'Hai cliccato!\')">Clicca qui</button>';
console.log('Input:', maliciousOnclick);
console.log('Output:', DOMPurify.sanitize(maliciousOnclick));
console.log('Nota: l\'evento onclick è stato rimosso!');
console.log('');

console.log('=== ESEMPIO 4: Link con javascript: ===');
const maliciousLink = '<a href="javascript:alert(\'XSS\')">Link pericoloso</a>';
console.log('Input:', maliciousLink);
console.log('Output:', DOMPurify.sanitize(maliciousLink));
console.log('');

console.log('=== ESEMPIO 5: Iframe non autorizzato ===');
const iframe = '<iframe src="https://malicious-site.com"></iframe><p>Testo normale</p>';
console.log('Input:', iframe);
console.log('Output:', DOMPurify.sanitize(iframe));
console.log('');

console.log('=== ESEMPIO 6: Input da form utente (scenario reale) ===');
// Simula l'input di un utente che cerca di inserire codice malevolo
const userInput = `
  <h2>Il mio profilo</h2>
  <p>Ciao, sono Mario!</p>
  <img src=x onerror="alert('XSS')">
  <style>body { display: none; }</style>
`;
console.log('Input utente:', userInput);
console.log('Output sanitizzato:', DOMPurify.sanitize(userInput));
console.log('');

console.log('=== ESEMPIO 7: Configurazione personalizzata ===');
// Permetti solo tag specifici
const restrictedHTML = '<b>Grassetto</b> <script>alert("no")</script> <div>Div</div>';
const cleanRestricted = DOMPurify.sanitize(restrictedHTML, {
  ALLOWED_TAGS: ['b', 'em', 'i', 'strong']
});
console.log('Input:', restrictedHTML);
console.log('Output (solo b, em, i, strong):', cleanRestricted);
console.log('');

console.log('=== ESEMPIO 8: Rimuovi tutti i tag (solo testo) ===');
const htmlWithTags = '<h1>Titolo</h1><p>Paragrafo con <b>grassetto</b></p>';
const textOnly = DOMPurify.sanitize(htmlWithTags, {
  ALLOWED_TAGS: []
});
console.log('Input:', htmlWithTags);
console.log('Output (solo testo):', textOnly);

Enjoy!