Base64 encoding and decoding in client-side Javascript

Question

Are there any methods in JavaScript that could be used to encode and decode a string using base64 encoding

User · Answer

Modern browsers have built-in javascript functions for Base64 encoding btoa() and decoding atob(). More info about support in older browser versions: https://caniuse.com/?search=atob

However, be aware that atob and btoa functions work only for ASCII charset. If you need Base64 functions for UTF-8 charset, you can do it with:

function base64_encode(s) {      
    return btoa(unescape(encodeURIComponent(s)));
}
function base64_decode(s) {      
    return decodeURIComponent(escape(atob(s)));
}

User · Answer

Short and fast Base64 JavaScript Decode Function without 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  lt  n z  1   i                          v push w i                        for  i   0  i  lt  64  i                  e v i     i             for  i   0  i  lt  s length  i  72                var b   0  c  x  l   0  o   s substring i  i 72           for  x   0  x  lt  o length  x                          c   e o charAt x                b    b  lt  lt  6    c              l    6              while  l  gt   8                                r    w  b  gt  gt  gt   l -  8     256                                      return r

User · Answer

Some browsers such as Firefox  Chrome  Safari  Opera and IE10  can handle Base64 natively  Take a look at this Stackoverflow question  It s using btoa   and atob   functions   For server-side JavaScript  Node   you can use Buffers to decode   If you are going for a cross-browser solution  there are existing libraries like CryptoJS or code like   http   ntt cc 2008 01 19 base64-encoder-decoder-with-javascript html  With the latter  you need to thoroughly test the function for cross browser compatibility  And error has already been reported

User · Answer

Here is a tightened up version of Sniper s post  It presumes well formed base64 string with no carriage returns  This version eliminates a couple of loops  adds the  amp 0xff fix from Yaroslav  eliminates trailing nulls  plus a bit of code golf   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 lt 64 i    e A charAt i   i       for x 0 x lt L x             c e s charAt x   b  b lt  lt 6  c l  6          while l gt  8    a  b gt  gt  gt  l- 8   amp 0xff    x lt  L-2    amp  amp  r  w a               return r

User · Answer

x000D   x000D  function b64 to utf8  str     x000D    return decodeURIComponent escape window atob  str      x000D    x000D   x000D   x000D    https   developer mozilla org en-US docs Web API WindowBase64 Base64 encoding and decoding The  22Unicode Problem 22

User · Answer

I d rather use the bas64 encode decode methods from CryptoJS  the most popular library for standard and secure cryptographic algorithms implemented in JavaScript using best practices and patterns

User · Answer

For JavaScripts frameworks where there is no atob method and in case you do not want to import external libraries  this is short function that does it    It would get a string that contains Base64 encoded value and will return a decoded array of bytes  where the array of bytes is represented as array of numbers where each number is an integer between 0 and 255 inclusive    function fromBase64String str        var alpha         ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789         var value           var index   0      var destIndex    0      var padding   false      while  true             var first    getNextChr str  index  padding  alpha           var second   getNextChr str  first  nextIndex  first  padding  alpha           var third    getNextChr str  second nextIndex  second padding  alpha           var fourth   getNextChr str  third  nextIndex  third  padding  alpha            index   fourth nextIndex          padding   fourth padding              ffffffss sssstttt ttffffff         var base64 first    first code     null   0   first code          var base64 second   second code    null   0   second code          var base64 third    third code     null   0   third code          var base64 fourth   fourth code    null   0   fourth code           var a      base64 first  lt  lt  2   amp  0xFC       base64 second gt  gt 4   amp  0x03           var b      base64 second lt  lt  4   amp  0xF0       base64 third  gt  gt 2   amp  0x0F           var c      base64 third  lt  lt  6   amp  0xC0       base64 fourth gt  gt 0   amp  0x3F            value  destIndex      a          if   third padding                value  destIndex      b            else               break                    if   fourth padding                value  destIndex      c            else               break                    if  index  gt   str length                break                      return value     function getNextChr str  index  equalSignReceived  alpha        var chr   null      var code   0      var padding   equalSignReceived      while  index  lt  str length            chr   str charAt index           if  chr           chr      r     chr      n     chr      t                 index                continue                    if  chr                       padding   true            else               if  equalSignReceived                    throw new Error  Invalid Base64 Endcoding character                            chr       with code     str charCodeAt index                           on position     index                          received afer an equal sign     padding                          character has already been received                           The equal sign padding character is the only                          possible padding character at the end                               code   alpha indexOf chr               if  code    -1                    throw new Error  Invalid Base64 Encoding character                            chr       with code     str charCodeAt index                           on position     index                                         break            return   character  chr  code  code  padding  padding  nextIndex    index       Resources used  RFC-4648 Section 4

User · Answer

Did someone say code golf      The following is my attempt at improving my handicap while catching up with the times  Supplied for your convenience   function decode base64 s      var b l 0  r       m  ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789       s split     forEach function  v        b  b lt  lt 6  m indexOf v   l  6      if  l gt  8  r  String fromCharCode  b gt  gt  gt  l- 8   amp 0xff           return r      What I was actually after was an asynchronous implementation and to my surprise it turns out forEach as opposed to JQuery s       each method implementation is very much synchronous   If you also had such crazy notions in mind a 0 delay window setTimeout will run the base64 decode asynchronously and execute the callback function with the result when done   function decode base64 async s  cb      setTimeout function      cb decode base64 s       0        Toothbrush suggested  index a string like an array   and get rid of the split  This routine seems really odd and not sure how compatible it will be  but it does hit another birdie so lets have it   function decode base64 s      var b l 0  r       m  ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789          forEach call s  function  v        b  b lt  lt 6  m indexOf v   l  6      if  l gt  8  r  String fromCharCode  b gt  gt  gt  l- 8   amp 0xff           return r      While trying to find more information on JavaScript string as array I stumbled on this pro tip using a    g regex to step through a string  This reduces the code size even more by replacing the string in place and eliminating the need of keeping a return variable   function decode base64 s      var b l 0    m  ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789       return s replace    g  function  v        b  b lt  lt 6  m indexOf v   l  6      return l lt 8    String fromCharCode  b gt  gt  gt  l- 8   amp 0xff             If however you were looking for something a little more traditional perhaps the following is more to your taste   function decode base64 s      var b l 0  r     s s split      i    m  ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789       for  i in s        b  b lt  lt 6  m indexOf s i    l  6      if  l gt  8  r  String fromCharCode  b gt  gt  gt  l- 8   amp 0xff         return r      I didn t have the trailing null issue so this was removed to remain under par but it should easily be resolved with a trim   or a trimRight   if you d prefer  should this pose a problem for you   ie   return r trimRight      Note   The result is an ascii byte string  if you need unicode the easiest is to escape the byte string which can then be decoded with decodeURIComponent to produce the unicode string   function decode base64 usc s            return decodeURIComponent escape decode base64 s         Since escape is being deprecated we could change our function to support unicode directly without the need for escape or String fromCharCode we can produce a   escaped string ready for URI decoding   function decode base64 s      var b l 0    m  ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789       return decodeURIComponent s replace    g  function  v        b  b lt  lt 6  m indexOf v   l  6      return l lt 8         0x100   b gt  gt  gt  l- 8   amp 0xff   toString 16  slice -2              nJoy

User · Answer

I have tried the Javascript routines at phpjs org and they have worked well   I first tried the routines suggested in the chosen answer by Ranhiru Cooray -  http   ntt cc 2008 01 19 base64-encoder-decoder-with-javascript html  I found that they did not work in all circumstances    I wrote up a test case where these routines fail and posted them to GitHub at   https   github com scottcarter base64 javascript test data git  I also posted a comment to the blog post at ntt cc to alert the author  awaiting moderation - the article is old so not sure if comment will get posted

User · Answer

For what it s worth  I got inspired by the other answers and wrote a small utility which calls the platform specific APIs to be used universally from either Node js or a browser   x000D   x000D         Encode a string of text as base64        param data The string of text      returns The base64 encoded string      function encodeBase64 data  string        if  typeof btoa      function             return btoa data         else if  typeof Buffer      function             return Buffer from data   utf-8   toString  base64          else           throw new Error  Failed to determine the platform specific encoder                    Decode a string of base64 as text        param data The string of base64 encoded text     returns The decoded text      function decodeBase64 data  string        if  typeof atob      function             return atob data         else if  typeof Buffer      function             return Buffer from data   base64   toString  utf-8          else           throw new Error  Failed to determine the platform specific decoder            x000D   x000D   x000D

User · Answer

The php js project has JavaScript implementations of many of PHP s functions  base64 encode and base64 decode are included

User · Answer

In Gecko WebKit-based browsers  Firefox  Chrome and Safari  and Opera  you can use btoa   and atob     Original answer  How can you encode a string to Base64 in JavaScript

User · Answer

Internet Explorer 10     Define the string var string    Hello World        Encode the String var encodedString   btoa string   console log encodedString      Outputs   quot SGVsbG8gV29ybGQh quot      Decode the String var decodedString   atob encodedString   console log decodedString      Outputs   quot Hello World  quot    Cross-Browser Re-written and modularized UTF-8 and Base64 Javascript Encoding and Decoding Libraries   Modules for AMD  CommonJS  Nodejs and Browsers  Cross-browser compatible   with Node js Here is how you encode normal text to base64 in Node 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     And here is how you decode base64 encoded strings  var b   new Buffer  SmF2YVNjcmlwdA      base64   var s   b toString      with Dojo js To encode an array of bytes using dojox encoding base64  var str   dojox encoding base64 encode myByteArray    To decode a base64-encoded string  var bytes   dojox encoding base64 decode str    bower install angular-base64  lt script src  quot bower components angular-base64 angular-base64 js quot  gt  lt  script gt   angular      module  myApp     base64         controller  myController            base64     scope        function  base64   scope                  scope encoded    base64 encode  a string             scope decoded    base64 decode  YSBzdHJpbmc            But How  If you would like to learn more about how base64 is encoded in general  and in JavaScript in-particular  I would recommend this article   Computer science in JavaScript  Base64 encoding

User · Answer

In Node js we can do it in simple way   var base64    SGVsbG8gV29ybGQ   var base64 decode   new Buffer base64   base64   toString  ascii     console log base64 decode       Hello World

[javascript] Base64 encoding and decoding in client-side Javascript

Examples related to javascript

Examples related to base64