Passer au contenu principal

Qu'est-ce que l'encodage ? 🔐

En développement web, vous entendez souvent des termes comme "encodage", "Base64", "encodage URL". Qu'est-ce que l'encodage exactement ? Expliquons-le de manière très simple !

Comparer l'encodage à la vie quotidienne ?​

Comparons l'encodage à une traduction.

L'histoire de la traduction 🌏​

Convertissons "Bonjour" en français sous différentes formes :

  • En anglais: "Hello" (encodage anglais)
  • En nombres: "72 101 108 108 111" (encodage numérique)
  • En émojis: "👋😊" (encodage émoji)

Encodage = Convertir des données dans un autre format

Définition de l'encodage​

Encodage (Encoding)

  • Processus de conversion des données dans un format spécifique
  • Objectif : pour la transmission, le stockage, l'affichage, etc.

Décodage (Decoding)

  • Processus de restauration des données encodées à leur état d'origine
Données d'origine → [Encodage] → Données converties → [Décodage] → Données d'origine
    "Bonjour"         →        "Bonjour"              →      "Bonjour"

Pourquoi l'encodage est-il nécessaire ?​

1. Transmission sécurisée 📤​

Les caractères spéciaux ou les caractères accentués peuvent être corrompus sur Internet.

Original: "Bonjour"
Encodage URL: "Bonjour"
→ Transmission sécurisée sur Internet !

2. Convertir les données binaires en texte 🖼️​

Vous pouvez convertir des images ou des fichiers en texte pour les transmettre.

Fichier image → Encodage Base64 → Chaîne de texte
→ Peut être inclus dans JSON ou HTML !

3. Traitement des caractères spéciaux ✨​

Certains caractères ne peuvent pas être utilisés dans les URL.

Espace: " " → "%20"
&: "&" → "%26"
#: "#" → "%23"

Principaux types d'encodage​

1. Encodage Base64 📦​

Utilisé pour convertir des images ou des fichiers en texte !

Texte original:

Hello World

Encodé en Base64:

SGVsbG8gV29ybGQ=

Caractéristiques:

  • Convertit les données binaires en texte
  • Utilisé dans les e-mails, JSON, HTML
  • Augmente la taille des données d'environ 33%
  • Ce n'est pas du chiffrement ! (Tout le monde peut le décoder)

Exemple d'utilisation:

<!-- Inclure une image directement dans HTML -->
<img src="data:image/png;base64,iVBORw0KGgoAAAA..." />

2. Encodage URL (Encodage par pourcentage) 🔗​

Pour inclure en toute sécurité des caractères spéciaux ou accentués dans les URL !

URL originale:

https://example.com/search?q=Bonjour

Encodage URL:

https://example.com/search?q=Bonjour

Caractères nécessitant un encodage:

Espace:            " " → "%20" ou "+"
Caractères accentués: "é" → "%C3%A9"
Caractères spéciaux:  "?" → "%3F"
                      "&" → "%26"
                      "=" → "%3D"
                      "#" → "%23"

Caractères sûrs (pas besoin d'encodage):

A-Z, a-z, 0-9, -, _, ., ~

3. Encodage d'entités HTML 📝​

Pour afficher des caractères spéciaux en HTML !

HTML original:

<div>Hello & Goodbye</div>

Entité HTML:

&lt;div&gt;Hello &amp; Goodbye&lt;/div&gt;

Entités principales:

<  →  &lt;
>  →  &gt;
&  →  &amp;
"  →  &quot;
'  →  &apos;
espace → &nbsp;

4. Encodage UTF-8 🌏​

Un encodage capable de représenter toutes les langues du monde !

Caractéristiques:

  • Peut représenter tous les caractères : français, chinois, émojis, etc.
  • Encodage standard du web
  • Anglais : 1 octet, français : 1-2 octets, chinois : 3 octets

Exemples:

Anglais "A": 1 octet
Français "é": 2 octets
Émoji "😊": 4 octets

Exemples pratiques​

Exemple 1: URL de recherche 🔍​

L'utilisateur recherche:

"apprendre JavaScript"

URL envoyée par le navigateur:

https://google.com/search?q=apprendre+JavaScript

Exemple 2: Convertir une image en Base64 📸​

Image originale:

logo.png (10KB)

Encodage Base64:

iVBORw0KGgoAAAANSUhEUgAAAAUA... (13KB de texte)

Utilisation en HTML:

<img src="data:image/png;base64,iVBORw0KGgo..." />

Exemple 3: Pièces jointes dans les e-mails 📧​

Les e-mails ne peuvent envoyer que du texte. Les fichiers sont encodés en Base64 avant l'envoi !

Fichier → Encodage Base64 → Inclus dans le corps de l'e-mail → Décodé par le destinataire

Utiliser les outils d'encodage​

Essayez l'encodage/décodage directement avec les outils de notre site !

Encodage/Décodage Base64​

Base64 Encoder

  • Convertir du texte en Base64
  • Convertir du Base64 en texte
  • Convertir des images en Base64

Encodage/Décodage URL​

URL Encoder

  • Convertir en chaîne sécurisée pour URL
  • Vérifier l'original avec le décodage URL

Conversion d'entités HTML​

HTML Entity Converter

  • Convertir des caractères spéciaux en entités HTML
  • Convertir des entités HTML en caractères spéciaux

Pratique : Essayez vous-même​

Pratique 1: Encodage Base64​

  1. Ouvrir Base64 Encoder
  2. Entrer "Hello World"
  3. Cliquer sur le bouton Encode
  4. Résultat: SGVsbG8gV29ybGQ=
  5. Vérifier à nouveau "Hello World" avec Decode !

Pratique 2: Encodage URL​

  1. Ouvrir URL Encoder
  2. Entrer "Bonjour"
  3. Vérifier le résultat de l'encodage
  4. Vérifier l'original avec le décodage !

Encodage vs Chiffrement​

Encodage 🔄​

  • Objectif: Conversion du format de données
  • Sécurité: Aucune (tout le monde peut décoder)
  • Exemples: Base64, encodage URL
"Hello" → Base64 → "SGVsbG8="
Tout le monde peut décoder ! 🔓

Chiffrement 🔐​

  • Objectif: Protection des données
  • Sécurité: Oui (nécessite une clé secrète)
  • Exemples: AES, RSA
"Hello" → Chiffrement → "x8f2k9a..."
Impossible à déchiffrer sans la clé secrète ! 🔒
Avertissement

Important: Base64 n'est pas du chiffrement ! Tout le monde peut facilement le décoder, donc ne protégez pas les mots de passe ou les informations importantes uniquement avec Base64.

Cas d'utilisation courants​

1. Développement web 🌐​

// Encodage URL
const query = encodeURIComponent('Bonjour');
// "Bonjour"

// Encodage Base64
const encoded = btoa('Hello World');
// "SGVsbG8gV29ybGQ="

2. Communication API 📡​

{
  "image": "data:image/png;base64,iVBORw0KGgo...",
  "query": "Bonjour"
}

3. Stockage de données 💾​

Fichier image → Base64 → Stocké comme texte dans la base de données

Erreurs courantes et solutions​

❌ Erreur 1: Utiliser directement des caractères accentués dans les URL​

// Mauvaise méthode
fetch('https://api.com/search?q=Bonjour')  // ❌ Peut causer des erreurs

✅ Bonne méthode:​

const query = encodeURIComponent('Bonjour');
fetch(`https://api.com/search?q=${query}`)  // ✅ Correct

❌ Erreur 2: Confondre Base64 avec le chiffrement​

// Base64 n'est pas du chiffrement !
const password = btoa('mypassword123');  // ❌ Vulnérable
// Tout le monde peut décoder avec atob(password) !

✅ Bonne méthode:​

// Utiliser le hachage pour les mots de passe
import bcrypt from 'bcrypt';
const hashed = await bcrypt.hash('mypassword123', 10);  // ✅

❌ Erreur 3: Encodage en double​

const text = 'Bonjour';
const encoded1 = encodeURIComponent(text);
const encoded2 = encodeURIComponent(encoded1);  // ❌ En double !

Foire aux questions (FAQ)​

Q1: Pourquoi Base64 se termine-t-il par "=" ?​

R: C'est du remplissage (padding) ! Utilisé pour aligner la longueur des données sur un multiple de 4.

"A" → "QQ=="  (2 caractères de remplissage)
"AB" → "QUI=" (1 caractère de remplissage)
"ABC" → "QUJD" (pas de remplissage)

Q2: Pourquoi les espaces en encodage URL sont "+" ou "%20" ?​

R: Il existe deux méthodes !

  • Form URL Encoded: espace → +
  • Percent Encoding: espace → %20 Les deux sont normaux, mais %20 est plus standard.

Q3: Qu'est-ce que UTF-8 ?​

R: C'est un encodage qui peut représenter toutes les langues du monde. C'est le standard du web !

Q4: L'encodage augmente-t-il la taille des données ?​

R: Oui !

  • Base64: augmente d'environ 33%
  • Encodage URL: les caractères accentués augmentent d'environ 300%
  • Anglais: presque pas de changement

Quel encodage utiliser et quand ?​

SituationEncodageOutil
Inclure une image dans HTML/JSONBase64Base64 Encoder
Caractères spéciaux/accentués dans URLEncodage URLURL Encoder
Afficher <, >, & en HTMLHTML EntityHTML Entity Converter
Représentation de caractères internationauxUTF-8Standard web (automatique)

Prochaines étapes 🚀​

Si vous avez compris l'encodage :

  1. ✅ Base64 Encoder - Pratiquer l'encodage Base64
  2. ✅ URL Encoder - Pratiquer l'encodage URL
  3. ✅ HTML Entity Converter - Conversion d'entités HTML
  4. ✅ En savoir plus sur la structure des URL - Comment les URL sont composées
  5. ✅ Image to Base64 - Conversion d'images en Base64

Conclusion​

L'encodage n'est pas difficile ! C'est simplement convertir des données dans un autre format.

Points à retenir:

  • Base64: Binaire → Texte (pas du chiffrement !)
  • Encodage URL: Caractères spéciaux/accentués → Caractères sûrs pour URL
  • HTML Entity: Caractères spéciaux HTML → Codes d'entité
  • UTF-8: Représentation de tous les caractères du monde

Vous vous habituerez rapidement en expérimentant directement avec les outils ! 🎉