开始
还记得之前产品同学给我发了段代码, 要我看看, 而且最近他一直在催我找工作, 相必这也是和 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
说的看似无关, 其实步步紧要. 来看一张转换图
被安排的明明白白~[笑哭]. 还是有点儿晕, 看栗子
ok, 差不多也知道它的转化原理了. 但是,"talk is cheap, show me the code".
当然了, 这还不简单, 写个循环就够了:
每加 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 维基: https://en.wikipedia.org/wiki/Base64
js-base64 项目: https://github.com/dankogai/js-base64
ps: 项目作者好像是台湾同胞, 看到 readme 里繁体字了. 不过道听途说国家要收复台湾了 , 就在几年之内, 搞不好过个 2-3 年要打仗了....
来源: https://juejin.im/post/5b62776ff265da0f72388d85