开始
还记得之前产品同学给我发了段代码,要我看看,而且最近他一直在催我找工作,相必这也是和jd相关了。遂思考前端的加密方式:
- 自行加密。这种没代码就别考虑了
- Base64。嗯~能够加解密
- MD5。虽然有爆出能解密了,但我还是觉得怎么可能[黑人问号脸]
- RSA。对称加密稍微了解一下,没私钥那也gg...
总的来说,给前端能看懂的就Base64了。So,百度搜了下Base64,果然第一个就是能用的工具,嘿嘿嘿~成功装了波13
结束
So,结束了吗,怎么可能?首先来吐几个槽点:
- 作为一个专业的前端开发,竟然还要找Base64网站?
- 作为一个开发,do you know Base64?
咳咳咳~下面开始装13
Base64
关于它的详细信息,口水说没了我都可能讲不清楚,这波自行维基。
简单来说,有规律地把三个字符变四个,不够的填上=
号。当然,这四个字符也有规定:A-Z、a-z、0-9、+、/
,总共64个,没毛病
好的,现在重点是变戏法(3 => 4):
- 计算机识别的只有二进制
- Base64字符串中最小
index
为63,转换成二进制为111111
,最小为6位 3、4、6
最小公倍数为24
说的看似无关,其实步步紧要。来看一张转换图
当然了,这还不简单,写个循环就够了:
- 每加3一循环,里面先转ASCII码,变成二进制,保证其为8位,再用
+
号拼接... - 然后再分别取6位,转成十进制,变成Base64字符,拼接OK
pia,pia,pia~打脸,再这样人人都成产(gong)品(cheng)经理(shi)了。看起来没毛病,我就是这么想的了,可是看完github上star最多的js-base64
项目后,发现脸很肿。。。
代码
喜闻乐见的代码段,这里只是js-base64
的简化版,有兴趣的老铁可以去github上看。首先准备点知识:
// 按位操作符 & | >>> <<,可参考MDN上文档
// &,只有两个位都为1才得1
0010 & 1111; // 0010
// |,至少有个1能得1
0010 | 1111; // 1111
// <<,左移,右侧填0
0010 << 2; // 1000
// >>>,无符号右移,右侧丢弃,左侧填0
0010 >>> 2; // 0000
复制代码
从核心开始,三转四的粗略版:
// Base64字符串
const base64 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
// 原字符串
const word3 = 'Tao';
const len = word3.length
// 1. 第一个字符ASCII的二进制右移16位,变成了24位二进制
// 2. 第二个右移8位
// 3, 三个二进制按位或,把后两个二进制填到第一个。这正是精彩之处!
// 其实我第一次看时,看成了逻辑或,一直纳闷儿它怎么处理三个字符的,hah
const bit24 = word3.charCodeAt(0) << 16
| (len > 1 ? word3.charCodeAt(1) << 8 : 0)
| (len > 2 ? word3.charCodeAt(2) : 0);
const word4Array = [
base64.charAt(bit24 >>> 18),
// & 63,保证取得后6位二进制,因为前面都为0,按位与掉了
base64.charAt((bit24 >>> 12) & 63),
len === 1 ? '=' : base64.charAt((bit24 >>> 6) & 63),
len <= 2 ? '=' : base64.charAt(bit24 & 63),
];
console.log(word4Array.join('')); // 加密字符串:VGRU
复制代码
反过来解码亦然,不过有几个注意点:
- 二进制的移动正好相反
- 为保证取后8位,应该
& 255
,因为255.toString(2) === '11111111'
,8位
浏览器的方法
上面只是字符转Base64,还有图片转呢?这个我不知道,等各路大神解答[笑哭]...
当然,浏览器里提供的方法傻瓜式调用还是可以的。使用FileReader API,例如:
const file = document.querySelector('[type="file"]').files[0];
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => console.log(reader.result);
复制代码
转图片更简单,直接img.src = 'data:image/*;base64,'+ str
即可。
转字符也没问题,现代浏览器的两方法:
window.atob
,解码window.btoa
,编码
Suprise the mother fuck,说了半天原来浏览器都有。全都是安排~
附上一张兼容性图:
参考链接
Base64维基:en.wikipedia.org/wiki/Base64
js-base64项目:github.com/dankogai/js…
ps:项目作者好像是台湾同胞,看到readme里繁体字了。不过道听途说国家要收复台湾了 ,就在几年之内,搞不好过个2-3年要打仗了....