一. 简介

首先有个小Tips,1个字母字符 = 1个字节(byte) = 8位(bit),这是表示单位，Base64是网络上最常见的用于传输 8bit 的编码方式之一，Base64就是一种基于64个可打印字符来表示二进制数据的方法。

在一些网络传送渠道,有时候有些的字节字符不能被支持.比如图片的二进制流的每个字节不可能全部是可见字符,这种情况下传送不了.而Base64的机制就能很好解决这种问题,它不改变原来的协议,在原来的基础做一种扩展,基于64个可打印字符来表示二进制.

再者,有时候我们通过记事本去打开一些图片或者应用程序,会得到一大堆看不懂的乱码,因为二进制文件里面有很多无法显示和打印的字符.所以如果要让记事本能够处理二进制数据,就可以使用Base64来进行转码,将不可见的转成可见的.

二. 算法原理

1. 我们拿到一串字符,比如 abcdef.先按ASCII码编码.
2. 它会将字符串按字节数分开,每三个字节为一组. 3 byte * 8 bit === 24bit.
3. 在这组中,将24位数据按照每6位为一组,再次分成4组.
4. 然后将这四组的6位数的高位各补两个0,将其转为十进制数.
5. 进行查表,得到对应的字符,就是对应的Base64转化的字符.

那么有个问题来了,如果原始数据的位数不是3的整数倍怎么办,Base会在不足的后面用"="补足,所以这个"="只会存在在Base64码的最后,并且只会有1或者2个,不可能出现在中间.

// javaScript实现

if (!Shotgun)
    var Shotgun = {};
if (!Shotgun.Js)
    Shotgun.Js = {};
Shotgun.Js.Base64 = {
    _table: [
        'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P',
        'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f',
        'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v',
        'w', 'x', 'y', 'z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '+', '/'
    ],
  
    encode: function (bin) {
        var codes = [];
        var un = 0;
        un = bin.length % 3;
        if (un == 1)
            bin.push(0, 0);
        else if (un == 2)
            bin.push(0);
        for (var i = 2; i < bin.length; i += 3) {
            var c = bin[i - 2] << 16;
            c |= bin[i - 1] << 8;
            c |= bin[i];
            codes.push(this._table[c >> 18 & 0x3f]);
            codes.push(this._table[c >> 12 & 0x3f]);
            codes.push(this._table[c >> 6 & 0x3f]);
            codes.push(this._table[c & 0x3f]);
        }
        if (un >= 1) {
            codes[codes.length - 1] = "=";
            bin.pop();
        }
        if (un == 1) {
            codes[codes.length - 2] = "=";
            bin.pop();
        }
        return codes.join("");
    },
    decode: function (base64Str) {
        var i = 0;
        var bin = [];
        var x = 0, code = 0, eq = 0;
        while (i < base64Str.length) {
            var c = base64Str.charAt(i++);
            var idx = this._table.indexOf(c);
            if (idx == -1) {
                switch (c) {
                    case '=': idx = 0; eq++; break;
                    case ' ':
                    case '\n':
                    case "\r":
                    case '\t':
                        continue;
                    default:
                        throw { "message": "\u0062\u0061\u0073\u0065\u0036\u0034\u002E\u0074\u0068\u0065\u002D\u0078\u002E\u0063\u006E\u0020\u0045\u0072\u0072\u006F\u0072\u003A\u65E0\u6548\u7F16\u7801\uFF1A" + c };
                }
            }
            if (eq > 0 && idx != 0)
                throw { "message": "\u0062\u0061\u0073\u0065\u0036\u0034\u002E\u0074\u0068\u0065\u002D\u0078\u002E\u0063\u006E\u0020\u0045\u0072\u0072\u006F\u0072\u003A\u7F16\u7801\u683C\u5F0F\u9519\u8BEF\uFF01" };
  
            code = code << 6 | idx;
            if (++x != 4)
                continue;
            bin.push(code >> 16);
            bin.push(code >> 8 & 0xff);
            bin.push(code & 0xff)
            code = x = 0;
        }
        if (code != 0)
            throw { "message": "\u0062\u0061\u0073\u0065\u0036\u0034\u002E\u0074\u0068\u0065\u002D\u0078\u002E\u0063\u006E\u0020\u0045\u0072\u0072\u006F\u0072\u003A\u7F16\u7801\u6570\u636E\u957F\u5EA6\u9519\u8BEF" };
        if (eq == 1)
            bin.pop();
        else if (eq == 2) {
            bin.pop();
            bin.pop();
        } else if (eq > 2)
            throw { "message": "\u0062\u0061\u0073\u0065\u0036\u0034\u002E\u0074\u0068\u0065\u002D\u0078\u002E\u0063\u006E\u0020\u0045\u0072\u0072\u006F\u0072\u003A\u7F16\u7801\u683C\u5F0F\u9519\u8BEF\uFF01" };
  
        return bin;
    }
};

三. 应用

• Base64编码可用于在HTTP环境下传递较长的标识信息.
• 电子邮件:有些文本协议不支持不可见字符的传递，只能用大于32的可见字符来传递信息
• Base64 也会经常用作一个简单的“加密”来保护某些数据，而真正的加密通常都比较繁琐.
• 垃圾讯息传播者用Base64来避过反垃圾邮件工具，因为那些工具通常都不会翻译Base64的讯息.
• 前端在实现页面一些比较小的图片，通常会选择将图片内容直接内嵌在页面中，避免不必要的外部资源加载，增大页面加载时间，但是图片数据是二进制数据，该怎么嵌入呢？绝大多数现代浏览器都支持一种名为 Data URLs 的特性，允许使用Base64对图片或其他文件的二进制数据进行编码，将其作为文本字符串嵌入网页中。比如webpack工具中的url-loader默认将8kb以下的图片编译成Base64码嵌在引用文件中.

四. 前端应用

crypto-js：功能强大,不止处理Base64,支持的模块非常多,star数目前6k+,前后端可用

//后端 npm包管理
npm install crypto-js

import sha256 from 'crypto-js/sha256';
import hmacSHA512 from 'crypto-js/hmac-sha512';
import Base64 from 'crypto-js/enc-base64';

const message, nonce, path, privateKey; // ...
const hashDigest = sha256(nonce + message);
const hmacDigest = Base64.stringify(hmacSHA512(path + hashDigest, privateKey));

//前端 Brower管理
bower install crypto-js

js-Base64：专门处理Base64,目前star数2k+,前后端均可用

//安装
$ npm install --save js-base64
//如果你使用的es6语法,需要转载这个进行语法转换
$ npm install --save babel-preset-env

//node.js
var Base64 = require('js-base64').Base64;
//es6+
import { Base64 } from 'js-base64';

//非常轻快的使用体验
Base64.encode('dankogai');  // ZGFua29nYWk=
Base64.encode('小飼弾');    // 5bCP6aO85by+
Base64.encodeURI('小飼弾'); // 5bCP6aO85by

五. 解密

如果你看懂了以上的算法原理,那么解密其实不是太大的问题,只要你遵循这个规则进行逆推运算,就可以得到原始数据.所以严格上说Base64并不是什么加密,只是编译过后的并不是明文而已

链接: https://www.fly63.com/article/detial/2945