Codifică sau decodifică entități HTML _

Cum funcționează codificarea entităților HTML

O entitate HTML este o referință de caracter pe care browserul o parsează înapoi într-un singur caracter. Cele cinci caractere HTML rezervate (<, >, &, „, ') au nevoie întotdeauna de codificare când textul este redat ca HTML; orice altceva este opțional și depinde de codificarea documentului.

1. Alege un mod și un domeniu. Modul Codifică parcurge intrarea ta caracter cu caracter. Modul Decodifică parcurge intrarea căutând modele de entități. Comutatorul de domeniu decide dacă doar cele cinci caractere sigure HTML sunt codificate sau dacă fiecare punct de cod non-ASCII este de asemenea rescris.
2. Alege un stil de entitate. Entitățile denumite (©) se citesc bine în sursă. Referințele zecimale (©) și referințele hex (©) transportă fiecare punct de cod Unicode fără a avea nevoie de un nume. Clienții de e-mail mai vechi și parserele XML preferă formele numerice.
3. Parcurge intrarea. La codificare, citim fiecare punct de cod și îl căutăm într-un tabel încorporat de aproximativ 200 de entități denumite comune. Lipsurile revin la numerice. La decodificare, scanăm cu o singură regex care potrivește &name;, &#NNN; și &#xHH; într-un singur pas.
4. Mapează la caractere. Potrivirile denumite se rezolvă printr-un tabel invers. Potrivirile numerice trec prin String.fromCodePoint cu baza 10 sau baza 16. Entitățile denumite necunoscute sunt lăsate neatinse, astfel încât o intrare parțială face un drum dus-întors fără pierderi.
5. Mod live. Activează modul live și fiecare tastare re-rulează conversia cu un debounce de 150 ms. Util atunci când ajustezi un fragment și vrei feedback imediat înainte de a-l lipi într-un șablon.

De ce să codifici entități HTML

• Previne întreruperea layout-ului de către intrarea utilizatorului. Când un utilizator tastează un < într-o casetă de comentarii, plasarea acelui text direct în HTML rescrie restul paginii. Codificarea caracterelor rezervate mai întâi înseamnă că browserul redează caracterul în loc să-l parseze ca începutul unui tag.
• Menține atributele valide. Încorporarea unui șir citat în interiorul unui atribut HTML necesită înlocuirea ghilimelei încorporate cu " (pentru atribute cu ghilimele duble) sau ' (pentru ghilimele simple). Altfel, parserul închide atributul devreme și restul liniei devine marcaj neașteptat.
• Dezamorsează HTML-ul accidental în datele stocate. Jurnalele, rapoartele de erori și exporturile de chat conțin adesea paranteze unghiulare și ampersande reale. Codificarea prin entități a descărcării înainte de a o lipi într-o pagină de documentație menține acea copie vizibilă ca text, în loc să declanșeze redarea sau detectarea automată a linkurilor.
• Distribuie fragmente de cod în siguranță. Postarea unui tag exemplu precum <script>alert(1)</script> într-o postare de blog, un e-mail sau un mesaj Slack necesită codificarea parantezelor, astfel încât fragmentul să se afișeze în loc să se execute. Aceeași tehnică acoperă corpurile feed-urilor RSS și câmpurile `description` JSON-LD.

Aplicații comune

Codificarea entităților apare oriunde textul brut este compus în HTML la runtime — chiar și atunci când framework-ul se ocupă de obicei de asta, instrumentul manual este util pentru momentele când nu o face.

• Șabloane randate pe server: Jinja2, ERB, Twig și Handlebars auto-escape în mod implicit, dar blocurile raw și markerii `safe` dezactivează asta — codecul îți permite să confirmi ce ar fi produs escape-ul.
• Redactare e-mailuri și newslettere: multe motoare de șabloane ESP nu auto-escapează câmpurile de îmbinare, astfel încât ghilimelele smart și glifele de drepturi de autor din numele furnizate de utilizator au nevoie de pre-codificare.
• Documentație și exemple de cod: lipirea unui tag HTML exemplu într-o postare de blog Markdown sau un fragment de site static necesită codificarea parantezelor, astfel încât redarea să-l trateze ca text vizibil.

Un exemplu practic

Lipește <script>alert('hi')</script> în intrare cu modul setat la Codifică, stil Denumită, domeniu Minimal. Ieșirea citește <script>alert('hi')</script>. Schimbă stilul pe Hex numeric și aceeași intrare produce <script>alert('hi')</script>. Comută modul pe Decodifică, lipește șirul codat înapoi și tagul original revine intact.

FAQ

Ce sunt entitățile HTML?

Entitățile HTML sunt referințe de caractere pe care browserul le substituie înapoi în caractere individuale când parsează pagina. Vin în trei forme: denumite (precum & pentru &), numerice zecimale (&) și numerice hex (&). Cele cinci caractere HTML rezervate (<, >, &, ", ') au nevoie de codificare de fiecare dată când textul este plasat în HTML. Celelalte aproximativ 2.225 de entități denumite acoperă simboluri, accente și litere grecești, dar sunt opționale odată ce codificarea documentului este UTF-8.

Când ar trebui să folosesc entități denumite vs numerice?

Folosește entități denumite când vrei ca sursa să se citească clar (un om care revizuiește © într-un șablon înțelege imediat). Folosește numerice (zecimale sau hex) când consumatorul este mai vechi sau mai strict — parserele XML, clienții de e-mail moșteniți și unele cititoare de feed-uri recunosc doar un subset mic de entități denumite HTML5 și toate recunosc formele numerice. Hex-ul tinde să câștige în contexte axate pe securitate, deoarece se aliniază unu-la-unu cu notația punctului de cod Unicode folosită în documentele de specificații.

Decodificarea gestionează entități hex precum &?

Da. Decodorul folosește o singură regex care potrivește toate cele trei forme de entități într-un singur pas: &name;, &#NNN; și &#xHH;. Potrivirile numerice sunt rezolvate cu String.fromCodePoint folosind baza 10 sau baza 16. Intrările mixte (denumite și numerice în același șir) se decodifică corect, iar numele necunoscute sunt lăsate ca text literal, astfel încât o intrare parțială face un drum dus-întors fără pierderi.

Este sigur de folosit cu intrări neîncrezute?

Codecul în sine este doar în browser și nu trimite intrarea ta nicăieri. Dacă ieșirea este sigură de încorporat depinde de context. Codificarea entităților gestionează contextele corpului HTML și ale valorii atributelor, ceea ce acoperă cazul OWASP Regula #1. Contextele JavaScript (handlere de evenimente inline, blocuri <script>), contextele CSS și contextele URL au nevoie fiecare de propriile reguli de codificare — codificarea entităților singură nu este suficientă acolo. Pentru o apărare în adâncime pe partea de server, combină acest lucru cu un motor de șabloane conștient de context precum DOMPurify sau auto-escape-ul framework-ului tău.

Codificarea entităților în browser se află la granița dintre intrarea utilizatorului și HTML-ul redat. Efectuarea conversiei local înseamnă că poți verifica ce ar fi emis framework-ul tău, fără a trimite vreodată textul original către un instrument terț.