前端vue2使用国密SM4进行加密、解密

SM4是一种对称加密算法,也被称为国标SM4。它是在中国的国家密码标准下开发的,主要用于保护电子数据的机密性和完整性。

SM4算法采用分组密码工作方式,其分组长度为128位,密钥长度为128位、192位或256位。它是一种分组长度和密钥长度都可变的分组密码,其使用的密钥长度取决于实际应用场景的安全需求。

SM4加密有两种模式:ECB和CBC。

ECB模式是最简单的块密码加密模式,加密前根据加密块大小分成若干块,之后将每块使用相同的密钥单独加密,解密同理。这种模式的优点在于简单和有利于并行计算,而且误差不会被传送。然而,ECB模式不能隐藏明文的模式,可能对明文进行主动攻击。

CBC模式则是一种循环模式(链式),前一个分组的密文和当前分组的明文操作后再加密,这样做的目的是增强破解难度。这种模式不容易主动攻击,安全性好于ECB,适合传输长度长的报文,是SSL、IPSec的标准。然而,CBC模式不利于并行计算,误差传递,还需要初始化向量IV。

这里是在vue2的项目里使用,具体使用方法如下:

1、安装gm-crypt依赖

npm install gm-crypt

2、在utils文件下新建sm4Util.js

// sm4Utils.js
const SM4 = require("gm-crypt").sm4;
const pwdKey = "pwdKeyketihuan"; //"pwdKeyketihuan"; 密钥  前后端一致即可,后端提供
let sm4Config = {
      key: pwdKey, //这里这个key值要与后端的一致,后端解密是根据这个key
      mode: "cbc",  // 加密的方式有两种,ecb和cbc两种,也是看后端如何定义的
      iv: 'woshiiv', //iv是cbc模式的第二个参数,也需要跟后端配置的一致, ecb不用iv。 iv是initialization vector的意思,就是加密的初始话矢量,初始化加密函数的变量,也叫初始向量。(本来应该动态生成的,由于项目没有严格的加密要求,直接写死了)
      cipherType: "base64"
    };

const sm4Util = new SM4(sm4Config); // new一个sm4函数,将上面的sm4Config作为参数传递进去。
    
/* 
 * 加密工具函数
 * @param {String} text 待加密文本
 */
export function encrypt(text) {
	try {
  		return sm4Util.encrypt(text, pwdKey);
  	} catch {
  		return text;
  	}
}

/*
 * 解密工具函数
 * @param {String} text 待解密密文
 */
 export function decrypt(text) {
  try {
  		return sm4Util.decrypt(text, pwdKey);
  	} catch {
  		return text;
  	}
}

3、可以直接在使用的文件里面引用使用

方法一

import { encrypt, decrypt } from "@/utils/sm4Util.js" //引入sm4.js  
let passWord = '1q2w3e4r';
// 加密
let passSm4en = encrypt(passWord);
// 解密
let passSm4de = decrypt(passSm4en);

4、或者在utils下面新建propFormat.js

// propFormat.js
import { encrypt, decrypt } from "@/utils/sm4Util.js" //引入sm4.js  
let propFormat = {
    // sm4加密
    encryptFormat: function(str) {
        if (str) {
            return encrypt(str);
        } else {
            return '';
        }
    },
    // sm4解密
    decryptFormat: function(str) {
        if (str) {
            return decrypt(str);
        } else {
            return '';
        }
    }
}

export default propFormat; 

方法二

let passWord = '1q2w3e4r';
// 加密
let passSm4en = this.$util.propFormat.encryptFormat(passWord);
// 解密
let passSm4de = this.$util.propFormat.decryptFormat(passSm4en);

方法三

这种一般用在div展示的时候,直接解密展示

在propFormat.js同级的index.js里面引入工具类,并导出

// index.js
// 引入所有的工具类
...
import propFormat from './propFormat.js'
...
// 导出在一个对象上
export default {
    ...
    propFormat,
    ...
}

在main里面注入全局

// main.js
...
import vueFilter from './utils/propFormat.js'
...

for (let i in vueFilter) {
    Vue.filter(i, vueFilter[i])
}

// 使用

// 解密
<div class='password'>{{ password | decryptFormat }}</div>
Logo

前往低代码交流专区

更多推荐