分享一个自认为不错的 base64 基础库

最近项目需要用到 Base64, 想到npm中找个好用的, 很可惜没一个符合我的预期, 于自己捣鼓一个, 感觉还不错所以分享出来;

其实我的需求其实很简单:

浏览器可用; (利用 Buffer 的方法出局);
支持字符串 (现有的库都支持, 只有 btoa , atob 只支持 Latin1)
javascript 字符串无损转换 (因为这一点, 现有库全军覆没), 稍后做说明;
能用上 Tree-shaking , 因为项目一般只用了Base64的一半功能(encode 或 decode), 我可不想copy代码;

为什么不能做到javascript字符串无损转换

看一个例子:

 var s = '\ud800'; 
 var b64 = Buffer.from(s).toString('base64'); 
 var _s = Buffer.from(b64, 'base64').toString();
 console.log(s == _s); //false

为什么最后是 false?
首先要知道, 字符串编码为base64之前要先转成字节数组, 字节数组再进行 base64 编码, 解码反之, 我们一般都用’utf8’编码字符串; 再看 U+d800 是一个空码, 从 utf16 来看, 是一个4字节字符的一半, 然而javascript是ucs2编码, 所以它在javascript中是一个正常的字符串; Buffer 默认也是以’utf8’编码字符串 , 所以过程是这样 字符串>Unicode>utf8, 字符串到 Unicode 过和程对于空码, 替换成了一个占位符 ‘�’, 之后的转换过程就跟着错了, 还原回来当然就错了;

反正就认准一点,我一个字符串出了个门回来就变了这是不可以的.

怎么解决:

方案1:
直接用ucs2编码; 省去字符串到 Unicode 的过程, 自然不会出问题了;

 var s = '\ud800'; 
 var b64 = Buffer.from(s,'ucs2').toString('base64'); 
 var _s = Buffer.from(b64, 'base64').toString('ucs2');
 console.log(s == _s); //true

注意: 上面代码里的 ‘ucs2’ 其实是 ‘utf16le’ 的别名. 但有一个问题, 单字符串中英文居多时 , 编码后的Base64会比用 “utf8” 的情况长很多;

方案2:
字符串>Unicode>utf8 的过程不把空码替换, 解码也一样, 这样也可以保证字符串的一至性; 我写的这个Base64库用的也是这个方案;

其它

除了上面说的5点, 我还做了一些顺手的功能;

抽象出 Base64 算法, 支持自定义的编码表和字符串编码方式, 适应更多特殊场景;
支持字节数组 (既然在都有了 ArrayBuffer/Uint8Array 类型, 为什么不顺便支持一下, 其实比支持字符串更简单吧) , 其实我的项目也没用到;

GitHub: cnwhy/Base64.js
详细的使用方法可参看这篇

strugglexiang 1楼•3 个月前

javascript是ucs2编码是什么意思

cnwhy 2楼•3 个月前作者

@strugglexiang ucs2 可以看成是 utf16 的子集

waitingsong 3楼•3 个月前

浏览器不支持 buffer ？

cnwhy 4楼•3 个月前作者

@waitingsong 浏览器是 ArrayBuffer 我说的是 Nodejs的 Buffer 对象，它虽然继承自Uint8Array ,但是并不适合在浏览器中实现

waitingsong 5楼•3 个月前

其它的解决方案： https://developer.mozilla.org/zh-CN/docs/Web/API/WindowBase64/Base64_encoding_and_decoding 不知道满足 3.javascript 字符串无损转换不？

DerekYeung 6楼•3 个月前

http://locutus.io/php/url/base64_encode/

cnwhy 7楼•3 个月前作者

@waitingsong Solution #2 – JavaScript's UTF-16 => UTF-8 => base64 这不失为一个很好的解决方案, 不考虑4字节字符的事全部, 我的方案1是 ucs2 > base64 它是 ucs2 > UTF-8 > base64 , 解决英文字符会占两位题, 不过, 当遇到 4 字节安符时, 会看成两个字符进行UTF8编码,所以会占到6字节, 如果不拆转的话一般是4个字节;

cnwhy 8楼•3 个月前作者

@DerekYeung 他这个方法是利用 Buffer 或btoa'; 实测编码"\ud800"` 在node环境中肯定被替换, 在浏览器环境报错了, 没深究;

waitingsong 9楼•3 个月前

@cnwhy utf8.ts 转换方法似乎可以用 str2Uint8Array() 这个函数来简化。浏览器和 Node.js 通用。

waitingsong 10楼•3 个月前

@cnwhy utf8.ts isArray 这个没必要还用 polyfill 吧，对于不支持 Array.isArray() 的浏览器可以忽略了。

waitingsong 11楼•3 个月前

反正就认准一点,我一个字符串出了个门回来就变了这是不可以的.

我认为所谓完全保持原样转换的思路是不正确的： \ud800 单独这个码点不是个合法的字符（需要和其它码点配套使用）。各个开发语言在处理这种不合法的 UTF-8 码点时一会都会用 EF BF BD 这个备胎来替换，表示为异常值

console.log(Buffer.from('\ud800')) // <Buffer ef bf bd>
console.log(Buffer.from('\ud801')) // <Buffer ef bf bd>
console.log(Buffer.from('\ud802')) // <Buffer ef bf bd>

如果在转换、传输中对于非法字符（码点）不处理为 EF BF BD 而是“原样”传输，那么就可能会产生多字节字符（拼接）攻击漏洞。这是我们所不希望发生的。

对于我来说：