在Vue项目中利用Crypto-js库进行MD5和DES加密的方法

一、前言

对数据加密是我们开发项目过程中，必不可少的一个环节，在这个数据透明的时代，尽最大努力保护我们的用户数据。

加密的方式比较多，这里采用md5加密签名，采用des加密数据内容。

插件我们采用crypto-js，这个前端加密库里，集成了很多加密方法，aes、des、TripleDES（3des）、rc4、SHA-1、SHA-256等等。

二、两种加密方式

我们统一默认安装crypto前端级

import CryptoJS from 'crypto-js' 

1、md5

（1）md5介绍

MD5的全称是Message-Digest Algorithm 5。MD5加密算法是一种单向加密的手段，属于计算机安全领域中的散列加密，使用的是Hash算法。

MD5加密之后是一个字符串，是一个定长的32位的字符串。MD5先将原来的数据变成一个16个字节的数组，然后将这个长度为16的字节数组用16进制表示，这个16进制的字符串就是加密最后的结果。

MD5是不可逆的，即无法从结果反推出来原始数据，且MD5具有抗碰撞性，即明文不同，加密之后的字符串基本不同。

（2）md5应用场景

用户密码保护

数据库存放的是加密过的密码，之后登录的时候，密码经过md5换算，去匹配两个字符串，相同则允许登录。

文件完整性校验

发送前计算一下文件的md5值，接收完之后，再计算一次md5值，两次相同就证明文件是完整的。

云盘秒传 云盘上传文件时，同样是计算md5值，然后搜索数据库，存在就使用已有的文件，进度直接干满。

数字发布

程序发布到应用市场前，计算程序的md5值，然后从市场下载，重新计算md5值，可以匹配得出程序是否被篡改。

接口校验

前端请求接口时，将请求路径和请求方式合并经过MD5加密，添加到请求头中，后端匹配MD5值，精准定位到对应接口。

（3）使用方法

使用方法比较简单，直接调用MD5函数即可

定义好MD5方法，str是要加密的字符串，strMD5则是调用MD5方法之后，得到的加密串。

MD5方法后面的toString和toLowerCase看个人，主要作用是将MD5加密串转换成字符串，并全部小写。

export const md5 = str => CryptoJS.MD5(str).toString().toLowerCase()

const str = '1234637'
const strMd5 = md5(str)

这里插一个小知识点。

我在实际项目过程中，这个要加密的str我们是首先经过处理的，会调用encodeURIComponent方法，将其转换成ASCII编码，不过这里有个小问题，就是前端的encodeURIComponent方法，不会对这些字符- _ . ! ~ * ' ( )做转换，但是java后端的同名方法，则是会做转换的，所以如果加密过程中有以下字符，就需要额外处理一下。

这是他们对应的5个编码，其他几个没列出来的符号，java似乎也是直接使用的，就前后端相同。

const exexArr = ['%21', '%7E', '%28', '%29', '%27']
const exArr = ['!','~','(', ')', '\'']

2、des加密

（1) des介绍

des是比较传统的一种加密方式，它是对称密钥加密算法，加解密均用相同密钥，一般是前后端都持有该密钥。加密前的明文是64位，密钥总长度是64位，密钥实际长度56位，因为有8个奇偶校验位（第8、16、24、32、40、48、56、64位），加密后的密文也为64位。

加密过程

明文64位->初始置换IP->生成子密钥->在密钥控制下进行16轮加密变换->交换左右32比特->逆初始置换IP-1->密文64位。

安全性

在不知道密钥的情况，只有穷举法能暴力破解，des密钥长度56位，3des密钥长度168位，想要暴力破解都必须消耗大量计算力。

（2）des应用场景

在前端领域，一般是用于大量非敏感数据的加密使用。

由于前端项目中也持有密钥，而且是明文存储，所以基本也是被认定为安全性低的加密方法。一旦密钥被窃取，基本加密就是摆设。

但对于一般的情景来说，des已经是够用了。

如果你觉得不够安全，想提高安全性，可以使用进阶版本的3des，或者新版本的aes加密。

（3）使用方法

我们封装好加密方法，接收两个参数，word是加密的字符串，ketStr是密钥串（不传就使用默认的）， 密钥和需要加密的字符串我们调用DES.encrypt方法进行加密，填充方式选择Pkcs5，8字节填充的方式。

加密函数

 encrypt(word, keyStr) {
    keyStr = keyStr || 'ssjsja' // 密钥设置默认值，有传入则以传入的为准
    var key = CryptoJS.enc.Utf8.parse(keyStr) // Latin1 w8m31+Yy/Nw6thPsMpO5fg==
    var srcs = CryptoJS.enc.Utf8.parse(word)
    var encrypted = CryptoJS.DES.encrypt(srcs, key, { mode: CryptoJS.mode.ECB, pad: CryptoJS.pad.Pkcs5 })
    return encrypted.toString()
  }
  

解密函数的思路也是如此，不过调用的是DES.decrypt方法进行解密操作，得到的编码也是经过转码才可以变为字符串。

解密函数

 // 解密
  decrypt(word, keyStr) {
    keyStr = keyStr || 'ssjsja'
    var key = CryptoJS.enc.Utf8.parse(keyStr) // Latin1 w8m31+Yy/Nw6thPsMpO5fg==
    var decrypt = CryptoJS.DES.decrypt(word, key, { mode: CryptoJS.mode.ECB, pad: CryptoJS.pad.Pkcs5 })
    return CryptoJS.enc.Utf8.stringify(decrypt).toString()
  }
  

之后也是直接调用函数就可以得到解密/解密之后的字符串了。

一般的做法都是封装成组件，这种通用的方法最适合挂载到main.js里供全局使用。

三、小结

今天带大家熟悉了两种常见的加密算法，md5和des，下期给大家讲讲，sm2和aes这种更高安全性的加密算法。

ps: 我是地霊殿__三無