Vue项目中实现sm4 CBC、ECB加密传输

最近项目中需要对用户的账号密码传输做一个简单的加密操作，于是整理了一些简单的加密传输相关的东西，做个笔记。

1.SM算法

国密即国家密码局认定的国产密码算法。主要有SM1，SM2，SM3，SM4。密钥长度和分组长度均为128位。

1. SM1 为对称加密。其加密强度与AES相当。该算法不公开，调用该算法时，需要通过加密芯片的接口进行调用。
2. SM2为非对称加密，基于ECC。该算法已公开。由于该算法基于ECC，故其签名速度与秘钥生成速度都快于RSA。ECC 256位（SM2采用的就是ECC 256位的一种）安全强度比RSA 2048位高，但运算速度快于RSA。
3. SM3 消息摘要。可以用MD5作为对比理解。该算法已公开。校验结果为256位。
4. SM4 无线局域网标准的分组数据算法。对称加密，密钥长度和分组长度均为128位。

2.ECB和CBC两种模式

这个项目中使用AES实现密码加密解密（ECB和CBC两种模式）

1. ECB：是一种基础的加密方式，密文被分割成分组长度相等的块（不足补齐），然后单独一个个加密，一个个输出组成密文。
2. CBC：是一种循环模式（链式），前一个分组的密文和当前分组的明文操作后再加密，这样做的目的是增强破解难度。（不容易主动攻击，安全性好于ECB，是SSL、IPSec的标准）

3.项目运用

3-1 index.html全局引入

<script src="./sm4-1.js" type="text/javascript"></script>    //此处引入的sm4的包，网上有很多封装好的，自己根据情况去引用

3-2 safety.js内自己封装一个加密和解密的方法导出去

 * 加密工具函数
 * @param {String} text 待加密文本
 */
export function encrypt(text) {
  const s4 = new SM4Util();
  s4.secretKey = "22HDESaAhiHHugDz";    //key就是自定义加密key，自己定义的简单串；
  s4.iv = "1234567891011121"   //iv是initialization vector的意思，就是加密的初始话矢量，
  								初始化加密函数的变量，也叫初始向量。 
  								（本来应该动态生成的，由于项目没有严格的加密要求，直接写死一个）
  return s4.encryptData_CBC(text);
}

/**
 * 解密工具函数
 * @param {String} text 待解密密文
 */
export function decrypt(text) {
  const s4 = new SM4Util();
  s4.iv = "1234567890111111"
  s4.secretKey = "11HDESaAhiHHugDz";
  return s4.decryptData_CBC(text);
}

3-3 在组件中调用方法

html是账号密码的两个输入框，点击按钮提交，执行submit()方法
JS部分：
submit() {
  let username = document.getElementById("username").value;
  let password = document.getElementById("pwd").value;
  console.log(username, password);       //示例：账密都为qqq
  let use = encrypt(username);
  let pwd = encrypt(password);
  console.log(use, "用户名");     // KXcJJDTs1pVgfzKyvmfTZg== 用户名
  console.log(pwd, "密码");		//KXcJJDTs1pVgfzKyvmfTZg== 密码
  let params = {
    use,
    pwd,
  };
  this.$server.toLogin(params).then((res) => {
    console.log(res, "登录成功");  
  });
},

----------里面需要用的sm4加密算法的包没有链接出来，可以百度出来很多，大体差不多的，总结就是引包，定义方法，调用一下就完了，因为项目只要求sm4,CBC加密模式就可以。