Failed to decode base64 in javascript

Question

I receive an id_token as part of my current href. It is encoded in base64. I try to decode it using atob(extractedIdToken), but get the following error:

Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded

When I copy and paste the extracted id_token in my code and go to an online decoding site, it decodes correctly. Do you have suggestion?

Can you include the string and reproduce error message at stacksnippets at Question? See https://stackoverflow.com/help/mcve — guest271314, Nov 10 '17 at 15:36
See SO: https://stackoverflow.com/questions/22578530/failed-to-execute-atob-on-window — Mamun, Nov 10 '17 at 15:38
I have solved my issue by writing the decoder in the backend and call it front end. See my answer at the end. — Donia Zaela, Dec 01 '17 at 14:03
Then, the issue was also resolved in the front end. Just check my second answer below. — Donia Zaela, Dec 07 '17 at 15:07

score 1 · Answer 1 · edited Jun 13 '20 at 12:12

I always use this to decode and encode in Base64, try it

var Base64 = {
    _keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",
    encode: function (e) {
        var t = "";
        var n, r, i, s, o, u, a;
        var f = 0;
        e = Base64._utf8_encode(e);
        while (f < e.length) {
            n = e.charCodeAt(f++);
            r = e.charCodeAt(f++);
            i = e.charCodeAt(f++);
            s = n >> 2;
            o = (n & 3) << 4 | r >> 4;
            u = (r & 15) << 2 | i >> 6;
            a = i & 63;
            if (isNaN(r)) {
                u = a = 64
            } else if (isNaN(i)) {
                a = 64
            }
            t = t + this._keyStr.charAt(s) + this._keyStr.charAt(o) + this._keyStr.charAt(u) + this._keyStr.charAt(a)
        }
        return t
    },
    decode: function (e) {
        var t = "";
        var n, r, i;
        var s, o, u, a;
        var f = 0;
        e = e.replace(/[^A-Za-z0-9+/=]/g, "");
        while (f < e.length) {
            s = this._keyStr.indexOf(e.charAt(f++));
            o = this._keyStr.indexOf(e.charAt(f++));
            u = this._keyStr.indexOf(e.charAt(f++));
            a = this._keyStr.indexOf(e.charAt(f++));
            n = s << 2 | o >> 4;
            r = (o & 15) << 4 | u >> 2;
            i = (u & 3) << 6 | a;
            t = t + String.fromCharCode(n);
            if (u != 64) {
                t = t + String.fromCharCode(r)
            }
            if (a != 64) {
                t = t + String.fromCharCode(i)
            }
        }
        t = Base64._utf8_decode(t);
        return t
    },
    _utf8_encode: function (e) {
        e = e.replace(/rn/g, "n");
        var t = "";
        for (var n = 0; n < e.length; n++) {
            var r = e.charCodeAt(n);
            if (r < 128) {
                t += String.fromCharCode(r)
            } else if (r > 127 && r < 2048) {
                t += String.fromCharCode(r >> 6 | 192);
                t += String.fromCharCode(r & 63 | 128)
            } else {
                t += String.fromCharCode(r >> 12 | 224);
                t += String.fromCharCode(r >> 6 & 63 | 128);
                t += String.fromCharCode(r & 63 | 128)
            }
        }
        return t
    },
    _utf8_decode: function (e) {
        var t = "";
        var n = 0;
        var r = c1 = c2 = 0;
        while (n < e.length) {
            r = e.charCodeAt(n);
            if (r < 128) {
                t += String.fromCharCode(r);
                n++
            } else if (r > 191 && r < 224) {
                c2 = e.charCodeAt(n + 1);
                t += String.fromCharCode((r & 31) << 6 | c2 & 63);
                n += 2
            } else {
                c2 = e.charCodeAt(n + 1);
                c3 = e.charCodeAt(n + 2);
                t += String.fromCharCode((r & 15) << 12 | (c2 & 63) << 6 | c3 & 63);
                n += 3
            }
        }
        return t
    }
};

Please stop adding it back in, that is not JSON, it's a JavaScript Object. — George, Nov 10 '17 at 15:49
How does the code at Answer resolve Question? Is the code at Answer copy/pasted from an existing Answer at SO? — guest271314, Nov 10 '17 at 15:56
I apologize, this function only get string to return string, Your problem seems to use blob. Maybe here has the answer https://stackoverflow.com/questions/39490904/errorfailed-to-execute-atob-on-window-the-string-to-be-decoded-is-not-corr — Israel Martins, Nov 10 '17 at 16:05

score 0 · Accepted Answer · answered Nov 21 '17 at 18:50

0

Thanks all for your answers. I ended up moving the Base64 decoding process to the Java backend using the java package: java.util.Base64.

answered Nov 21 '17 at 18:50

Donia Zaela

317
1
4
15

score 0 · Answer 3 · answered Dec 07 '17 at 15:06

In my case, the issue was that the encoded string should have been treated as segments. Just separate the code with the separator "." or whatever your case is. Then, decode only the different parts separately. This resolved my issue and I was able to decode using window.atob(). Hope this helps.

Failed to decode base64 in javascript

3 Answers3