前端的加密解密

[cookiepool]

普通的浏览器base64转解码

我们借助浏览器的atob和btoa来实现base64的解码和转码。

• btoa方法实现转码

let str = 'hello, world!';
window.btoa(str); // 输出 aGVsbG8sIHdvcmxkIQ==

• atob方法实现解码

window.atob('aGVsbG8sIHdvcmxkIQ=='); // 输出 hello, world!

但是这个方法有个问题，不支持中文，哪怕你的字符串里面用了中文标点都不行。可以借助encodeURIComponent和decodeURIComponent来转换一下中文。

关于encodeURI和encodeURIComponent的区别

• encodeURI()不会对本身属于URI的特殊字符进行编码，例如冒号、正斜杠、问号和井字号；而encodeURIComponent()则会对它发现的任何非标准字符进行编码。

• encodeURIComponent()

let str = 'HELLO, 世界！';
window.btoa(window.encodeURIComponent(str)); 
// 输出 "SEVMTE8lMkMlMjAlRTQlQjglOTYlRTclOTUlOEMlRUYlQkMlODE="

• decodeURIComponent()

window.decodeURIComponent(window.atob('SEVMTE8lMkMlMjAlRTQlQjglOTYlRTclOTUlOEMlRUYlQkMlODE='));
// 输出 "HELLO, 世界！"

使用crypto-js进行加解密

AES加密（对称加密）

使用AES加密则需要设置key和偏移量。

• 安装和引入crypto-js

npm install crypto-js

import CryptoJS from 'crypto-js';

• 定义key和iv

// 定义一个key，为了避免补位，使用16进制数形成16位字符串，以下的key仅做测试用
// 使用parse将utf8编码转换成WordArray对象
let key = CryptoJS.enc.Utf8.parse('0123456789ABCDEF');
// 定义偏移量，跟key的定义方式相同
let iv = CryptoJS.enc.Utf8.parse('FEDCAB9012345678');

• 加密

// aes加密
function encrypt_aes(data) {
  // 判断一下传过来的是字符串还是对象
  let finalData;
  if(typeof data === 'string') {
    finalData = CryptoJS.enc.Utf8.parse(data);
  }else if(typeof data === 'object') {
    finalData = CryptoJS.enc.Utf8.parse(
      // 传过来是对象的话要转换成JSON字符串在转
      JSON.stringify(data)
    );
  }

  // 进行AES加密
  let encrypted = CryptoJS.AES.encrypt(finalData, key, {
    iv: iv,
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.Pkcs7
  });
  
  return encrypted.ciphertext.toString();
}

• 解密

// aes解密
function decrypt_aes(data) {
  let strData = CryptoJS.enc.Base64.stringify(
    CryptoJS.enc.Hex.parse(data)
  );

  // 解密
  let decrypted = CryptoJS.AES.decrypt(strData, key, {
    iv: iv,
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.Pkcs7
  })

  return decrypted.toString(CryptoJS.enc.Utf8).toString();
}

参考资料

crypto-js官方API文档

前端加密JS库--CryptoJS 使用指南

前端 crypto-js aes 加解密

crypto-js与php aes加密传输

前端加密解密之Crypto.js

数据传输加密——非对称加密算法RSA+对称算法AES(适用于java,android和Web)