HTML-entiteiten coderen of decoderen _

Hoe HTML-entiteitscodering werkt

Een HTML-entiteit is een tekstreferentie die de browser terugvertaalt naar één enkel teken. De vijf gereserveerde HTML-tekens (<, >, &, ", ') moeten altijd worden gecodeerd als tekst als HTML wordt weergegeven; alle andere tekens zijn optioneel en afhankelijk van de documentcodering.

1. Kies een modus en bereik. De codeermodus doorloopt je invoer teken voor teken. De decodeermodus zoekt naar entiteitspatronen in de invoer. Het bereik bepaalt of alleen de vijf HTML-veilige tekens worden gecodeerd, of dat ook elk niet-ASCII-teken wordt herschreven.
2. Kies een entiteitsstijl. Benoemde entiteiten (©) zijn goed leesbaar in broncode. Decimale referenties (©) en hexreferenties (©) ondersteunen elk Unicode-codepunt zonder dat er een naam voor nodig is. Oudere e-mailclients en XML-parsers geven de voorkeur aan numerieke vormen.
3. Doorloop de invoer. Bij het coderen lezen we elk codepunt en zoeken we het op in een ingebouwde tabel van circa 200 veelgebruikte benoemde entiteiten. Niet-gevonden tekens vallen terug op numerieke codering. Bij het decoderen scannen we met één reguliere expressie die &name;, &#NNN; en &#xHH; in één doorloop herkent.
4. Omzetten naar tekens. Benoemde overeenkomsten worden opgelost via een omgekeerde tabel. Numerieke overeenkomsten worden verwerkt met String.fromCodePoint in grondtal 10 of 16. Onbekende benoemde entiteiten worden ongewijzigd gelaten, zodat gedeeltelijke invoer zonder verlies heen en terug kan worden geconverteerd.
5. Live-modus. Schakel live-modus in en elke toetsaanslag herhaalt de conversie met een debounce van 150 ms. Handig als je een snippet aanpast en directe feedback wilt voordat je het in een template plakt.

Waarom HTML-entiteiten coderen

• Voorkom dat gebruikersinvoer de lay-out verbreekt. Als een gebruiker een < intypt in een commentaarveldje en die tekst direct in HTML wordt opgenomen, herschrijft dat de rest van de pagina. Door de gereserveerde tekens eerst te coderen, rendert de browser het teken in plaats van het als begin van een tag te interpreteren.
• Houd attribuutwaarden geldig. Het insluiten van een aanhalingsteken in een HTML-attribuut vereist vervanging door " (voor dubbelaanhalingstekens) of ' (voor enkelvoudige). Anders sluit de parser het attribuut vroegtijdig en wordt de rest van de regel losse markup.
• Neutraliseer onbedoelde HTML in opgeslagen gegevens. Logbestanden, bugrapporten en chatexports bevatten vaak echte hoekige haken en ampersands. Door de dump te coderen voordat je hem in een documentatiepagina plakt, blijft de inhoud zichtbaar als tekst in plaats van de renderer of de linkdetector te activeren.
• Deel codefragmenten veilig. Een voorbeeldtag als <script>alert(1)</script> posten in een blogbericht, e-mail of Slack-bericht vereist gecodeerde haakjes zodat het fragment wordt weergegeven in plaats van uitgevoerd. Dezelfde techniek geldt voor RSS-feedinhoud en JSON-LD `description`-velden.

Veelvoorkomende toepassingen

Entiteitscodering komt voor overal waar ruwe tekst tijdens runtime in HTML wordt samengesteld — zelfs als het framework dit normaal voor je afhandelt, is de handmatige tool nuttig voor de gevallen dat dit niet zo is.

• Servergerenderde templates: Jinja2, ERB, Twig en Handlebars ontsnappen standaard automatisch, maar raw-blokken en `safe`-markeringen zetten dat uit — met de codec kun je controleren wat het escapen had opgeleverd.
• E-mail en nieuwsbrief: veel ESP-templateengines ontsnappen samenvoegvelden niet automatisch, dus slimme aanhalingstekens en copyrightglyfen in door gebruikers opgegeven namen moeten vooraf worden gecodeerd.
• Documentatie en codevoorbeelden: een voorbeeld-HTML-tag plakken in een Markdown-blogpost of een statisch-sitesnippet vereist gecodeerde haakjes zodat de renderer het als zichtbare tekst behandelt.

Een uitgewerkt voorbeeld

Plak <script>alert('hi')</script> in de invoer met modus Coderen, stijl Benoemd, bereik Minimaal. De uitvoer luidt <script>alert('hi')</script>. Schakel stijl naar Numeriek hex en dezelfde invoer geeft <script>alert('hi')</script>. Schakel modus naar Decoderen, plak de gecodeerde tekenreeks terug en de oorspronkelijke tag verschijnt intact.

FAQ

Wat zijn HTML-entiteiten?

HTML-entiteiten zijn tekstreferenties die de browser bij het verwerken van de pagina terugzet in afzonderlijke tekens. Ze komen in drie vormen: benoemd (zoals & voor &), decimaal numeriek (&) en hexadecimaal numeriek (&). De vijf gereserveerde HTML-tekens (<, >, &, ", ') moeten altijd worden gecodeerd wanneer tekst in HTML wordt opgenomen. De overige circa 2.225 benoemde entiteiten dekken symbolen, accentletters en Griekse letters, maar zijn optioneel zodra de documentcodering UTF-8 is.

Wanneer gebruik ik benoemde versus numerieke entiteiten?

Gebruik benoemde entiteiten als je wilt dat de broncode goed leesbaar is (een ontwikkelaar die © in een template ziet, begrijpt het meteen). Gebruik numerieke (decimaal of hex) als de ontvanger ouder of strikter is — XML-parsers, oudere e-mailclients en sommige feedreaders herkennen slechts een kleine subset van HTML5-benoemde entiteiten, maar herkennen allemaal de numerieke vormen. Hex wint het in beveiligingsgerichte contexten omdat het één-op-één overeenkomt met de Unicode-codepuntnotatie in specificatiedocumenten.

Worden hex-entiteiten zoals & ook gedecodeerd?

Ja. De decoder gebruikt één reguliere expressie die alle drie entiteitsvormen in één doorloop herkent: &name;, &#NNN; en &#xHH;. Numerieke overeenkomsten worden opgelost met String.fromCodePoint in grondtal 10 of 16. Gemengde invoer (benoemde en numerieke entiteiten in dezelfde tekenreeks) wordt correct gedecodeerd, en onbekende namen worden als letterlijke tekst gelaten zodat gedeeltelijke invoer zonder verlies heen en terug kan worden geconverteerd.

Is dit veilig te gebruiken met niet-vertrouwde invoer?

De codec zelf werkt volledig in de browser en stuurt je invoer nergens naartoe. Of de uitvoer veilig is om in te sluiten hangt af van de context. Entiteitscodering dekt HTML-body- en attribuutwaardcontexten, wat overeenkomt met de OWASP Regel #1. JavaScript-contexten (inline event handlers, `<script>`-blokken), CSS-contexten en URL-contexten vereisen elk hun eigen coderingsregels — entiteitscodering alleen is daar niet voldoende. Voor een serverside verdediging in de diepte combineer je dit met een contextbewuste template-engine zoals DOMPurify of de automatische escape van je framework.

Entiteitscodering aan de browserkant bevindt zich op de grens tussen gebruikersinvoer en weergegeven HTML. Lokaal converteren betekent dat je kunt controleren wat je framework had uitgevoerd, zonder de oorspronkelijke tekst naar een externe tool te sturen.