Base64
7 tools
Wat is codering?
Codering is het proces waarbij gegevens van de ene representatie naar de andere worden omgezet. In webontwikkeling wordt codering gebruikt om gegevens veilig te verzenden via kanalen die zijn ontworpen voor een beperkte tekenset — bijvoorbeeld het versturen van binaire gegevens via een tekstgebaseerd protocol, of het opnemen van speciale tekens in een URL.
Tekencodering bepaalt hoe teksttekens worden omgezet naar bytes. Base64-codering zet binaire gegevens om naar ASCII-tekst. URL-codering maakt willekeurige tekst veilig voor gebruik in URL's. Door deze drie lagen van codering te begrijpen, voorkom je subtiele bugs en beveiligingsproblemen.
Geschiedenis van tekencodering
Tekencodering is de koppeling tussen tekens (letters, symbolen) en hun binaire representaties. De evolutie van ASCII naar Unicode weerspiegelt hoe het web wereldwijd is geworden:
7-bits Amerikaanse standaardcode. 128 tekens: Engelse letters, cijfers, leestekens en besturingscodes. Definieerde de fundamentele codering waarop alle andere zijn gebaseerd.
Uitgebreide ASCII voor West-Europese talen. Voegde 128 tekens toe (letters met accenten, symbolen). Niet geschikt voor niet-Latijnse schriften.
Universele tekenset die alle schrijfsystemen ter wereld omvat. Definieert codepunten voor meer dan 149.000 tekens in 161 schriften. Definieert geen codering — dat is de taak van UTF-8/16/32.
Variabele breedte-codering van Unicode met 1-4 bytes per teken. ASCII-compatibel (de eerste 128 codepunten zijn enkelbyte). De dominante codering op het web — meer dan 98% van alle websites.
Variabele breedte-codering met 2 of 4 bytes per teken. Intern gebruikt door Windows, Java en JavaScript-strings. Niet ASCII-compatibel.
Vaste breedte-codering: altijd 4 bytes per teken. Eenvoudig maar verspilt ruimte. Gebruikt in sommige database-interne systemen. Zelden op het web te vinden.
Waarom UTF-8 Won
UTF-8 is dominant geworden omdat het achterwaarts compatibel is met ASCII (de eerste 128 tekens coderen identiek), zelfsynchroniserend is (tekengrenzen zijn te vinden door te scannen) en ruimte-efficiënt is voor Latijnse tekst. Elk ASCII-document is een geldig UTF-8-document. Dit maakte migratie naadloos.
Base64-codering
Base64 zet binaire gegevens om naar een tekstrepresentatie met behulp van slechts 64 afdrukbare ASCII-tekens: A-Z, a-z, 0-9, + en /. Dit is noodzakelijk wanneer binaire gegevens door kanalen moeten die alleen tekst verwerken — e-mailbijlagen, data-URI's, JWT-tokens en HTTP Basic Auth gebruiken allemaal Base64.
Hoe het werkt
Base64 groepeert de invoerbytes in blokken van 3 bytes (24 bits) en codeert elk blok als 4 Base64-tekens (6 bits elk). Als de invoer geen veelvoud van 3 bytes is, worden =-opvultekens toegevoegd om de laatste groep te completeren:
| Invoer | Hex bytes | Base64 |
|---|---|---|
| "Man" | 77 61 6E | TWFu |
| "Ma" | 4D 61 | TWE= |
| "M" | 4D | TQ== |
De =-opvultekens aan het einde geven aan hoeveel bytes er ontbraken om de laatste groep van 3 bytes te completeren. Één = betekent dat één byte opvulling nodig was; == betekent dat twee bytes nodig waren. Standaard Base64 produceert altijd uitvoer met een lengte die een veelvoud van 4 is.
URL-codering
URL's mogen alleen een beperkte set veilige ASCII-tekens bevatten. Elk teken buiten die set — waaronder spaties, leestekens, niet-ASCII-tekens en speciale URL-tekens zoals &, = en # — moet procentgewijs worden gecodeerd (URL-encoded) voordat het in een URL wordt geplaatst.
Procentcodering vervangt elke onveilige byte door een % gevolgd door twee hexadecimale cijfers die de waarde van die byte weergeven. Een spatie wordt %20, een ampersand wordt %26, enzovoort.
Veelgecodeerde tekens
| Teken | Gecodeerd | Opmerkingen |
|---|---|---|
| Space | %20 | Meest voorkomend; gebruikt in formulierinzendingen als + in application/x-www-form-urlencoded |
| & | %26 | Querystring-scheidingsteken; moet worden gecodeerd bij gebruik als letterlijke waarde |
| = | %3D | Sleutel-waardescheidingsteken in querystrings; codeer bij gebruik als data |
| + | %2B | Wordt geïnterpreteerd als spatie in application/x-www-form-urlencoded; codeer om letterlijke + te behouden |
| # | %23 | Fragment-identifier; codeer bij gebruik als letterlijke data in een pad of query |
| / | %2F | Padsegmentscheidingsteken; codeer bij gebruik als letterlijke data, niet als padafgrenzer |
| : | %3A | Scheme-scheidingsteken; codeer in pad- en querycontexten |
| @ | %40 | Gebruikt in mailto: en authenticatie; codeer bij gebruik als letterlijke data |
encodeURI vs encodeURIComponent
JavaScript biedt twee codeerfuncties met een verschillend bereik. encodeURI codeert een volledige URL — tekens met betekenis in URL's (:, /, ?, #, @) worden niet gecodeerd. encodeURIComponent codeert een URL-component (een enkele queryparameterwaarde of padsegment) — het codeert alle tekens behalve A-Z, a-z, 0-9, -, _, ., ~. Gebruik altijd encodeURIComponent voor afzonderlijke waarden en encodeURI voor volledige URL's.
Waar codering voorkomt in webontwikkeling
De Authorization: Basic-header codeert inloggegevens als Base64(gebruikersnaam:wachtwoord). Dit is codering voor transportgemak, GEEN beveiliging — Base64 is triviaal omkeerbaar. Gebruik altijd HTTPS met Basic Auth.
Data URI's verwerken bestandsinhoud direct in HTML of CSS: data:image/png;base64,.... Afbeeldingen en lettertypen inline Base64-coderen elimineert HTTP-verzoeken ten koste van een grotere documentgrootte (~33% overhead).
E-mail was ontworpen voor 7-bits ASCII. Binaire bijlagen (afbeeldingen, PDF's) worden door MIME Base64-gecodeerd vóór verzending. Uw e-mailclient decodeert ze transparant bij het weergeven van de e-mail.
JWT-tokens gebruiken Base64url-codering (een variant die + vervangt door - en / door _, zonder opvulling) voor alle drie de delen (header, payload, signature). Dit maakt tokens URL-veilig zonder extra procentcodering.
Alle door gebruikers aangeleverde data in URL-querystrings moet procentgecodeerd zijn. Het niet coderen van & of = in een waarde zal stilzwijgend de querystring-verwerking corrumperen. Gebruik altijd encodeURIComponent op afzonderlijke waarden.
Niet-ASCII-domeinnamen (bijv. münchen.de) worden gecodeerd met Punycode (xn--voorvoegsel) voor compatibiliteit met het DNS-systeem. De browser toont de Unicode-vorm maar stuurt de Punycode-vorm naar DNS-resolvers.
Veelgestelde vragen
Nee. Base64 is codering, geen versleuteling. Het is een omkeerbare transformatie zonder geheime sleutel. Iedereen die een Base64-string ziet, kan deze direct decoderen. Gebruik Base64 nooit als beveiligingsmaatregel.
Base64 verwerkt invoer in groepen van 3 bytes. Als de invoer geen veelvoud van 3 bytes is, wordt =-opvulling toegevoegd om de laatste groep te completeren. Één = betekent één byte opvulling; == betekent twee. Sommige implementaties laten opvulling weg (Base64url voor JWT's).
Base64url is een URL-veilige variant van Base64 die + vervangt door - en / door _, en doorgaans de =-opvulling weglaat. Dit maakt het veilig om te gebruiken in URL's en HTTP-headers zonder procentcodering. JWT's gebruiken Base64url voor alle drie de delen.
Gebruik encodeURIComponent voor afzonderlijke waarden (queryparameterwaarden, padsegmentwaarden). Gebruik encodeURI voor een volledige URL-string waarbij u de structuurtekens van de URL (/, :, ?, #) wilt behouden. Gebruik bij twijfel encodeURIComponent.
UTF-8 is ASCII-compatibel en ruimte-efficiënt voor Latijnse tekst (de meeste URL's, HTML-tags en code zijn ASCII). UTF-16 verspilt ruimte voor ASCII-inhoud en is niet achterwaarts compatibel. HTTP en HTML gebruiken standaard UTF-8.
Procentcodering (URL-codering) stelt tekens voor als % gevolgd door hun tweedelige hexadecimale bytewaarde. Een spatie is bijvoorbeeld %20 (decimaal 32, hex 20). Multibyte UTF-8-tekens coderen elke byte afzonderlijk: é is %C3%A9.
Base64 vergroot de gegevensomvang met ongeveer 33% en voegt CPU-overhead toe voor coderen en decoderen. Geef voor systemen met hoge doorvoer de voorkeur aan binaire protocollen. URL-codering voegt minimale overhead toe, maar kan URL's aanzienlijk langer maken bij veel speciale tekens.
Punycode is een codering voor het weergeven van Unicode-tekens in het ASCII-compatibele DNS-systeem. Geïnternationaliseerde domeinnamen zoals münchen.de worden gecodeerd als xn--mnchen-3ya.de in DNS-query's. Browsers tonen de Unicode-vorm maar gebruiken Punycode intern.