base64加密及方式

一、base64编码

base64编码原理

目的：出于数据加密的目的或者网络协议的限制或者特殊字符的处理等，通常需要将原文转换为base64编码，比如：前台传递的SQL、特殊参数、发送某些含有 ASCII 码表中 0 到 31 之间的控制字符的数据。

二、使用方式

1.直接应用js-base64库(推荐)

(1)安装依赖

• Js中安装依赖

//方式一	：
	//1.手动下载依赖包
	//2.直接引入，例如：
	<script src="base64.js"></script>
//方式二：直接从官网引入
<script src="https://cdn.jsdelivr.net/npm/[email protected]/base64.min.js"></script>

• ES6中安装依赖

//安装依赖
//方式一（推荐）
npm install --save js-base64
//方式二
npm install base-64 --save
//方式三
yarn add base-64

(2)引入依赖

• ES6

import { Base64 } from 'js-base64';
//或者
// or if you prefer no Base64 namespace
import { encode, decode } from 'js-base64';

• node.js (commonjs)

const {Base64} = require('js-base64');
//您还可以使用ESM来import代替require
require=require('esm')(module);
import {Base64} from 'js-base64';

(3).使用案例

• 概要

let latin = 'dankogai';
let utf8  = '小飼弾'
let u8s   =  new Uint8Array([100,97,110,107,111,103,97,105]);

//1.加密

Base64.encode(latin);             // ZGFua29nYWk=
Base64.encode(latin, true));      // ZGFua29nYWk 跳过填充
Base64.encodeURI(latin));         // ZGFua29nYWk
Base64.btoa(latin);               // ZGFua29nYWk=
Base64.btoa(utf8);                // 引发异常
Base64.fromUint8Array(u8s);       //  ZGFua29nYWk=
Base64.fromUint8Array(u8s, true); // ZGFua29nYW 这是 URI 安全的
Base64.encode(utf8);              // 5bCP6aO85by+
Base64.encode(utf8, true)         // 5bCP6aO85by-
Base64.encodeURI(utf8);           // 5bCP6aO85by-

//2.解密
Base64.decode(      'ZGFua29nYWk=');// dankogai
Base64.decode(      'ZGFua29nYWk'); // dankogai
Base64.atob(        'ZGFua29nYWk=');// dankogai
Base64.atob(        '5bCP6aO85by+');// 'å°�飼弾'  这是无意义的
Base64.toUint8Array('ZGFua29nYWk=');// u8s above
Base64.decode(      '5bCP6aO85by+');// 小飼弾
// note .decodeURI() is unnecessary since it accepts both flavors ==> 注意 .decodeURI() 是不必要的
Base64.decode(      '5bCP6aO85by-');// 小飼弾

• 内置扩展

// you have to explicitly extend String.prototype
Base64.extendString();
// once extended, you can do the following
'dankogai'.toBase64();        // ZGFua29nYWk=
'小飼弾'.toBase64();           // 5bCP6aO85by+
'小飼弾'.toBase64(true);       // 5bCP6aO85by-
'小飼弾'.toBase64URI();        // 5bCP6aO85by- ab alias of .toBase64(true)
'小飼弾'.toBase64URL();        // 5bCP6aO85by- an alias of .toBase64URI()
'ZGFua29nYWk='.fromBase64();  // dankogai
'5bCP6aO85by+'.fromBase64();  // 小飼弾
'5bCP6aO85by-'.fromBase64();  // 小飼弾
'5bCP6aO85by-'.toUint8Array();// u8s above

// 你必须显式地扩展 Uint8Array.prototype
Base64.extendUint8Array();
// 一旦扩展，您可以执行以下
u8s.toBase64();     // 'ZGFua29nYWk='
u8s.toBase64URI();  // 'ZGFua29nYWk'
u8s.toBase64URL();  // 'ZGFua29nYWk' an alias of .toBase64URI()

Base64.toBase64(str);

// 一次性扩展所有
Base64.extendBuiltins()

• decode() vs .atob (and .encode() vs btoa())
  假设你有：

var pngBase64 = 
"iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=";

• 这是 Base64 编码的 1x1 透明 PNG，请勿使用 Base64.decode(pngBase64). 使用Base64.atob(pngBase64)来代替。 Base64.decode()解码为 UTF-8 字符串，同时Base64.atob()解码为字节，这与浏览器内置兼容atob()（node.js 中不存在）。相同的规则适用于相反的方向。

• 或者甚至更好，Base64.toUint8Array(pngBase64)。

可参考：快速通道

2.直接使用window.btoa() 编码，使用window.atob() 解码

案例：

注意：此方式只支持ASCII 编码 ,如果编码中有中文或者sql中的特殊字符等则会报错：The string to be encoded contains characters outside of the Latin1 range…

如果要对中文进行编码转换，需要通过如下方式进行

//编码
window.btoa(unescape(encodeURIComponent('个人个人个人和')))
//解码
decodeURIComponent(escape(window.atob('5Liq5Lq65Liq5Lq65Liq5Lq65ZKM'))))

三 JS base64和图片 相互转换

案例参考