Codifica o decodifica entità HTML _

Come funziona la codifica delle entità HTML

Un'entità HTML è un riferimento carattere che il browser interpreta restituendo un singolo carattere. I cinque caratteri HTML riservati (<, >, &, ", ') devono sempre essere codificati quando il testo viene reso come HTML; tutto il resto è facoltativo e dipende dalla codifica del documento.

1. Scegli modalità e ambito. La modalità di codifica elabora l'input carattere per carattere. La modalità di decodifica scorre l'input cercando pattern di entità. Il selettore ambito decide se codificare solo i cinque caratteri HTML riservati oppure anche ogni code point non-ASCII.
2. Scegli lo stile dell'entità. Le entità nominate (©) sono leggibili nel sorgente. I riferimenti decimali (©) ed esadecimali (©) coprono ogni code point Unicode senza bisogno di un nome. I client email più datati e i parser XML preferiscono le forme numeriche.
3. Scansione dell'input. In codifica, leggiamo ogni code point e lo cerchiamo in una tabella integrata di circa 200 entità nominate comuni. I valori non trovati ricorrono al formato numerico. In decodifica, utilizziamo una singola regex che individua &name;, &#NNN; e &#xHH; in un unico passaggio.
4. Mappatura ai caratteri. Le corrispondenze nominate si risolvono tramite una tabella inversa. Le corrispondenze numeriche passano per String.fromCodePoint in base 10 o base 16. Le entità nominate sconosciute vengono lasciate inalterate, così l'input parziale va e viene senza perdite.
5. Modalità live. Attiva la modalità live e ogni pressione di tasto riesegue la conversione con un debounce di 150 ms. Utile quando stai ritoccando uno snippet e vuoi un feedback immediato prima di incollarlo in un template.

Perché codificare le entità HTML

• Evita che l'input utente rompa il layout. Quando un utente digita un < fuori posto in una casella commenti, inserire quel testo direttamente nell'HTML riscrive il resto della pagina. Codificando prima i caratteri riservati, il browser mostra il carattere invece di interpretarlo come inizio di un tag.
• Mantiene validi i valori degli attributi. Inserire una stringa con virgolette all'interno di un attributo HTML richiede di sostituire le virgolette incorporate con " (per attributi con virgolette doppie) o ' (per quelli con virgolette singole). Altrimenti il parser chiude l'attributo in anticipo e il resto della riga diventa markup spurio.
• Neutralizza HTML accidentale nei dati archiviati. Log, report di bug ed esportazioni di chat contengono spesso parentesi angolari e ampersand reali. Codificare il dump prima di incollarlo in una pagina di documentazione mantiene quel contenuto visibile come testo invece di attivare il renderer o il rilevatore automatico di link.
• Condividi snippet di codice in sicurezza. Inserire un tag di esempio come <script>alert(1)</script> in un post di blog, un'e-mail o un messaggio Slack richiede di codificare le parentesi affinché lo snippet venga visualizzato invece di essere eseguito. La stessa tecnica vale per i body dei feed RSS e i campi `description` JSON-LD.

Applicazioni comuni

La codifica delle entità appare ovunque il testo grezzo viene composto in HTML a runtime — anche quando il framework di solito la gestisce per te, lo strumento manuale è utile nei momenti in cui non lo fa.

• Template server-side: Jinja2, ERB, Twig e Handlebars applicano l'escape automatico per impostazione predefinita, ma i blocchi raw e i marcatori `safe` lo disattivano — il codec ti permette di verificare cosa avrebbe prodotto l'escape.
• Authoring di e-mail e newsletter: molti motori di template degli ESP non applicano l'escape automatico ai campi di unione, perciò le virgolette tipografiche e i glifi del copyright nei nomi forniti dagli utenti richiedono la pre-codifica.
• Documentazione e campioni di codice: incollare un tag HTML di esempio in un post Markdown o nello snippet di un sito statico richiede di codificare le parentesi affinché il renderer le tratti come testo visibile.

Un esempio pratico

Incolla <script>alert('hi')</script> nell'input con modalità Codifica, stile Nominato, ambito Minimo. L'output sarà <script>alert('hi')</script>. Cambia lo stile in Esadecimale numerico e lo stesso input produce <script>alert('hi')</script>. Passa alla modalità Decodifica, incolla la stringa codificata e il tag originale torna intatto.

FAQ

Cosa sono le entità HTML?

Le entità HTML sono riferimenti carattere che il browser sostituisce con singoli caratteri durante il parsing della pagina. Si presentano in tre forme: nominata (come & per &), numerica decimale (&) e numerica esadecimale (&). I cinque caratteri HTML riservati (<, >, &, ", ') devono essere codificati ogni volta che il testo viene inserito in HTML. Le altre circa 2.225 entità nominate coprono simboli, accenti e lettere greche, ma sono facoltative quando la codifica del documento è UTF-8.

Quando usare entità nominate vs numeriche?

Usa le entità nominate quando vuoi che il sorgente sia leggibile (chi revisiona © in un template capisce subito). Usa le numeriche (decimale o esadecimale) quando il destinatario è più datato o rigoroso — i parser XML, i client e-mail legacy e alcuni lettori di feed riconoscono solo un sottoinsieme ristretto delle entità nominate HTML5, ma riconoscono tutte le forme numeriche. L'esadecimale tende a prevalere nei contesti orientati alla sicurezza perché corrisponde uno a uno alla notazione dei code point Unicode usata nei documenti delle specifiche.

La decodifica gestisce le entità esadecimali come &?

Sì. Il decoder usa una singola regex che individua tutte e tre le forme di entità in un unico passaggio: &name;, &#NNN; e &#xHH;. Le corrispondenze numeriche vengono risolte con String.fromCodePoint in base 10 o base 16. Gli input misti (nominati e numerici nella stessa stringa) vengono decodificati correttamente, e i nomi sconosciuti vengono lasciati come testo letterale affinché l'input parziale vada e venga senza perdite.

È sicuro per l'uso con input non attendibili?

Il codec stesso è solo nel browser e non invia l'input da nessuna parte. Se l'output è sicuro da incorporare dipende dal contesto. La codifica delle entità gestisce i contesti HTML body e valore degli attributi, che coprono il caso OWASP Rule #1. I contesti JavaScript (gestori di eventi inline, blocchi `<script>`), CSS e URL richiedono ciascuno proprie regole di codifica — la sola codifica delle entità non è sufficiente in quei casi. Per una difesa in profondità lato server, abbinala a un motore di template context-aware come DOMPurify o l'auto-escape del tuo framework.

La codifica delle entità lato browser si trova al confine tra l'input utente e l'HTML renderizzato. Eseguire la conversione localmente consente di verificare cosa avrebbe emesso il tuo framework, senza mai inviare il testo originale a uno strumento di terze parti.