演示地址:
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-OS X-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)
- }
来源: http://www.bubuko.com/infodetail-3716479.html