Vue中 实现 DES 加密和解密

简介: Vue中 实现 DES 加密和解密

1. 简介

DES是一种对称加密 (Data Encryption Standard) 算法。于1977年得到美国政府的正式许可,是一种用56位密钥来加密64位数据的方法。一般密码长度为8个字节,其中56位加密密钥,每个第8位都用作奇偶校验。

DES算法一般有两个关键点,第一个是加密算法,第二个是数据补位。加密算法常见的有 ECB 模式和 CBC 模式。


ECB 模式: ECB(电子密本方式)其实非常简单,就是将数据按照8个字节一段进行DES加密或解密得到一段段的8个字节的密文或者明文,最后一段不足8个字节(一般补0或者F),按照需求补足8个字节进行计算(并行计算),之后按照顺序将计算所得的数据连在一起即可,各段数据之间互不影响。


优点:简单、有利于并行计算、误差不会被传递;

缺点:不能隐藏明文的模式、可能对明文进行主动攻击;

CBC 模式: 密文分组链接方式,它比较麻烦,加密步骤如下:

第一组数据 D1 与向量I异或后的结果进行 DES 加密得到第一组密文C1(注意:这里有向量I的说法,ECB模式下没有使用向量I);

第二组数据 D2 与第一组的加密结果 C1 异或以后的结果进行 DES 加密,得到第二组密文 C2;

之后的数据以此类推,得到 Cn

按顺序连为 C1C2C3…Cn 即为加密结果;

优点:不容易主动攻击,安全性好于 ECB,是 SSL、IPSec 的标准;

缺点:不利于并行计算、误差传递、需要初始化向量 IV;

2. Vue中 实现 DES 加密和解密

安装 crypto-js

crypto-js npm地址

npm install crypto-js

2.1 ECB 模式

2.1.1 封装方法

// utils/des.js
import cryptoJs from 'crypto-js';
// 随机生成指定数量的16进制key(该方法非必须,也可自己指定key)
const generatekey = (num) => {
  let library = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
  let key = "";
  for (var i = 0; i < num; i++) {
    let randomPoz = Math.floor(Math.random() * library.length);
    key += library.substring(randomPoz, randomPoz + 1);
  }
  return key;
}
/*
* message:需要解密的字符串,
* key: 密钥(加密解密密钥同一个)
*/
//DES加密
const encryptDes = (message, key = 'abcd@1234') => {
  var keyHex = cryptoJs.enc.Utf8.parse(key)
  var option = { mode: cryptoJs.mode.ECB, padding: cryptoJs.pad.Pkcs7 }
  var encrypted = cryptoJs.DES.encrypt(message, keyHex, option)
  return encrypted.ciphertext.toString(); // 返回hex格式密文,如需返回base64格式:encrypted.toString()
}
//DES解密
const decryptDes = (message, key = 'abcd@1234') => {
  var keyHex = cryptoJs.enc.Utf8.parse(key)
  var decrypted = cryptoJs.DES.decrypt(
    {
      ciphertext: cryptoJs.enc.Hex.parse(message)
    }, // 若 message 是 base64 格式,则无需转16进制hex,直接传入 message 即可
    keyHex,
    {
      mode: cryptoJs.mode.ECB,
      padding: cryptoJs.pad.Pkcs7
    }
  )
  return decrypted.toString(cryptoJs.enc.Utf8)
}
export {
  generatekey,
  encryptDes,
  decryptDes,
}

2.1.2 引入使用

<script>
import { encryptDes, decryptDes,generatekey } from '@/utils/des.js'
export default {
  data() {
    return {
      info:{
        userName:'test',
        passWord:'Hi@123'
      }
    };
  },
  methods: {
    test(){
      const key = generatekey(8); // 也可直接指定key let key = 'des';
      //如果是对象/数组的话,需要先JSON.stringify转换成字符串
      const encrypts = encryptDes(JSON.stringify(this.info), key);
      const dess = JSON.parse(decryptDes(encrypts, key));
      console.log(encrypts, dess)
    }
  },
  mounted() {
    this.test();
  },
};
</script>

2.2 CBC 模式

2.2.1 封装方法

// utils/des.js
import cryptoJs from 'crypto-js';
// 随机生成指定数量的16进制key(该方法非必须,也可直接指定固定key值)
const generatekey = (num) => {
  let library = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
  let key = "";
  for (var i = 0; i < num; i++) {
    let randomPoz = Math.floor(Math.random() * library.length);
    key += library.substring(randomPoz, randomPoz + 1);
  }
  return key;
}
/*
* message: 需要加解密的文本
  key: 加解密的秘钥
  iv: 偏移量,最短8位数,ecb模式不需要此参数
*/
// 加密
const encrypt =  (message, key = 'abcd@1234', iv = 'hello world') => {
  const keyHex = cryptoJs.enc.Utf8.parse(key); // 秘钥
  const ivHex = cryptoJs.enc.Utf8.parse(iv); // 偏移量
  const option = { iv: ivHex, mode: cryptoJs.mode.CBC, padding: cryptoJs.pad.Pkcs7 }; // Pkcs7填充方式
  const encrypted = cryptoJs.DES.encrypt(message, keyHex, option);
  return encrypted.ciphertext.toString() //  加密出来为 hex格式密文
}
// 解密
const decrypt = (message, key = 'abcd@1234', iv = 'hello world') => {
  const keyHex = cryptoJs.enc.Utf8.parse(key)
  const ivHex = cryptoJs.enc.Utf8.parse(iv)
  const decrypted = cryptoJs.DES.decrypt({
    ciphertext: cryptoJs.enc.Hex.parse(message)
  }, keyHex, {
    iv: ivHex,
    mode: cryptoJs.mode.CBC,
    padding: cryptoJs.pad.Pkcs7
  })
  return decrypted.toString(cryptoJs.enc.Utf8)
}
export {
  generatekey,
  encrypt,
  decrypt,
}

2.2.2 引入使用

<script>
import { encrypt, decrypt, generatekey } from '@/utils/des.js'
export default {
  data() {
    return {
      info:{
        userName:'test',
        passWord:'Hi@123'
      }
    };
  },
  methods: {
    test(){
      const key = generatekey(8); // 也可直接指定固定key值 let key = 'des';
      //如果是对象/数组的话,需要先JSON.stringify转换成字符串
      const encrypts = encrypt(JSON.stringify(this.info), key, '12345678');
      const dess = JSON.parse(decrypt(encrypts, key, '12345678'));
      console.log(encrypts, dess)
    }
  },
  mounted() {
    this.test();
  },
};
</script>


相关文章
|
4天前
|
Java 数据安全/隐私保护
des加密+base64编码,base64解码+des解密
des加密+base64编码,base64解码+des解密
30 0
|
4天前
|
移动开发 JavaScript 安全
Vue 应用程序性能优化:代码压缩、加密和混淆配置详解
Vue 应用程序性能优化:代码压缩、加密和混淆配置详解
49 0
|
4天前
|
算法 搜索推荐 Java
DES - 对称加密算法简要介绍与JAVA实现
DES - 对称加密算法简要介绍与JAVA实现
58 2
|
4天前
|
JavaScript 安全 前端开发
【教程】 Vue混淆加密与还原
Vue是一种流行的JavaScript框架,用于构建用户界面。它简单易用且功能强大,备受开发者喜爱。然而,在传输和存储过程中,我们需要保护Vue代码的安全性。混淆是一种有效的保护措施,可以加密和压缩代码,使其难以被理解和修改。本文将介绍Vue混淆的概念以及如何进行还原。
|
4天前
|
JavaScript 前端开发 关系型数据库
金融技术解决方案:用Python和Vue开发加密货币交易平台
【4月更文挑战第11天】本文介绍了如何使用Python和Vue.js构建加密货币交易平台。首先确保安装了Python、Node.js、数据库系统和Git。后端可选择Flask或Django框架,通过RESTful API处理交易。前端利用Vue.js、Vuex和Vue Router创建用户友好的界面,并用Axios与后端通信。这种架构促进团队协作,提升代码质量和平台功能。
|
4天前
|
算法 安全 数据安全/隐私保护
C/C++学习 -- 分组加密算法(DES算法)
C/C++学习 -- 分组加密算法(DES算法)
39 0
|
4天前
|
JavaScript 前端开发 算法
JavaScript学习 -- 对称加密算法DES
JavaScript学习 -- 对称加密算法DES
25 0
|
4天前
|
JavaScript 安全 前端开发
【教程】 Vue混淆加密与还原
【教程】 Vue混淆加密与还原
109 0
|
4天前
|
JavaScript 安全 开发工具
​Vue 应用程序性能优化:代码压缩、加密和混淆配置详解
简介在 Vue 应用程序的开发中,代码压缩、加密和混淆是优化应用程序性能和提高安全性的重要步骤。 Vue CLI 是一个功能强大的开发工具,它提供了方便的配置选项来实现这些功能。本文将介绍如何使用 Vue CLI 配置代码压缩、加密和混淆功能,以提高应用程序的性能和安全性。
|
4天前
|
算法 安全 程序员
详解 DES加密技术 | 凯撒密码 | 栅栏密码
详解 DES加密技术 | 凯撒密码 | 栅栏密码
118 0