javascript atob 返回“字符串包含无效字符”

Question

I have an AJAX call getting info out of the Github API. It is returned in base64 encoding but when i try to decode it I get the aforementioned error.

Has anyone run into this before and know what is going on? The info the server is returning runs fine through web based decoders. Maybe it get s mangled a bit in a variable? IDK :/

(function () {
    'use strict';

    var objectsList = [];
    var isParsing = 0;
    var insertArea = $('body');

    function makeAJAXCall(hash, cb) {
        $.ajaxSetup({
            Accept: 'Application/vnd.github.raw+json',
            dataType: 'jsonp'
        });

        $.ajax({
            url: hash,
            success: function (json) {
                if (cb) {
                    cb(json);
                }
            },
            error: function (error) {
                console.error(error);
                throw error;
            }
        });
    }

    function parseBlob(hash, cb) {
        makeAJAXCall(hash, function (returnedJSON) {  // no loop as only one entry
            if (cb) {
                cb(returnedJSON.data.content);
            }
        });
    }

    function addSVGToPage(SVGToAdd) {
        var entry, decodedEntry;
        makeAJAXCall(SVGToAdd, function (returnedJSON) {
            console.info(window.atob(returnedJSON.data.content));
        });
    }

    function parseTree(hash) {
        var i, entry;
        var tree = 'https://api.github.com/repos/myusername/SVG-Shapes/git/trees/' + hash;

        makeAJAXCall(tree, function (returnedJSON) {
            for (i = 0;  i < returnedJSON.data.tree.length; i += 1) {
                entry = returnedJSON.data.tree[i];

                if (entry.type === 'blob') {
                    if (entry.path.slice(-4) === '.svg') {     // we only want the svg images not the ignore file and README etc
                        addSVGToPage(entry.url);
                    }
                } else if (entry.type === 'tree') {
                    parseTree(entry.sha);
                }
            }
        });
    }

    $(document).ready(function () {
        parseTree('master');
    });
}());

Edit: below is a sample of what is returned from a console.info(returnedJSON.data.content);

PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCFET0NU WVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0 cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRk Ij4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHht bG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJz aW9uPSIxLjEiIGhlaWdodD0iMjQiIHdpZHRoPSI0MDAiPgkKCTxkZWZzPgoJ CTxwYXR0ZXJuIGlkPSJzdHJpcGVkYmFjayIgaGVpZ2h0PSIyMCIgd2lkdGg9 IjIwIiB5PSIyIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBvdmVy Zmxvdz0ic2Nyb2xsIj4KCQkJPGcgdHJhbnNmb3JtPSJza2V3WCgtMjApIj4K CQkJCTxyZWN0IHg9Ii0xMCIgeT0iMCIgd2lkdGg9IjEwIiBoZWlnaHQ9IjIw IiBzdHJva2U9Im5vbmUiIGZpbGw9IiNGMkYyRjIiLz4KCQkJCTxyZWN0IHg9 IjAiIHk9IjAiIHdpZHRoPSIxMCIgaGVpZ2h0PSIyMCIgc3Ryb2tlPSJub25l IiBmaWxsPSIjRTJFMkUyIi8+CgkJCQk8cmVjdCB4PSIxMCIgeT0iMCIgd2lk dGg9IjEwIiBoZWlnaHQ9IjIwIiBzdHJva2U9Im5vbmUiIGZpbGw9IiNGMkYy RjIiLz4KCQkJCTxyZWN0IHg9IjIwIiB5PSIwIiB3aWR0aD0iMTAiIGhlaWdo dD0iMjAiIHN0cm9rZT0ibm9uZSIgZmlsbD0iI0UyRTJFMiIvPgoJCQk8L2c+ CgkJPC9wYXR0ZXJuPgoKCQk8cmVjdCBpZD0iaW5uZXJjdXQiIHg9IjIiIHkg PSIxIiB3aWR0aD0iMzk2IiBoZWlnaHQ9IjIyIi8+CgoJCTxjbGlwUGF0aCBp ZD0ibG9hZGNsaXAiPgoJCQk8dXNlIHhsaW5rOmhyZWY9IiNpbm5lcmN1dCIv PgoJCTwvY2xpcFBhdGg+Cgk8L2RlZnM+CgoJPHJlY3Qgd2lkdGg9IjQwMCIg aGVpZ2h0PSIyNCIgeD0iMCIgeT0iMCIgc3R5bGU9InN0cm9rZS13aWR0aDoy cHg7c3Ryb2tlOmdyZXk7Ii8+ICA8IS0tIEJhY2tpbmcgcmVjdC9mcmFtZSAt LT4KCgk8ZyBjbGlwLXBhdGg9InVybCgjbG9hZGNsaXApIj4KCQk8cmVjdCB4 PSItMTgiIHkgPSIyIiB3aWR0aD0iNTE2IiBoZWlnaHQ9IjIwIiBzdHlsZT0i c3Ryb2tlLXdpZHRoOjBweDtzdHJva2U6Z3JleTsiIGZpbGw9InVybCgjc3Ry aXBlZGJhY2spIj4KCQkJPGFuaW1hdGVUcmFuc2Zvcm0KCQkgICAgICAgIGF0 dHJpYnV0ZVR5cGU9IlhNTCIKCQkgICAgICAgIGF0dHJpYnV0ZU5hbWU9InRy YW5zZm9ybSIKCQkgICAgICAgIHR5cGU9InRyYW5zbGF0ZSIKCQkJCWZyb209 IjIwIiB0bz0iMCIKCQkJCWJlZ2luPSIwcyIgZHVyPSIwLjZzIgoJCQkJcmVw ZWF0Q291bnQ9ImluZGVmaW5pdGUiCgkJCQlhZGRpdGl2ZT0ic3VtIi8+CgkJ PC9yZWN0PgoJPC9nPgo8L3N2Zz4K

Answer 1

atob breaks due to the newlines in the response. Remove them to get your code to work:

function addSVGToPage(SVGToAdd) {
    var entry, decodedEntry;         // <-- What is this doing here? It's unused.
    makeAJAXCall(SVGToAdd, function (returnedJSON) {
        console.info(window.atob(returnedJSON.data.content.replace(/\s/g, '')));
        //                                                ^^^^^^^^^^^^^^^^^^^
    });
}

Answer 2

According to MDN docs , you might need to escape and then decodeURIComponent to handle unicode:

function utf8_to_b64( str ) {
    return window.btoa(unescape(encodeURIComponent( str )));
}

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

// Usage:
utf8_to_b64('✓ à la mode'); // "4pyTIMOgIGxhIG1vZGU="
b64_to_utf8('4pyTIMOgIGxhIG1vZGU='); // "✓ à la mode"

Answer 3

I have a better solution here:

live demo: https://codepen.io/arliang/pen/mNQayE?editors=1111

// https://best33.com/311.moe

function base64encode(str) {
  let encode = encodeURIComponent(str).replace(/%([a-f0-9]{2})/gi, (m, $1) => String.fromCharCode(parseInt($1, 16)))
  return btoa(encode)
}
function base64decode(str) {
  let decode = atob(str).replace(/[\x80-\uffff]/g, (m) => `%${m.charCodeAt(0).toString(16).padStart(2, '0')}`)
  return decodeURIComponent(decode)
}

function tests() {
  Array.from([
    /*鼠、牛、虎、兔、龙、蛇、马、羊、猴、鸡、狗、猪*/
    '🐭🐂🐯🐰🐲🐍🐎🐑🐒🐔🐶🐷',
    '测试'
  ])
  .forEach(text => {
    try{
      console.assert(btoa(atob(text)) === text, `btoa(atob('${text}')) === '${text}' fail`)
    } catch(e) {
      // console.error(`btoa(atob('${text}')) === '${text}' fail`, e)
    }
    console.assert(base64decode(base64encode(text)) === text, 'pass')
  })
  console.log(`Open the console and click this link👉: data:text/html;base64,${base64encode('🐭🐂🐯🐰🐲🐍🐎🐑🐒🐔🐶🐷')}`)
}
tests()

Answer 4

 <script> function unicodeBase64Decode(text){ text = text.replace(/\\s+/g, '').replace(/\\-/g, '+').replace(/\\_/g, '/'); return decodeURIComponent(Array.prototype.map.call(window.atob(text),function(c){return'%'+('00'+c.charCodeAt(0).toString(16)).slice(-2);}).join('')); } console.log(unicodeBase64Decode("4pyTIMOgIGxhIG1vZGU=")); </script>

The best, omnivorous From https://www.base64encode.org/