Base64 encodage et décodage en Javascript côté client

y a-t-il des méthodes en JavaScript qui pourraient être utilisées pour encoder et décoder une chaîne en utilisant l'encodage base64?

204
demandé sur Mo. 2010-05-12 19:25:00

12 réponses

certains navigateurs tels que Firefox, Chrome, Safari, Opera et IE10+ peuvent gérer Base64 nativement. Jetez un oeil à cette Stackoverflow question . Il utilise btoa() et atob() fonctions .

pour JavaScript côté serveur, il y a un paquet btoa pour Noeud.JS .

si vous optez pour une solution de navigation croisée, il existe des bibliothèques existantes comme CryptoJS ou un code comme:

http://ntt.cc/2008/01/19/base64-encoder-decoder-with-javascript.html

avec ce dernier, vous devez tester complètement la fonction pour la compatibilité entre navigateurs. Et l'erreur a déjà été signalée .

165
répondu Ranhiru Cooray 2017-05-23 11:47:17

dans les navigateurs Gecko / WebKit (Firefox, Chrome et Safari) et Opera, vous pouvez utiliser btoa () et atob () .

réponse originale: comment encoder une chaîne de caractères en JavaScript pour la Base64?

63
répondu nyuszika7h 2017-05-23 12:10:33

Internet Explorer 10+

// Define the string
var string = 'Hello World!';

// Encode the String
var encodedString = btoa(string);
console.log(encodedString); // Outputs: "SGVsbG8gV29ybGQh"

// Decode the String
var decodedString = atob(encodedString);
console.log(decodedString); // Outputs: "Hello World!"

Cross-Browser

Re-écrite et modulaire UTF-8 et en Base64 Javascript d'Encodage et de Décodage des Bibliothèques / Modules pour AMD, CommonJS, Nodejs et les Navigateurs. Croix-navigateur compatible.


avec noeud.js

Voici comment vous encodez un texte normal pour base64 dans un noeud.js:

//Buffer() requires a number, array or string as the first parameter, and an optional encoding type as the second parameter. 
// Default is utf8, possible encoding types are ascii, utf8, ucs2, base64, binary, and hex
var b = new Buffer('JavaScript');
// If we don't use toString(), JavaScript assumes we want to convert the object to utf8.
// We can make it convert to other formats by passing the encoding type to toString().
var s = b.toString('base64');

et voici comment vous décodez les chaînes encodées base64:

var b = new Buffer('SmF2YVNjcmlwdA==', 'base64')
var s = b.toString();

avec Dojo.js

pour encoder un tableau d'octets en utilisant dojox.encodage.base64:

var str = dojox.encoding.base64.encode(myByteArray);

Pour décoder une chaîne base64:

var bytes = dojox.encoding.base64.decode(str)

bower install angular-base64

<script src="bower_components/angular-base64/angular-base64.js"></script>

angular
    .module('myApp', ['base64'])
    .controller('myController', [

    '$base64', '$scope', 
    function($base64, $scope) {

        $scope.encoded = $base64.encode('a string');
        $scope.decoded = $base64.decode('YSBzdHJpbmc=');
}]);

Mais Comment?

si vous souhaitez en savoir plus sur la façon dont base64 est encodé en général, et en JavaScript en particulier, je vous recommande cet article: informatique en JavaScript: Base64 encodage

40
répondu davidcondrey 2016-10-26 05:16:53

Voici une version plus serrée du post de Sniper. Il suppose une corde de base64 bien formée sans retour de chariot. Cette version élimine un couple de boucles, ajoute le &0xff fixer de Yaroslav, élimine les nuls traînants, plus un peu de golf de code.

decodeBase64 = function(s) {
    var e={},i,b=0,c,x,l=0,a,r='',w=String.fromCharCode,L=s.length;
    var A="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
    for(i=0;i<64;i++){e[A.charAt(i)]=i;}
    for(x=0;x<L;x++){
        c=e[s.charAt(x)];b=(b<<6)+c;l+=6;
        while(l>=8){((a=(b>>>(l-=8))&0xff)||(x<(L-2)))&&(r+=w(a));}
    }
    return r;
};
36
répondu broc.seib 2013-02-24 03:25:40

Court et rapide Base64 JavaScript Décoder la Fonction sans Failsafe:

function decode_base64 (s)
{
    var e = {}, i, k, v = [], r = '', w = String.fromCharCode;
    var n = [[65, 91], [97, 123], [48, 58], [43, 44], [47, 48]];

    for (z in n)
    {
        for (i = n[z][0]; i < n[z][1]; i++)
        {
            v.push(w(i));
        }
    }
    for (i = 0; i < 64; i++)
    {
        e[v[i]] = i;
    }

    for (i = 0; i < s.length; i+=72)
    {
        var b = 0, c, x, l = 0, o = s.substring(i, i+72);
        for (x = 0; x < o.length; x++)
        {
            c = e[o.charAt(x)];
            b = (b << 6) + c;
            l += 6;
            while (l >= 8)
            {
                r += w((b >>> (l -= 8)) % 256);
            }
         }
    }
    return r;
}
30
répondu Sniper 2014-09-14 17:19:01

Le de php.le projet js a des implémentations JavaScript de nombreuses fonctions de PHP. base64_encode et base64_decode sont inclus.

11
répondu ceejayoz 2010-05-13 00:57:12

Voici la meilleure façon de base64_encode et base64_decode en utilisant javascript. Voir liens ci-dessous.

http://phpjs.org/functions/base64_encode:358

http://phpjs.org/functions/base64_decode:357

10
répondu gautamlakum 2011-03-28 13:39:21

function b64_to_utf8( str ) {
  return decodeURIComponent(escape(window.atob( str )));
}

 https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding#The_.22Unicode_Problem.22
7
répondu PPB 2015-04-14 06:44:05

j'ai essayé les routines Javascript à phpjs.org et ils ont bien fonctionné.

j'ai d'abord essayé les routines suggérées dans la réponse choisie par Ranhiru Cooray - http://ntt.cc/2008/01/19/base64-encoder-decoder-with-javascript.html

j'ai conclu qu'ils ne fonctionnaient pas en toutes circonstances. J'ai écrit un cas d'essai où ces routines échouent et les ai posté à GitHub à:

https://github.com/scottcarter/base64_javascript_test_data.git

j'ai aussi posté un commentaire sur le blog à ntt.cc pour alerter l'auteur (en attente de modération - l'article est ancien donc pas sûr si le commentaire sera posté).

6
répondu Scott Carter 2013-01-30 03:22:30

est-ce que quelqu'un a dit "golf code"? = )

ce qui suit est ma tentative d'améliorer mon handicap tout en rattrapant le temps. Fournis pour votre commodité.

function decode_base64(s) {
  var b=l=0, r='',
  m='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
  s.split('').forEach(function (v) {
    b=(b<<6)+m.indexOf(v); l+=6;
    if (l>=8) r+=String.fromCharCode((b>>>(l-=8))&0xff);
  });
  return r;
}

ce que je cherchais en fait était une implémentation asynchrone et, à ma surprise, il s'avère que forEach par opposition à la méthode $([]).each de JQuery, l'implémentation est très synchrone.

si vous aviez aussi des notions aussi folles mind a 0 delay window.setTimeout exécutera le décodage asynchrone de base64 et exécutera la fonction callback avec le résultat lorsque cela sera fait.

function decode_base64_async(s, cb) {
  setTimeout(function () { cb(decode_base64(s)); }, 0);
}

@Toothbrush a suggéré "indexer une chaîne comme un tableau", et se débarrasser du split . Cette routine semble vraiment étrange et pas sûr de la compatibilité qu'il sera, mais il ne frappe un autre birdie donc laissez-le.

function decode_base64(s) {
  var b=l=0, r='',
  m='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
  [].forEach.call(s, function (v) {
    b=(b<<6)+m.indexOf(v); l+=6;
    if (l>=8) r+=String.fromCharCode((b>>>(l-=8))&0xff);
  });
  return r;
}

en essayant de trouver plus d'informations sur JavaScript string as array I trébuché sur ce pro tip à l'aide d'un /./g regex pour passer à travers une chaîne de caractères. Cela réduit encore plus la taille du code en remplaçant la chaîne de caractères en place et en éliminant la nécessité de conserver une variable de retour.

function decode_base64(s) {
  var b=l=0,
  m='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
  return s.replace(/./g, function (v) {
    b=(b<<6)+m.indexOf(v); l+=6;
    return l<8?'':String.fromCharCode((b>>>(l-=8))&0xff);
  });
}

si toutefois vous cherchiez quelque chose d'un peu plus traditionnel peut-être ce qui suit est plus à votre goût.

function decode_base64(s) {
  var b=l=0, r='', s=s.split(''), i,
  m='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
  for (i in s) {
    b=(b<<6)+m.indexOf(s[i]); l+=6;
    if (l>=8) r+=String.fromCharCode((b>>>(l-=8))&0xff);
  }
  return r;
}

Je n'avais pas le problème NULL à l'arrière, donc il a été supprimé pour rester sous le par mais il devrait être facilement résolu avec un trim() ou un trimRight() si vous préférez, si cela pose un problème pour vous.

ie.

return r.trimRight();

Note:

le résultat est une chaîne d'octets ascii, Si vous avez besoin d'unicode le plus facile est de escape la chaîne d'octets qui peut ensuite être décodé avec decodeURIComponent pour produire la chaîne d'unicode.

function decode_base64_usc(s) {      
  return decodeURIComponent(escape(decode_base64(s)));
}

Depuis escape est déprécié nous pourrait changer notre fonction pour soutenir unicode directement sans la nécessité de escape ou String.fromCharCode nous pouvons produire une % chaîne échappée prêt pour le décodage URI.

function decode_base64(s) {
  var b=l=0,
  m='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
  return decodeURIComponent(s.replace(/./g, function (v) {
    b=(b<<6)+m.indexOf(v); l+=6;
    return l<8?'':'%'+(0x100+((b>>>(l-=8))&0xff)).toString(16).slice(-2);
  }));
}

nJoy!

6
répondu nickl- 2018-05-10 12:49:33

je préférerais utiliser les méthodes d'encodage/décodage bas64 de CryptoJS , la bibliothèque la plus populaire pour les algorithmes cryptographiques standard et sécurisé mis en œuvre en JavaScript en utilisant les meilleures pratiques et les modèles.

1
répondu Dan Dascalescu 2013-11-17 07:06:04

Dans Le Nœud.js nous pouvons le faire de façon simple

var base64 = 'SGVsbG8gV29ybGQ='
var base64_decode = new Buffer(base64, 'base64').toString('ascii');

console.log(base64_decode); // "Hello World"
0
répondu KARTHIKEYAN.A 2017-11-28 11:54:26