Base64 en JavaScript - Exemples Pratiques

// ENCODAGE ET DÉCODAGE DE BASE

JavaScript fournit des fonctions intégrées pour les opérations Base64. Les fonctions btoa() et atob() gèrent l'encodage et le décodage de base :

Ces fonctions fonctionnent parfaitement pour le texte ASCII, mais nécessitent une gestion spéciale pour les caractères Unicode.

// Encodage Base64 de base
const text = 'Bonjour le Monde';
const encoded = btoa(text);
console.log(encoded); // Qm9uam91ciBsZSBNb25kZQ==

// Décodage Base64 de base
const decoded = atob(encoded);
console.log(decoded); // Bonjour le Monde

// Vérifier si une chaîne est un Base64 valide
function isValidBase64(str) {
    try {
        return btoa(atob(str)) === str;
    } catch (err) {
        return false;
    }
}

// SUPPORT UNICODE

Pour les chaînes Unicode, nous devons d'abord les convertir en octets UTF-8. Les navigateurs modernes fournissent les APIs TextEncoder et TextDecoder :

Cette approche gère correctement les emojis, les caractères internationaux et autre contenu Unicode.

// Encodage Base64 compatible Unicode
function encodeBase64(str) {
    const encoder = new TextEncoder();
    const bytes = encoder.encode(str);
    const binary = String.fromCharCode(...bytes);
    return btoa(binary);
}

// Décodage Base64 compatible Unicode
function decodeBase64(base64) {
    const binary = atob(base64);
    const bytes = new Uint8Array(binary.length);
    for (let i = 0; i < binary.length; i++) {
        bytes[i] = binary.charCodeAt(i);
    }
    const decoder = new TextDecoder();
    return decoder.decode(bytes);
}

// Exemple avec emoji
const emoji = 'Bonjour 👋 le Monde 🌍';
const encoded = encodeBase64(emoji);
const decoded = decodeBase64(encoded);
console.log(decoded); // Bonjour 👋 le Monde 🌍

// GESTION DES FICHIERS

Convertir des fichiers en Base64 est courant pour les téléchargements et les URIs de données. Utilisez l'API FileReader pour le traitement de fichiers côté client :

Cela crée des URIs de données qui peuvent être intégrés directement dans le HTML ou envoyés aux APIs.

// Convertir un fichier en URI de données Base64
function fileToBase64(file) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = () => resolve(reader.result);
        reader.onerror = error => reject(error);
        reader.readAsDataURL(file);
    });
}

// Utilisation avec input de fichier
document.getElementById('fileInput').addEventListener('change', async (e) => {
    const file = e.target.files[0];
    if (file) {
        try {
            const base64 = await fileToBase64(file);
            console.log(base64);
            // Résultat : data:image/png;base64,iVBORw0KGgoAAAA...
        } catch (error) {
            console.error('Erreur :', error);
        }
    }
});

// BASE64 SÉCURISÉ POUR LES URLS

Le Base64 standard utilise les caractères + et / qui nécessitent un encodage d'URL. Le Base64 sécurisé pour les URLs remplace ces caractères par - et _ :

C'est essentiel pour les jetons, IDs et autres données transmises via les URLs.

// Convertir en Base64 sécurisé pour les URLs
function toUrlSafeBase64(base64) {
    return base64
        .replace(/\+/g, '-')
        .replace(/\//g, '_')
        .replace(/=/g, '');
}

// Convertir depuis le Base64 sécurisé pour les URLs
function fromUrlSafeBase64(urlSafeBase64) {
    let base64 = urlSafeBase64
        .replace(/-/g, '+')
        .replace(/_/g, '/');
    
    // Ajouter le remplissage si nécessaire
    const padding = 4 - (base64.length % 4);
    if (padding !== 4) {
        base64 += '='.repeat(padding);
    }
    
    return base64;
}

// Exemple
const text = 'Test d\'encodage sécurisé pour URLs';
const encoded = btoa(text);
const urlSafe = toUrlSafeBase64(encoded);
console.log(urlSafe); // VGVzdCBkJ2VuY29kYWdlIHPDqWN1cmlzw6kgcG91ciBVUkxz

// STREAMING DE GRANDES DONNÉES

Pour les gros fichiers ou flux de données, traitez par blocs pour éviter les problèmes de mémoire :

Cette approche évite le gel du navigateur et gère efficacement les grands jeux de données.

// Encodage Base64 basé sur le streaming
class Base64Encoder {
    constructor() {
        this.buffer = '';
    }
    
    encode(chunk) {
        this.buffer += chunk;
        const completeBytes = Math.floor(this.buffer.length / 3) * 3;
        const toEncode = this.buffer.slice(0, completeBytes);
        this.buffer = this.buffer.slice(completeBytes);
        
        return btoa(toEncode);
    }
    
    flush() {
        if (this.buffer.length > 0) {
            const result = btoa(this.buffer);
            this.buffer = '';
            return result;
        }
        return '';
    }
}

// Utilisation
const encoder = new Base64Encoder();
let result = '';
result += encoder.encode('Premier bloc');
result += encoder.encode(' Deuxième bloc');
result += encoder.flush();
console.log(result);

// GESTION D'ERREURS

Implémentez toujours une gestion d'erreurs appropriée pour les opérations Base64 :

Une gestion d'erreurs robuste prévient les crashes d'application et offre une meilleure expérience utilisateur.

// Opérations Base64 sécurisées avec gestion d'erreurs
function safeEncode(input) {
    try {
        if (typeof input !== 'string') {
            throw new Error('L\'entrée doit être une chaîne');
        }
        return btoa(input);
    } catch (error) {
        console.error('Erreur d\'encodage :', error.message);
        return null;
    }
}

function safeDecode(base64) {
    try {
        // Valider le format Base64
        if (!/^[A-Za-z0-9+/]*={0,2}$/.test(base64)) {
            throw new Error('Format Base64 invalide');
        }
        return atob(base64);
    } catch (error) {
        console.error('Erreur de décodage :', error.message);
        return null;
    }
}

// Utilisation
const encoded = safeEncode('Bonjour le Monde');
const decoded = safeDecode(encoded);
if (encoded && decoded) {
    console.log('Succès :', decoded);
}