一文带你学会国产加密算法SM4的vue实现方案

前言

上篇文章我们介绍了国产SM4加密算法的后端java实现方案。没有看过的小伙伴可以看一下这篇文章。
https://www.cnblogs.com/jichi/p/12907453.html
本篇文章将介绍前端vue的解决方案，和java后端互相辉映。

说起前端的vue，真的是一个非常好用的框架，vue也是现在web项目的主流前端开发方案。所以基于vue的sm4加密实现方案是十分有必要掌握的。

国产SM4加密解密算法概念介绍

SMS4算法是在国内广泛使用的WAPI无线网络标准中使用的加密算法，是一种32轮的迭代非平衡Feistel结构的分组加密算法，其密钥长度和分组长度均为128。SMS4算法的加解密过程中使用的算法是完全相同的，唯一不同点在于该算法的解密密钥是由它的加密密钥进行逆序变换后得到的。
SMS4分组加密算法是中国无线标准中使用的分组加密算法，在2012年已经被国家商用密码管理局确定为国家密码行业标准，标准编号GM/T 0002-2012并且改名为SM4算法，与SM2椭圆曲线公钥密码算法，SM3密码杂凑算法共同作为国家密码的行业标准，在我国密码行业中有着极其重要的位置。
SMS4算法的分组长度为128bit，密钥长度也是128bit。加解密算法均采用32轮非平衡Feistel迭代结构，该结构最先出现在分组密码LOKI的密钥扩展算法中。SMS4通过32轮非线性迭代后加上一个反序变换，这样只需要解密密钥是加密密钥的逆序，就能使得解密算法与加密算法保持一致。SMS4加解密算法的结构完全相同，只是在使用轮密钥时解密密钥是加密密钥的逆序。
S盒是一种利用非线性变换构造的分组密码的一个组件，主要是为了实现分组密码过程中的混淆的特性和设计的。SMS4算法中的S盒在设计之初完全按照欧美分组密码的设计标准进行，它采用的方法是能够很好抵抗差值攻击的仿射函数逆映射复合法。

SM4加密算法应用场景

SM4常用于政府系统的数据传输加密，比如当我们前端向后台传参数的时候，可以使用此算法。对参数的数据进行加密，然后后台对加密的数据进行解密再存储到数据库中，保证数据传输过程中，不受泄露。
本次提供的方案不仅提供sm4的加密解密，还提供了md5算法的完整性防篡改校验。

vue的加密方案实现流程

针对于我们的前端vue来说，我们通过axios来进行请求和响应，在我们vue的项目中，必然有一个request.js文件，用于封装request和respone。那么我们通过sm4的工具类。拦截所有的request请求进行加密，使用md5对参数进行加密，作为参数的一种防篡改表示，放在request的请求头中，供后台进行校验。在我们response的时候，同样进行拦截回应，将回应的数据的加密值进行解析。并使用md5重新加密，使我们获得的数据防篡改。

基于vue的sm4加密解密工具

我们先介绍一下vue的加密解密工具类。通过调用工具类的方法可以直接对数据进行加密解密，配合request和response即可实现。我们贴出下面的工具类代码，大家可以直接使用。

const SBoxTable = [
  [0xd6,0x90,0xe9,0xfe,0xcc,0xe1,0x3d,0xb7,0x16,0xb6,0x14,0xc2,0x28,0xfb,0x2c,0x05],[0x2b,0x67,0x9a,0x76,0x2a,0xbe,0x04,0xc3,0xaa,0x44,0x13,0x26,0x49,0x86,0x06,0x99],[0x9c,0x42,0x50,0xf4,0x91,0xef,0x98,0x7a,0x33,0x54,0x0b,0x43,0xed,0xcf,0xac,0x62],[0xe4,0xb3,0x1c,0xa9,0xc9,0x08,0xe8,0x95,0x80,0xdf,0x94,0xfa,0x75,0x8f,0x3f,0xa6],[0x47,0x07,0xa7,0xfc,0xf3,0x73,0x17,0xba,0x83,0x59,0x3c,0x19,0xe6,0x85,0x4f,0xa8],[0x68,0x6b,0x81,0xb2,0x71,0x64,0xda,0x8b,0xf8,0xeb,0x0f,0x4b,0x70,0x56,0x9d,0x35],[0x1e,0x24,0x0e,0x5e,0x63,0x58,0xd1,0xa2,0x25,0x22,0x7c,0x3b,0x01,0x21,0x78,0x87],[0xd4,0x00,0x46,0x57,0x9f,0xd3,0x27,0x52,0x4c,0x36,0x02,0xe7,0xa0,0xc4,0xc8,0x9e],[0xea,0xbf,0x8a,0xd2,0x40,0xc7,0x38,0xb5,0xa3,0xf7,0xf2,0xce,0xf9,0x61,0x15,0xa1],[0xe0,0xae,0x5d,0xa4,0x9b,0x34,0x1a,0x55,0xad,0x93,0x32,0x30,0xf5,0x8c,0xb1,0xe3],[0x1d,0xf6,0xe2,0x2e,0x82,0x66,0xca,0x60,0xc0,0x29,0x23,0xab,0x0d,0x53,0x4e,0x6f],[0xd5,0xdb,0x37,0x45,0xde,0xfd,0x8e,0x2f,0x03,0xff,0x6a,0x72,0x6d,0x6c,0x5b,0x51],[0x8d,0x1b,0xaf,0x92,0xbb,0xdd,0xbc,0x7f,0x11,0xd9,0x5c,0x41,0x1f,0x10,0x5a,0xd8],[0x0a,0xc1,0x31,0x88,0xa5,0xcd,0x7b,0xbd,0x2d,0x74,0xd0,0x12,0xb8,0xe5,0xb4,0xb0],[0x89,0x69,0x97,0x4a,0x0c,0x96,0x77,0x7e,0x65,0xb9,0xf1,0x09,0xc5,0x6e,0xc6,0x84],[0x18,0xf0,0x7d,0xec,0x3a,0xdc,0x4d,0x20,0x79,0xee,0x5f,0x3e,0xd7,0xcb,0x39,0x48],];

const FK = [0xa3b1bac6,0x56aa3350,0x677d9197,0xb27022dc];
const CK = [
  0x00070e15,0x1c232a31,0x383f464d,0x545b6269,0x70777e85,0x8c939aa1,0xa8afb6bd,0xc4cbd2d9,0xe0e7eef5,0xfc030a11,0x181f262d,0x343b4249,0x50575e65,0x6c737a81,0x888f969d,0xa4abb2b9,0xc0c7ced5,0xdce3eaf1,0xf8ff060d,0x141b2229,0x30373e45,0x4c535a61,0x686f767d,0x848b9299,0xa0a7aeb5,0xbcc3cad1,0xd8dfe6ed,0xf4fb0209,0x10171e25,0x2c333a41,0x484f565d,0x646b7279,];

const SM4_ENCRYPT = 1;
const SM4_DECRYPT = 0;

function sm4_context() {
  this.mode = 0;
  this.sk = [];
}


function GET_ULONG_BE(n,b,i) {
  return (b[i] << 24) | (b[i + 1] << 16) | (b[i + 2]) << 8 | (b[i + 3]);
}

function PUT_ULONG_BE(n,i) {
  b[i] = n >>> 24;
  b[i + 1] = n >>> 16;
  b[i + 2] = n >>> 8;
  b[i + 3] = n;
}

function ROTL(x,n) {
  const a = (x & 0xFFFFFFFF) << n;
  const b = x >>> (32 - n);

  return a | b;
}


function sm4SBox(n) {
  const l = n >>> 4;
  const r = n % 16;
  return SBoxTable[l][r];
}

function sm4Lt(ka) {
  let bb = 0;
  let c = 0;
  const a = new Uint8Array(4);
  const b = new Array(4);
  PUT_ULONG_BE(ka,a,0);
  b[0] = sm4SBox(a[0]);
  b[1] = sm4SBox(a[1]);
  b[2] = sm4SBox(a[2]);
  b[3] = sm4SBox(a[3]);
  bb = GET_ULONG_BE(bb,0);

  c = bb ^ (ROTL(bb,2)) ^ (ROTL(bb,10)) ^ (ROTL(bb,18)) ^ (ROTL(bb,24));
  return c;
}

function sm4F(x0,x1,x2,x3,rk) {
  return (x0 ^ sm4Lt(x1 ^ x2 ^ x3 ^ rk));
}

function sm4CalciRK(ka) {
  let bb = 0;
  let rk = 0;
  const a = new Uint8Array(4);
  const b = new Array(4);
  PUT_ULONG_BE(ka,0);

  rk = bb ^ (ROTL(bb,13)) ^ (ROTL(bb,23));

  return rk;
}

function sm4_setkey(SK,key) {
  const MK = new Array(4);
  const k = new Array(36);
  let i = 0;
  MK[0] = GET_ULONG_BE(MK[0],key,0);
  MK[1] = GET_ULONG_BE(MK[1],4);
  MK[2] = GET_ULONG_BE(MK[2],8);
  MK[3] = GET_ULONG_BE(MK[3],12);

  k[0] = MK[0] ^ FK[0];
  k[1] = MK[1] ^ FK[1];
  k[2] = MK[2] ^ FK[2];
  k[3] = MK[3] ^ FK[3];

  for (; i < 32; i++) {
    k[i + 4] = k[i] ^ (sm4CalciRK(k[i + 1] ^ k[i + 2] ^ k[i + 3] ^ CK[i]));
    SK[i] = k[i + 4];
  }
}

function sm4_one_round(sk,input,output) {
  let i = 0;
  const ulbuf = new Array(36);

  ulbuf[0] = GET_ULONG_BE(ulbuf[0],0);
  ulbuf[1] = GET_ULONG_BE(ulbuf[1],4);
  ulbuf[2] = GET_ULONG_BE(ulbuf[2],8);
  ulbuf[3] = GET_ULONG_BE(ulbuf[3],12);
  while (i < 32) {
    ulbuf[i + 4] = sm4F(ulbuf[i],ulbuf[i + 1],ulbuf[i + 2],ulbuf[i + 3],sk[i]);
    i++;
  }

  PUT_ULONG_BE(ulbuf[35],output,0);
  PUT_ULONG_BE(ulbuf[34],4);
  PUT_ULONG_BE(ulbuf[33],8);
  PUT_ULONG_BE(ulbuf[32],12);
}

function sm4_setkey_enc(ctx,key) {
  ctx.mode = SM4_ENCRYPT;
  sm4_setkey(ctx.sk,key);
}

function sm4_setkey_dec(ctx,key) {
  let i; let j;
  ctx.mode = SM4_ENCRYPT;
  sm4_setkey(ctx.sk,key);
  for (i = 0; i < 16; i++) {
    j = ctx.sk[31 - i];
    ctx.sk[31 - i] = ctx.sk[i];
    ctx.sk[i] = j;
  }
}

function sm4_crypt_ecb(ctx,mode,length,output) {
  let index = 0;
  while (length > 0) {
    const oneInput = input.slice(index,index + 16);
    const oneOutput = new Uint8Array(16);
    sm4_one_round(ctx.sk,oneInput,oneOutput);

    for (let i = 0; i < 16; i++) {
      output[index + i] = oneOutput[i];
    }
    index += 16;
    length -= 16;
  }
}

function sm4_crypt_cbc(ctx,iv,output) {
  let i;
  const temp = new Array(16);
  let index = 0;

  if (mode == SM4_ENCRYPT) {
    while (length > 0) {
      const oneInput = input.slice(index,index + 16);
      const oneOutput = new Array(16);
      for (i = 0; i < 16; i++) {
        oneOutput[i] = oneInput[i] ^ iv[i];
      }

      sm4_one_round(ctx.sk,oneOutput,oneOutput);

      for (i = 0; i < 16; i++) {
        iv[i] = oneOutput[i];
        output[index + i] = oneOutput[i];
      }

      index += 16;
      length -= 16;
    }
  } else /* SM4_DECRYPT */ {
    while (length > 0) {
      const oneInput = input.slice(index,index + 16);
      const oneOutput = new Array(16);
      index += 16;
      for (i = 0; i < 16; i++) {
        temp[i] = oneInput[i];
      }

      sm4_one_round(ctx.sk,oneOutput);

      for (i = 0; i < 16; i++) {
        oneOutput[i] = oneOutput[i] ^ iv[i];
        output[index + i] = oneOutput[i];
      }

      for (i = 0; i < 16; i++) {
        iv[i] = temp[i];
      }

      index += 16;
      length -= 16;
    }
  }
}

function strfix(str,len) {
  let length = len - str.length;
  while (length-- > 0) {
    str = `0${str}`;
  }
  return str;
}

function HEXStrXOR(str1,str2) {
  const buf1 = hex2Array(str1);
  const buf2 = hex2Array(str2);

  let result = '';
  for (let i = 0; i < 16; i++) {
    result += strfix((buf1[i] ^ buf2[i]).toString(16).toUpperCase(),2);
  }

  return result;
}

function hex2Array(str) {
  const len = str.length / 2;
  let substr = '';
  const result = new Array(len);
  for (let i = 0; i < len; i++) {
    substr = str.slice(2 * i,2 * (i + 1));
    result[i] = parseInt(substr,16) || 0;
  }
  return result;
}


const stringToByteArray = function (str) {
  const bytes = new Array();
  let len; let c;
  len = str.length;
  for (let i = 0; i < len; i++) {
    c = str.charCodeAt(i);
    if (c >= 0x010000 && c <= 0x10FFFF) {
      bytes.push(((c >> 18) & 0x07) | 0xF0);
      bytes.push(((c >> 12) & 0x3F) | 0x80);
      bytes.push(((c >> 6) & 0x3F) | 0x80);
      bytes.push((c & 0x3F) | 0x80);
    } else if (c >= 0x000800 && c <= 0x00FFFF) {
      bytes.push(((c >> 12) & 0x0F) | 0xE0);
      bytes.push(((c >> 6) & 0x3F) | 0x80);
      bytes.push((c & 0x3F) | 0x80);
    } else if (c >= 0x000080 && c <= 0x0007FF) {
      bytes.push(((c >> 6) & 0x1F) | 0xC0);
      bytes.push((c & 0x3F) | 0x80);
    } else {
      bytes.push(c & 0xFF);
    }
  }
  return bytes;
};

const hexStringToByteArray = function (str) {
  let pos = 0;
  let len = str.length;
  if (len % 2 !== 0) {
    return str;
  }
  len /= 2;
  const arrBytes = new Array();
  for (let i = 0; i < len; i++) {
    const s = str.substr(pos,2);
    const v = parseInt(s,16);
    arrBytes.push(v);
    pos += 2;
  }
  return arrBytes;
};
const byteArrayToHexString = function (arr) {
  let str = '';
  for (let i = 0; i < arr.length; i++) {
    let tmp = arr[i].toString(16);
    if (tmp.length == 1) {
      tmp = `0${tmp}`;
    }
    str += tmp;
  }
  return str;
};
const byteArrayToString = function (arr) {
  if (typeof arr === 'string') {
    return arr;
  }
  let str = '';
  const _arr = arr;
  for (let i = 0; i < _arr.length; i++) {
    const one = _arr[i].toString(2);
    const v = one.match(/^1+?(?=0)/);
    if (v && one.length == 8) {
      const bytesLength = v[0].length;
      let store = _arr[i].toString(2).slice(7 - bytesLength);
      for (let st = 1; st < bytesLength; st++) {
        store += _arr[st + i].toString(2).slice(2);
      }
      str += String.fromCharCode(parseInt(store,2));
      i += bytesLength - 1;
    } else {
      str += String.fromCharCode(_arr[i]);
    }
  }
  return str;
};

function SM4CryptECBWithPKCS7Padding(data,sCryptFlag) {
  const szSM4Key = 'cc9368581322479ebf3e79348a2757d9';
  if (szSM4Key.length !== 32) {
    // console.log("传入密钥[" + szSM4Key + "]长度不为32位");
    return '';
  }
  let szData = null;
  if (sCryptFlag === SM4_ENCRYPT) { // 加密
    szData = stringToByteArray(data);
  } else { // 解密
    szData = hexStringToByteArray(data);
  }
  const len = szData.length;

  if (sCryptFlag === SM4_ENCRYPT) { // 加密,进行填充PKCS7Padding
    const p = 16 - len % 16;
    for (let i = 0; i < p; i++) {
      szData.push(p);
    }
  }

  const ctx = new sm4_context();
  const lpbKey = hex2Array(szSM4Key);
  if (sCryptFlag === SM4_ENCRYPT) {
    sm4_setkey_enc(ctx,lpbKey); // 加密
  } else {
    sm4_setkey_dec(ctx,lpbKey); // 解密
  }
  const pbyCryptResult = new Array(szData.length);
  sm4_crypt_ecb(ctx,sCryptFlag,szData.length,szData,pbyCryptResult);
  if (sCryptFlag === SM4_DECRYPT) { // 解密,去除填充PKCS7Padding
    const p = pbyCryptResult[pbyCryptResult.length - 1];
    for (let i = 0; i < p; i++) {
      pbyCryptResult.pop();
    }
  }
  if (sCryptFlag === SM4_ENCRYPT) { // 加密
    return byteArrayToHexString(pbyCryptResult);
  } // 解密
  return byteArrayToString(pbyCryptResult);
}

export function encrypt(inArray) {
  return SM4CryptECBWithPKCS7Padding(inArray,1);
}

export function decrypt(inArray) {
  return SM4CryptECBWithPKCS7Padding(inArray,0);
}

如上就是我们sm4的加密解密算法。其中重要的方法就是SM4CryptECBWithPKCS7Padding，这里我们要传入两个值，第一个值是我们加密或者要解密的值，第二个是标志是加密还是解密。当为1的时候，就是加密，当为0的时候就是解密。
下面介绍一下md5加密的防篡改算法。

md5的加密算法

md5加密我们直接采用模块crypto，针对于我们的vue项目，我们先将这个module进行安装。

cnpm install crypto

安装完成后，在我们需要进行md5加密的位置，进行加密，我们在这里是在request中进行加密。下面介绍一下md5加密的使用方式。

import crypto from 'crypto';

const md5Hash = crypto.createHash('md5');
const dataJson = JSON.stringify(data);
md5Hash.update(dataJson);
md5Data = md5Hash.digest('hex');

如上我们就得到了参数的md5值。在对于后端的时候，要注意一个大坑，前端的这种加密方式，如果开头为0，并不会省略，如果后台使用bigInteger的方式，会导致后端的0直接被省略。导致md5值不一样，所以后端的md5校验推荐使用Integer的形式。

public class Md5Utils {

    public static String getMD5String(String str) {
        try {
            MessageDigest md = MessageDigest.getInstance("md5");
            md.update(str.getBytes());
            byte s[] = md.digest();
            String result = "";
            for (int i = 0; i < s.length; i++) {
                result += Integer.toHexString((0x000000FF & s[i]) | 0xFFFFFF00).substring(6);
            }
            return result;
        } catch (Exception e) {
            e.printStackTrace();
            return null;
        }
    }
}

基于vue的实例实战代码

全局变量的配置和需要加密的url

我们定义这样的两个变量。全局变量用于是否进行加密1是进行加密，0是进行解密。
在encryptUrl 中key值配置为要加密的url，value值设置成属性必须加密name属性，sex属性不加密。

const isEncrypt = '1'; // 1是加密 0是不加密
// 将所有要加密的url和key放在一起
const encryptUrl = {
  [/test/save`]: ['name'],};

针对于加密解密进行函数的封装

上面已经有了可以使用的工具类，我们对此进行递归的函数封装。

function encryptValue(pObj,pParamKeys,pDecrypt) {
  if (pObj) {
    if (Array.isArray(pObj)) {
      let i = pObj.length;
      while (i--) {
        encryptValue(pObj[i],pDecrypt);
      }
    } else if (typeof (pObj) === 'object') {
      if (pObj.constructor !== RegExp) {
        for (const k in pObj) {
          if (pObj.hasOwnProperty(k)) {
            if (typeof (pObj[k]) === 'object') {
              encryptValue(pObj[k],pDecrypt);
            } else if (pParamKeys.indexOf(k) !== -1 && pObj[k]) {
              if (pDecrypt === true) {
                // 解密
                pObj[k] = decrypt(pObj[k]);
              } else {
                pObj[k] = encrypt(pObj[k]);
              }
            }
          }
        }
      }
    }
  }
}

request的拦截方式

我们首先拦截所有请求的request的地方，进行sm4加密解密。代码如下：

axios.interceptors.request.use(
  (config) => {
    // 加密代码开始-------------------
    // 获取到当前请求的所有值
    const paramData = lodash.cloneDeep(config.data);
    // 获取到加密的url
    const urlAddr = config.url;
    let md5Data = '';
    if (paramData && isEncrypt === '1') {
      let paramKeys = [];
      for (const key in encryptUrl) {
        if (encryptUrl.hasOwnProperty(key)) {
          if (urlAddr && urlAddr.startsWith(key)) {
            paramKeys = encryptUrl[key];
            break;
          }
        }
      }
      // 获取到所有要加密的key值。
      if (paramKeys && paramKeys.length > 0) {
        let SM4cloneData = paramData;
        if (typeof (SM4cloneData) === 'string') {
          try {
            const dataStr = $.parseJSON(SM4cloneData);
            encryptValue(dataStr,paramKeys);
            SM4cloneData = JSON.stringify(dataStr);
          } catch (e) {
            console.log(e);
          }
        } else {
          encryptValue(SM4cloneData,paramKeys);
        }
      }
      const md5Hash = crypto.createHash('md5');
      const dataJson = JSON.stringify(config.data);
      md5Hash.update(dataJson);
      md5Data = md5Hash.digest('hex');
      config.data = paramData;
    }
      config.headers = {
        'md5': md5Data,};
    return config;
  }
);

response的拦截方式

针对于response我们要对配置的url进行解密。

axios.interceptors.response.use(
  (response) => {
    // 开始解密
    // 获取到当前请求的所有值
    const cloneData = lodash.cloneDeep(response.data);
    // 获取到解密的url
    const urlAddr = response.url;
    // 对paramData进行加密,此时先直接加密做试验。
    if (cloneData && isEncrypt === '1') {
      let paramKeys = [];
      for (const key in encryptUrl) {
        if (encryptUrl.hasOwnProperty(key)) {
          if (urlAddr && urlAddr.startsWith(key)) {
            paramKeys = encryptUrl[key];
            break;
          }
        }
      }
      // 获取到所有要解密的key值。
      if (paramKeys && paramKeys.length > 0) {
        let SM4cloneData;
        if (Array.isArray(cloneData)) {
          SM4cloneData = cloneData.data;
        } else if (typeof (cloneData) === 'object') {
          SM4cloneData = cloneData;
        }

        if (typeof (SM4cloneData) === 'string') {
          try {
            const dataStr = $.parseJSON(SM4cloneData);
            encryptValue(dataStr,paramKeys,true);
            SM4cloneData = JSON.stringify(dataStr);
          } catch (e) {
            console.log(e);
          }
        } else {
          encryptValue(SM4cloneData,true);
        }
        const md5Hash = crypto.createHash('md5');
        const dataJson = JSON.stringify(cloneData);
        md5Hash.update(dataJson);
        const md5Data = md5Hash.digest('hex');
        if (response.headers.md5.hasOwnProperty('md5')) {
          if (md5Data === response.headers.md5) {
            alert("md5完整性校验错误");
            return;
          }
        }
      }
      return response.data;
    }

    return response.data;
  },);

总结

支持基于vue的国产sm4加密解密方案到此结束。文中难免有不足之处，希望大家批评指正。