使用JavaScript的atob解码base64不能正确解码utf-8字符串

Question

我正在使用Javascriptwindow.atob()函数来解码一个base64编码的字符串（特别是GitHub API中base64编码的内容）。问题是我得到了ASCII编码的字符（像而不是™)。如何正确处理传入的base64编码的流，以便将其解码为UTF-8？

Answer 1

尽管JavaScript（ECMAScript）已经成熟，但Base64、ASCII和Unicode编码的脆弱性已经引起了很多令人头疼的问题（其中大部分问题都是在这个问题的历史上出现的）。

请考虑以下示例：

const ok = "a";
console.log(ok.codePointAt(0).toString(16)); //   61: occupies < 1 byte

const notOK = "✓"
console.log(notOK.codePointAt(0).toString(16)); // 2713: occupies > 1 byte

console.log(btoa(ok));    // YQ==
console.log(btoa(notOK)); // error

为什么我们会遇到这种情况？

来源：MDN（2021）

最初的MDN文章还讨论了window.btoa和.atob的损坏性质，它们后来在现代ECMAScript中得到了修补。MDN最初的文章解释道：

“Unicode问题”由于domString是16位编码的字符串，在大多数调用window.bto的浏览器中，如果某个字符超出了8位字节(0x00~0xFF)的范围，则会导致字符超出范围异常。

（为ASCII base64解决方案保持滚动）

来源：MDN（2021）

MDN推荐的解决方案是实际对二进制字符串表示进行编码：

// convert a Unicode string to a string in which
// each 16-bit unit occupies only one byte
function toBinary(string) {
  const codeUnits = new Uint16Array(string.length);
  for (let i = 0; i < codeUnits.length; i++) {
    codeUnits[i] = string.charCodeAt(i);
  }
  return btoa(String.fromCharCode(...new Uint8Array(codeUnits.buffer)));
}

// a string that contains characters occupying > 1 byte
let encoded = toBinary("✓ à la mode") // "EycgAOAAIABsAGEAIABtAG8AZABlAA=="

function fromBinary(encoded) {
  binary = atob(encoded)
  const bytes = new Uint8Array(binary.length);
  for (let i = 0; i < bytes.length; i++) {
    bytes[i] = binary.charCodeAt(i);
  }
  return String.fromCharCode(...new Uint16Array(bytes.buffer));
}

// our previous Base64-encoded string
let decoded = fromBinary(encoded) // "✓ à la mode"

• 第一种方法是转义整个字符串（使用UTF-8，请参阅EncodeURIComponent)，然后对其进行编码；
• 第二种方法是将UTF-16domString转换为UTF-8字符数组，然后对其进行编码。

关于以前的解决方案的注意事项：MDN文章最初建议使用unescape和escape来解决字符超出范围异常问题，但后来已不推荐使用。这里的一些其他答案建议使用decodeuricomponent和encodeuricomponent来解决这个问题，但事实证明这是不可靠和不可预测的。这个答案的最新更新使用了现代JavaScript函数来提高速度和更新代码。

如果您想节省一些时间,还可以考虑使用库：

• JS-Base64(NPM，适合Node.js)
• base64-js

    function b64EncodeUnicode(str) {
        // first we use encodeURIComponent to get percent-encoded UTF-8,
        // then we convert the percent encodings into raw bytes which
        // can be fed into btoa.
        return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g,
            function toSolidBytes(match, p1) {
                return String.fromCharCode('0x' + p1);
        }));
    }
    
    b64EncodeUnicode('✓ à la mode'); // "4pyTIMOgIGxhIG1vZGU="
    b64EncodeUnicode('\n'); // "Cg=="

    function b64DecodeUnicode(str) {
        // Going backwards: from bytestream, to percent-encoding, to original string.
        return decodeURIComponent(atob(str).split('').map(function(c) {
            return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
        }).join(''));
    }
    
    b64DecodeUnicode('4pyTIMOgIGxhIG1vZGU='); // "✓ à la mode"
    b64DecodeUnicode('Cg=='); // "\n"

（为什么需要这样做？('00'+C.charcodeat(0).ToString(16)).slice(-2)将0前置到单个字符串，例如，当C==\n时，C.charcodeat(0).ToString(16)返回a，迫使a表示为0a)。

这里有一个相同的解决方案，带有一些额外的TypeScript兼容性（通过@ma-maddin):

// Encoding UTF8 ⇢ base64

function b64EncodeUnicode(str) {
    return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function(match, p1) {
        return String.fromCharCode(parseInt(p1, 16))
    }))
}

// Decoding base64 ⇢ UTF8

function b64DecodeUnicode(str) {
    return decodeURIComponent(Array.prototype.map.call(atob(str), function(c) {
        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)
    }).join(''))
}

这使用了escape和unescape（现在已不推荐使用，但在所有现代浏览器中仍然有效）：

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"

还有最后一件事：我在调用GitHub API时第一次遇到这个问题。为了让它在（Mobile）Safari上正常工作，我实际上必须在解码base64源代码之前从源代码中去掉所有空白。这在2021年是否仍然相关，我不知道：

function b64_to_utf8( str ) {
    str = str.replace(/\s/g, '');    
    return decodeURIComponent(escape(window.atob( str )));
}