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!

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

Answer 2

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;
}

Answer 3

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://stackoverflow.com/a/51838635/1143126 ).

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).

Answer 4

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]));

Answer 5

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('') );