crypto-js DES加密 base64 post传输

演示地址：

http://pengchenggang.gitee.io/crypto-js-des/

开源地址：

https://gitee.com/pengchenggang/crypto-js-des

需求: 前后台进行加密传输

建立个vue3的项目，进行测试crypto-js

为了演示方便 再装个 element-plus

vue create des-study
npm install crypto-js --save
npm install element-plus --save

坑点1：加密配置项 主要是和java后台配合 ECB pkcs7padding key base64 utf8 （注意这里的base64 里面是含有＋号的，post传输会丢失，要再进行一次base64的单独编码）

坑点2：key就前8位 有作用，我估计可能跟iv有关系

上代码

src\App.vue

<template>
  <div id="app-des">
    <el-card class="box-card">
      app-des-study-base64
    </el-card>

    <el-row :gutter="10">
      <el-col :span="10">
        <el-input type="textarea"
                  :rows="13"
                  placeholder="请输入内容"
                  v-model="leftValueBase64">
        </el-input>
      </el-col>
      <el-col :span="4"
              style="text-align:center;">
        <div style="height:10px;"></div>
        <el-button type="primary"
                   @click="encryptHandleBase64">encryptBase64</el-button>
        <div style="height:10px;"></div>
        <el-button type="primary"
                   @click="decryptHandleBase64">decryptBase64</el-button>
      </el-col>
      <el-col :span="10">
        <el-input type="textarea"
                  :rows="13"
                  placeholder="请输入内容"
                  v-model="rightValueBase64">
        </el-input>
      </el-col>
    </el-row>

    <div style="height:10px;"></div>

    <el-card class="box-card">
      <template #header>
        <div class="clearfix">
          <span>interpretative statement</span>
        </div>
      </template>
      <div>
        <div>需求：用DES的方式进行加密解密，通过post进行传参</div>
        <div>方案：crypto-js 进行DES加密 Pkcs7 Utf8 和密码进行加密，初始java后台用Pkcs5，后经讨论Pkcs7也是ok的。最后加一个密码</div>
      </div>
    </el-card>
  </div>
</template>

<script>
import * as CryptoDES from './crypto-js-des'
export default {
  name: 'App',
  setup () {
  },
  data () {
    return {
      leftValueBase64: '',
      rightValueBase64: '',
    }
  },
  methods: {
    encryptHandleBase64 () {
      this.rightValueBase64 = CryptoDES.encryptByBase64DES(this.leftValueBase64)
    },
    decryptHandleBase64 () {
      this.leftValueBase64 = CryptoDES.decryptByBase64DES(this.rightValueBase64)
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  margin-top: 10px;
}
.box-card {
  margin-bottom: 10px;
}
</style>

src\crypto-js-des.js

import CryptoJS from "crypto-js";

const key = 'yourKeyStr' // The first 8 passwords are valid
//DES 加密
function encryptByDES (message) {
  const keyHex = CryptoJS.enc.Utf8.parse(key);
  const encrypted = CryptoJS.DES.encrypt(message, keyHex, {
    mode: CryptoJS.mode.ECB,
    padding: CryptoJS.pad.Pkcs7
  });
  return encrypted.ciphertext.toString(CryptoJS.enc.Base64);
}

//DES 解密
function decryptByDES (ciphertext) {
  const keyHex = CryptoJS.enc.Utf8.parse(key);
  const decrypted = CryptoJS.DES.decrypt({
    ciphertext: CryptoJS.enc.Base64.parse(ciphertext)
  }, keyHex, {
    mode: CryptoJS.mode.ECB,
    padding: CryptoJS.pad.Pkcs7
  });
  return decrypted.toString(CryptoJS.enc.Utf8);
}

function strToBase64 (rawStr) {
  const wordArray = CryptoJS.enc.Utf8.parse(rawStr);
  const base64 = CryptoJS.enc.Base64.stringify(wordArray);
  return base64
}

function base64ToStr (base64) {
  const parsedWordArray = CryptoJS.enc.Base64.parse(base64);
  const parsedStr = parsedWordArray.toString(CryptoJS.enc.Utf8);
  return parsedStr
}

export function encryptByBase64DES (paramStr) {
  const des = encryptByDES(paramStr)
  return strToBase64(des)
}

export function decryptByBase64DES (base64Str) {
  const str = base64ToStr(base64Str)
  return decryptByDES(str)
}