详解base64原理

详解base64原理

案例: '鹅' --> 经过base64编码 --> 6bmF

那它怎么编码的呢?

以 '鹅' 字为例

image.png

base64 对应的编码表:

image.png

字符串转base64的转码规则:
第一步,将每三个字节作为一组,一共是24个二进制位。
第二步,将这24个二进制位分为四组,每个组有6个二进制位。
第三步,在每组前面加两个00,扩展成32个二进制位,即四个字节。
第四步,根据上表,得到扩展后的每个字节的对应符号,这就是Base64的编码值。

异常情况处理(如果字节不足三的情况)

  1. 二个字节的情况:将这二个字节的一共16个二进制位,按照上面的规则,转成三组,最后一组除了前面加两个0以外,后面也要加两个0。这样得到一个三位的Base64编码,再在末尾补上一个"="号。
  2. 一个字节的情况:将这一个字节的8个二进制位,按照上面的规则转成二组,最后一组除了前面加二个0以外,后面再加4个0。这样得到一个二位的Base64编码,再在末尾补上两个"="号。

使用node的buffer进行处理:

demo1.js

 const CHARTS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
 function encode(str) {
   let buf = Buffer.from(str);
   let result = '';
   let suffix = '';
   for (let b of buf) {
     result += b.toString(2).padStart(8, 0)
   }
   if ((result.length % 6) === 4) { // 一个字节的情况
     suffix = '=';
     result += '00';
   }
   if ((result.length % 6) === 2) { // 剩余两个字节的情况
     suffix = '==';
     result += '0000';
   }
   return result.match(/(\d{6})/g).map(val => parseInt(val, 2)).map(val => CHARTS[val]).join('') + suffix
 }

function decode(str) {
      var result = '';
      for (let b of str) {
        if(b==='=') break;
        result += (CHARTS.indexOf(b)).toString(2).padStart(6, 0)
      }    
      var list =  result.match(/(\d{8})/g).map((number)=>{
        return parseInt(number, 2)
      })
      return Buffer.from(list).toString('utf8')
 }
 var ss = encode('朱昆m');
 console.log(ss) // 5pyx5piGbQ==
 console.log(decode(ss)) // 朱昆m

上述代码阐述的编解码的过程。但是如果去看第三方库的代码,会发现还是看不懂的~

为什么会看不懂了?

原因:

  1. 为了兼容浏览器的Unicode编码,需要先对Unicode进行编解码。
  2. 引入二进制操作,提高位操作效率;

举例:

image.png

鹅 -> Unicode字符集(40517 十进制) -> 0b1001 1110 0100 0101(二进制)
鹅 -> utf8编码(15317381 十进制) -> 0b1110 1001 1011 1001 1000 0101(二进制)

Unicode转utf8:

  1. 将高位字节的高四位,与1110 形成一个新字节。
  2. 将高位字节的低四位,与低位字节的高两位,与10形成一个新字节
  3. 将地位字节的低六位与10 形成一个新字节。
  4. 三个新字节按顺序排布,形成一个新的编码,就是utf编码。

utf8转Unicode:
将上述的顺序翻转。就可以返回新的Unicode编码。

let _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
console.log(decode(encode('鹅')))
function encode(input) {
  var output = "";
  var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
  var i = 0;
  // 将Unicode,变成 utf8
  input = _utf8_encode(input); 
  // 将utf8 转成 base64
  while (i < input.length) {
    chr1 = input.charCodeAt(i++);
    chr2 = input.charCodeAt(i++);
    chr3 = input.charCodeAt(i++);
    enc1 = chr1 >> 2;
    enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
    enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
    enc4 = chr3 & 63;
    if (isNaN(chr2)) {
      enc3 = enc4 = 64;
    } else if (isNaN(chr3)) {
      enc4 = 64;
    }
    output = output +
      _keyStr.charAt(enc1) + _keyStr.charAt(enc2) +
      _keyStr.charAt(enc3) + _keyStr.charAt(enc4);
  }
  return output;
}
function decode(input) {
  var output = "";
  var chr1, chr2, chr3;
  var enc1, enc2, enc3, enc4;
  var i = 0;
  input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
  //将base64转化成utf8
  while (i < input.length) {
    enc1 = _keyStr.indexOf(input.charAt(i++));
    enc2 = _keyStr.indexOf(input.charAt(i++));
    enc3 = _keyStr.indexOf(input.charAt(i++));
    enc4 = _keyStr.indexOf(input.charAt(i++));
    chr1 = (enc1 << 2) | (enc2 >> 4);
    chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
    chr3 = ((enc3 & 3) << 6) | enc4;
    output = output + String.fromCharCode(chr1);
    if (enc3 != 64) {
      output = output + String.fromCharCode(chr2);
    }
    if (enc4 != 64) {
      output = output + String.fromCharCode(chr3);
    }
  }
  // 将utf8转成浏览器认识的Unicode
  output = _utf8_decode(output);
  return output;

}
function _utf8_encode(string) { // 将Unicode,变成 utf8
  string = string.replace(/\r\n/g, "\n");
  var utftext = "";
  for (var n = 0; n < string.length; n++) {
    var c = string.charCodeAt(n);
    if (c < 128) {
      utftext += String.fromCharCode(c);
    } else if ((c > 127) && (c < 2048)) {
      utftext += String.fromCharCode((c >> 6) | 192);
      utftext += String.fromCharCode((c & 63) | 128);
    } else {
      utftext += String.fromCharCode((c >> 12) | 0b11100000);
      utftext += String.fromCharCode(((c >> 6) & 0b111111) | 0b10000000);
      utftext += String.fromCharCode((c & 0b111111) | 0b10000000);
    }

  }
  return utftext;
}

function _utf8_decode(utftext) { // 将utf8转成Unicode
  var string = "";
  var i = 0;
  var c = c1 = c2 = 0;
  while (i < utftext.length) {
    c = utftext.charCodeAt(i); // 第一个字节
    if (c < 128) {
      string += String.fromCharCode(c);
      i++;
    } else if ((c > 191) && (c < 224)) {
      c2 = utftext.charCodeAt(i + 1);
      string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
      i += 2;
    } else {
      c2 = utftext.charCodeAt(i + 1); // 第一个字节
      c3 = utftext.charCodeAt(i + 2); // 第二个字节
      string += String.fromCharCode(((c & 0b1111) << 12) | ((c2 & 0b111111) << 6) | (c3 & 0b111111));
      i += 3;
    }
  }
  return string;
}

重点:上述代码中,明白二进制的移位操作,和Unicode码的转码规则。理解起来难度就不大了。

解释:

  1. Unicode字符集 相当于 字和词的汇总,相当于语言的概念;
  2. utf8编码 是一种编码格式, 相当于汉语,英语的概念。
  3. 鹅 在汉语中叫 '鹅',在 英语中叫 'goose' 汉语,英语放在计算机里面就相当于一种编码,类似utf8,gbk。

参考文档:

Base64原理

程序员必备:彻底弄懂常见的7种中文字符编码

Unicode 和 UTF-8 有什么区别

base64笔记

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 155,457评论 4 357
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 65,943评论 1 285
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 105,327评论 0 236
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,307评论 0 201
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 51,630评论 3 283
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,114评论 1 202
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,514评论 2 305
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,227评论 0 193
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,859评论 1 234
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,186评论 2 238
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,741评论 1 255
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,087评论 2 248
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,614评论 3 228
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,926评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,630评论 0 190
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,117评论 2 261
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,076评论 2 257

推荐阅读更多精彩内容

  • python3.0 base64 解密以及base64原理 python3.0 加密 >>> import bas...
    nice_o阅读 1,800评论 0 0
  •   在互联网中的每一刻,你可能都在享受着Base64带来的便捷,但对于Base64的基础原理又了解多少?今天这篇博...
    Hmilylpp阅读 287评论 0 0
  • Base64的由来 目前Base64已经成为网络上常见的传输8Bit字节代码的编码方式之一。在做支付系统时,系统之...
    飞狗未来阅读 380评论 0 0
  • 版权声明:本文为人家博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。原文链...
    yahzon阅读 288评论 0 0
  • Base64是什么? 个人理解:Base64是一种编码方式,和ASCll一样,只是一种编码方式而已,但是两者用到的...
    田心甜心阅读 520评论 0 0