使用cryptoJS进行数据加密与后台进行交互

使用cryptoJS进行数据加密后台进行交互

在项目开发中经常会遇到敏感数据传递给后台,在传输的过程中为了防止数据被劫持,关键的数据经常需要用于加密传输,然后在后端进行解密操作处理验证,一般加密会有对称加密和非对称加密.

因为项目中需要用到加密,查了一下文档,前端加密的js文档貌似只看到了利用cryptoJS用来加密的,首先在加密之前我们需要引入该js文件,其引入方式有两种:

第一种通过npm安装

$ npm install jsencrypt --save

我们在上面安装js依赖之后完成了第一步,接下来我们写两个函数用于加密Encrypt()和解密Decrypt()

//utils.js
/* eslint-disable */
import CryptoJS from 'crypto-js'
/*
*工具类
 */
const key = CryptoJS.enc.Utf8.parse("ECB58E330HIKNJHG");  //十六位十六进制数作为密钥
const iv = CryptoJS.enc.Utf8.parse('ECB58E330HIKNJHG');   //十六位十六进制数作为密钥偏移量 不必一样
//解密方法
function Decrypt(word) {
    // let encryptedHexStr = CryptoJS.enc.Hex.parse(word); // 如果后台输出的是hex格式加密数据
    // let srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr);
    let decrypt = CryptoJS.AES.decrypt(word, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
    let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
    return decryptedStr.toString(); // 如果后台输出的是base64格式数据
    // return CryptoJS.enc.Utf8.stringify(decrypt).toString(); // 如果后台输出的是hex格式加密数据
}
//加密方法
function Encrypt(word) {
    let srcs = CryptoJS.enc.Utf8.parse(word);
    let encrypted = CryptoJS.AES.encrypt(srcs, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
    return encrypted.toString(); // 如果后台输出的是base64格式数据
    // return encrypted.ciphertext.toString().toUpperCase(); // 如果后台输出的是hex格式加密数据
}

export default {
    Decrypt ,
    Encrypt
}

然后在html文件中导入这两个函数就可以使用

// test.vue
import Utils from '@/assets/js/utils.js'
// ...
created () {
    this.phone = Utils.Decrypt(this.$route.query.phone) //后端参数解密在前端展示
    // ...
},
methods: {
	 login () {
      if (!this.phone || !this.verifyCode) {
        return Toast('手机号或验证码不能为空')
      }
      const data = { //前端参数加密传递
        phone: Utils.Encrypt(this.phone),
        // ...
      }
      apiGetToken(data).then(res => {
        if (res.status === 200) {
        	// to do
        }
      })
}

大家看上面utils.js大家会发现有几行代码是被注释掉了,因为在这其中踩过坑了,后台返回的是base64的加密数据,然后前端用hex格式的一直解析不出来,后来尝试了许多次发现加密数据类型不一样

最好建议使用hex格式类型的数据,因为后端返回的base64的数据推送的链接经过浏览器url解析转码,’+'加号被自动转码成%20,然后解码%20后成为空格导致一直解码解不出来,如果不需要通过浏览器地址转码的情况两种都可以.

第二种通过cdn地址引入,cdn的地址和各种版本

<script src="https://cdn.bootcss.com/jsencrypt/2.3.1/jsencrypt.js"></script>

前端也可以利用cryptoJS将敏感数据加密保存到本地cookie或者session,有时候怕cdn加载不稳定的话,可以把js文件下载到本地项目中,然后通过js文件引入

引入这个js会暴露一个JSEncrypt对象我们在下面写加解密函数

// test.vue
// ...
created() {
    if (Cookies.getJSON("userInfo")) {
      this.loginForm.userName = this.Decrypt(this.loginForm.userName); // 解密用户名
      // ...
    }
},
methods: {
    /* eslint-disable */
	Decrypt(word) { // 解密方法
      let encrypt = new JSEncrypt(); 
      let pri_keys ="MIICeAIBADANBgkqlC7VPMmEOtPV0..."; //私匙 // 很长很长...
      encrypt.setPublicKey(pri_keys);
      let cleartext = encrypt.decrypt(word);
      return cleartext;
    },
    Encrypt(word) { //加密方法
      let encrypt = new JSEncrypt();
      let pub_key = "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC...";//公匙 // 也很长很长...
      encrypt.setPublicKey(pub_key);
      let ciphertext = encrypt.encrypt(word);
      return ciphertext;
    },
    login() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          let formData = new FormData();
          formData.append("username", this.loginForm.userName);
          // ...
          apiLogin(formData).then(res => {
            if (res.status == 200) {
              let userInfo = { ...this.loginForm };
              userInfo.userName = this.Encrypt(userInfo.userName); // 加密
              // to do...
          })
}

附:
密匙在线生成地址