Si vous essayez d'encoder une chaîne en Base64 en JavaScript à l'aide de la fonction native du navigateur, vous avez probablement rencontré cette erreur précise dans la console :
Uncaught DOMException: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.
C'est l'une des erreurs les plus frustrantes en développement web. Elle se produit dès qu'un utilisateur tape un emoji (🚀), une lettre accentuée (é) ou tout autre caractère non-anglais.
Dans ce guide, nous allons expliquer pourquoi cela se produit et fournir la solution copier-coller pour la corriger définitivement.
La cause principale : Pourquoi btoa() échoue avec les Emojis
Les fonctions natives btoa() et atob() en JavaScript sont incroyablement rapides, mais elles ont un défaut majeur : elles ne supportent que les caractères ASCII (Latin1).
Lorsque vous passez une chaîne classique, cela fonctionne. Mais les chaînes modernes en JavaScript sont encodées en UTF-16. Lorsque vous passez un caractère nécessitant plusieurs octets, btoa() panique car il ne sait pas le convertir.
La Solution : Encoder de l''Unicode en Base64
Pour corriger cela, nous devons combiner encodeURIComponent avec un simple remplacement Regex.
La fonction d'encodage sécurisée
Copiez-collez cette fonction dans votre code. Elle convertit en toute sécurité n'importe quelle chaîne UTF-8 en Base64 :
function unicodeBase64Encode(text) {
return btoa(
encodeURIComponent(text).replace(/%([0-9A-F]{2})/g,
function toSolidBytes(match, p1) {
return String.fromCharCode('0x' + p1);
}
)
);
}
La fonction de décodage sécurisée
L'utilisation standard de atob() sur la chaîne résultante donnera du texte incompréhensible. Utilisez plutôt cette fonction inverse :
function unicodeBase64Decode(base64) {
return decodeURIComponent(
atob(base64).split('').map(function(c) {
return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
}).join('')
);
}
La solution la plus rapide : L'outil Base64 DevFormat
Si vous essayez juste d'encoder ou de décoder rapidement une clé API ou des données de test contenant des caractères spéciaux, utiliser des décodeurs en ligne aléatoires met vos données sensibles en danger s'ils les envoient à un serveur.
Nous avons conçu l'Encodeur & Décodeur Base64 DevFormat spécifiquement pour résoudre ce problème.
- 100% compatible Unicode & Emojis : Notre moteur utilise la logique de parsing sécurisée montrée ci-dessus.
- Confidentialité totale : Il s'exécute entièrement côté client dans votre navigateur.