Base64URL decoding via JavaScript?

Question

So I'm stumped. I know there's lots of Base64 encoders/decoders for JS, but not for the modified (and Facebook-favored) Base64URL variation. So far searching across stackoverflow has come up dry.

Yes, I could use PHP or another server-side library to decode this, but I'm trying to keep this universal regardless of what platform I'm using... for example, if I were to host a HTML-only Facebook app on Amazon S3/CloudFront and only use their JS SDK and jQuery to take care of processing forms and getting data.

That said, does anyone know of any Base64URL-specific decoders for JavaScript?

Thanks in advance!

Droplet

Base64Url encoding is specified in RFC 4648, The Base16, Base32, and Base64 Data Encodings. The only difference between Base64 and Base64Url is two values (62 and 63). Just replace "+" with "-" and "/" with "_". – Ankylosaur

@Ankylosaur would this be correct? var base64url = function(aStr) { return btoa(aStr.replace(/\+/g,'-').replace(/\//g,'_')).replace(/\=+$/m,'') } with the trialing ='s stripped? – Asclepiadean

Answer 1

Use this before decoding :

var decode = function(input) {
        // Replace non-url compatible chars with base64 standard chars
        input = input
            .replace(/-/g, '+')
            .replace(/_/g, '/');

        // Pad out with standard base64 required padding characters
        var pad = input.length % 4;
        if(pad) {
          if(pad === 1) {
            throw new Error('InvalidLengthError: Input base64url string is the wrong length to determine padding');
          }
          input += new Array(5-pad).join('=');
        }

        return input;
    }

After using this function you can use any base64 decoder

Unjaundiced

Ah those times when you wish you can upvote twice :) – Tupiguarani

According to the Infra spec, atob removes the padding, so it's not necessary to add it. See infra.spec.whatwg.org/#forgiving-base64-decode – Leonilaleonine

Answer 2

Using the TextEncoder interface along with the btoa() function and replace + with -, and / is replaced with _. Finally, remove trailing = characters added during base64 padding. For Decoding, the process is reversed.

Encode

function base64URLencode(str) {
  const utf8Arr = new TextEncoder().encode(str);
  const base64Encoded = btoa(utf8Arr);
  return base64Encoded.replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
}

Decode

function base64URLdecode(str) {
  const base64Encoded = str.replace(/-/g, '+').replace(/_/g, '/');
  const padding = str.length % 4 === 0 ? '' : '='.repeat(4 - (str.length % 4));
  const base64WithPadding = base64Encoded + padding;
  return atob(base64WithPadding)
    .split('')
    .map(char => String.fromCharCode(char.charCodeAt(0)))
    .join('');
}

Estefanaestel

On the decode make sure to turn it back into a string with .join('') – Naylor

@Ronnie Can you explain why the decoded string has to be split into an array, each element translated to charcode and back to a string, and then joined back into one string? Seems like returning the result of atob() is the same.. – Siple

Answer 3

Solution:

var b64str = base64.encode('foo bar');

// fix padding according to the new format
b64str = b64str.padRight(b64str.length + (4 - b64str.length % 4) % 4, '=');

Using this great base64 encode/decode: http://code.google.com/p/stringencoders/source/browse/trunk/javascript/base64.js

Also depends on the padRight method:

String.prototype.padRight = function(n, pad){
    t = this;
    if(n > this.length)
        for(i = 0; i < n-this.length; i++)
            t += pad;
    return t;
}

Shelled

Hi Simeon... I think this could work, but I think I also need to replace "-" and "+" with "_" and "/" - good starting point though. I was hoping to find one with everything wrapped in the same library, but I guess I might just have to modify a library a little bit afterall. – Droplet

Strange... actually, I just did a JS version of this answer: #1229201 – Shelled

Answer 4

The answer by mohamed was really helpful, thanks!

If this happens for you: throw new Error("InvalidLengthError: Input base64url string is the wrong length to determine padding");

... you may be using it to decode a JSON Web Token (JWT).

But for this, you need to (after replacing the characters that need replacing) split apart the 3 parts of the JWT properly ("." character), and then pad each before attempting to decode using the code from that answer ( https://mcmap.net/q/572086/-base64url-decoding-via-javascript ).

For a quick look inside your JWT, you could just use https://jwt.io/ if it's not critical to security (if it's just for a local test, for example).

Watthour

Answer 5

I think the most efficient way of doing Base64/Base64URL decoding is to decode directly in a function instead of changing Base64URL into Base64 and then decoding it. I wrote a function that can decode both Base64 and Base64URL directly without any other dependency.

const PADCHAR = '=';
const B64index = [
    0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    0, 0, 0,62,63,62,62,63,52,53,54,55,56,57,58,59,60,61, 0, 0,
    0, 0, 0, 0, 0, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9,10,11,12,13,14,
  15,16,17,18,19,20,21,22,23,24,25, 0, 0, 0, 0,63, 0,26,27,28,
  29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,
  49,50,51];

function b64decode(s) {
  const len = s.length;
  if (len === 0) return s;
  const padding = (s.charAt(len-1) === PADCHAR);
  const pad = padding || ((len % 4) > 0);
  const L = (Math.floor((len+3)/4)-pad)*4;
  var x = [];
  for (i = 0; i < L; i += 4)
  {
    var n = B64index[s.charCodeAt(i)] << 18 | 
      B64index[s.charCodeAt(i+1)] << 12 | 
      B64index[s.charCodeAt(i+2)] << 6 | 
      B64index[s.charCodeAt(i+3)];
    x.push(String.fromCharCode(n >> 16, (n >> 8) & 0xff, n & 0xff));
  }
  if (pad)
  {
    var n = B64index[s.charCodeAt(L)] << 18 | 
      B64index[s.charCodeAt(L+1)] << 12;
    x.push(String.fromCharCode(n >> 16));
    if (len > L + 2 && ((s.charAt(L+2) != PADCHAR) || !padding))
    {
      n |= B64index[s.charCodeAt(L+2)] << 6;
      x.push(String.fromCharCode((n >> 8) & 0xff));
    }
  }
  return x.join('');
}

To use this function to decode the Base64URL string, I use JWT token as an example. First, I split the token. Then, I decode the JWT payload and then parse it into JSON object.

const elements = token.split('.');
const payload = JSON.parse(b64decode(elements[1]));

Eugeneeugenia

Answer 6

var str = "string";
var encoded = btoa(str); // encode a string (base64)
var decoded = atob(encoded); //decode the string 
alert( ["string base64 encoded:",encoded,"\r\n", "string base64 decoded:",decoded].join('') );

Irregularity

This uses the normal, non-url-safe mapping charachters. See RFC 4648 §5 (en.wikipedia.org/wiki/Base64) – Ogawa