Base64, encodage URL et entités HTML : ce que tout développeur doit savoir
Si vous développez des applications web depuis un moment, vous avez forcément rencontré des problèmes d'encodage. Une URL qui casse à cause d'une esperluette mal placée. Une page HTML qui affiche < au lieu d'une balise. Une API qui renvoie SGVsbG8gV29ybGQ= sans explication. Ce sont des problèmes d'encodage, et trois schémas reviennent plus souvent que tous les autres : Base64, l'encodage URL et les entités HTML.
Ce guide explique le fonctionnement de chacun, donne des exemples concrets, et vous indique des outils pour encoder et décoder en ligne instantanément, sans installation.
Qu'est-ce que Base64 ?
Base64 est un mécanisme de représentation de données binaires à l'aide de caractères ASCII imprimables uniquement. Il transforme n'importe quelle séquence d'octets en un alphabet de 64 caractères : A–Z, a–z, 0–9, + et /. La sortie est toujours du texte, ce qui la rend utilisable dans des contextes qui ne tolèrent pas les données binaires brutes — pièces jointes d'email, payloads JSON, URLs data: en CSS et tokens JWT reposent tous sur Base64.
Exemple — encoder "Bonjour Monde" :
- Entrée :
Bonjour Monde - Sortie Base64 :
Qm9uam91ciBNb25kZQ==
Les = en fin de chaîne sont du rembourrage. Base64 produit toujours une sortie dont la longueur est un multiple de 4.
Quand l'utiliser :
- Intégrer des images ou des polices directement dans le CSS ou le HTML (
data:image/png;base64,...) - Encoder des données binaires pour des API JSON qui n'acceptent que du texte
- Lire ou générer des tokens JWT (l'en-tête et le payload sont encodés en Base64url)
Base64 n'est pas du chiffrement. Quiconque voit la chaîne peut la décoder en quelques secondes. Utilisez-le pour l'encodage, pas pour masquer des informations.
Essayez l'outil Base64 encode/decode de FileCrank.
Qu'est-ce que l'encodage URL (encodage pourcent) ?
Les URLs n'admettent qu'un ensemble limité de caractères sans ambiguïté. Les espaces, esperluettes, signes égal, barres obliques et caractères non-ASCII ont une signification structurelle dans une URL — ou sont simplement invalides. L'encodage URL (formellement appelé encodage pourcent) remplace les caractères non sûrs par un signe % suivi de deux chiffres hexadécimaux correspondant à la valeur UTF-8 du caractère.
Exemple — encoder "Bonjour Monde" :
- Entrée :
Bonjour Monde - Sortie encodée :
Bonjour%20Monde
L'espace devient %20. L'esperluette & devient %26. La barre oblique / devient %2F.
Quand l'utiliser :
- Construire des query strings :
?q=bonjour%20monde&langue=fr - Transmettre des caractères spéciaux dans des données de formulaire
- Construire des requêtes API contenant des données saisies par l'utilisateur
JavaScript moderne propose encodeURIComponent(), mais lorsque vous devez inspecter ou déboguer une URL encodée, un outil en ligne est plus rapide que d'ouvrir une console.
Utilisez l'outil URL encode/decode en ligne de FileCrank.
Que sont les entités HTML ?
HTML utilise certains caractères comme éléments syntaxiques. Les chevrons < et > délimitent les balises, l'esperluette & introduit des références d'entités, et les guillemets " délimitent les valeurs d'attributs. Si votre contenu contient ces caractères de façon littérale — par exemple pour afficher du code source dans une page — vous devez les échapper pour que le navigateur ne les interprète pas comme du balisage.
Les entités HTML remplacent ces caractères par des références nommées ou numériques :
Exemple — afficher une balise HTML comme texte :
Pour afficher la chaîne littérale <h1>Bonjour Monde</h1> comme texte dans une page, on écrit :
<h1>Bonjour Monde</h1>
Quand les utiliser :
- Afficher des exemples de code dans de la documentation ou des articles
- Prévenir les failles XSS en échappant les données utilisateur avant insertion dans le HTML
- Insérer des symboles typographiques (
—,©, )
Utilisez l'outil entités HTML de FileCrank pour échapper ou désechapper du HTML en quelques secondes.
Les trois schémas côte à côte
La même chaîne traitée par chaque méthode :
Ils résolvent des problèmes différents et ne sont pas interchangeables :
- Base64 convertit des données binaires en texte. Utilisez-le pour intégrer des données binaires dans un contexte texte uniquement.
- Encodage URL gère les caractères invalides ou ambigus dans une URL. Utilisez-le pour construire des URLs ou des query strings.
- Entités HTML gèrent les caractères réservés par la syntaxe HTML. Utilisez-les pour produire du texte dans des documents HTML.
Erreurs fréquentes
Erreur 1 : Utiliser Base64 pour la sécurité. La sortie Base64 ressemble à du bruit, mais elle est trivialement réversible. Ne l'utilisez pas pour "cacher" des mots de passe ou des tokens. Utilisez un chiffrement ou un hachage approprié.
Erreur 2 : Double encodage URL.
Appeler encodeURIComponent() sur une chaîne déjà encodée produit %2520 au lieu de %20. Décodez d'abord, puis encodez.
Erreur 3 : Oublier d'échapper le HTML dans les templates. Insérer des données utilisateur directement dans du HTML sans les échapper est la première cause de failles XSS. Échappez toujours avant le rendu.
Essayez les outils
Les trois outils sont gratuits, fonctionnent entièrement dans votre navigateur et ne nécessitent aucun compte :
Mettez-les en favoris. Vous en utiliserez au moins un chaque semaine.