cvmachine.com - 申博开户网

查找: 您的方位主页 > 网络频道 > 阅览资讯:前端对称加密

前端对称加密

2019-03-29 06:33:51 来历:www.cvmachine.com 【

前端 crypto-js AES 加解密

网上关于 AES 对称加密的算法介绍挺多的,对这一块还不是特别了解的小伙伴可自行百度,这儿我引荐一篇AES加密算法的详细介绍与完成,讲的仍是蛮详细的~

详细完成

其实搞懂了是怎样一回事,做起来仍是挺简略的,因为库都是现成的,咱们只需求会用就好啦,这儿我在引荐一篇了解AES加密解密的运用办法,加深咱们对 AES 算法的了解~

这儿我以 Vue 作为比如,其他的也就迥然不同了~

  1. 要用 AES 算法加密,首要咱们要引进 crypto-js ,crypto-js 是一个纯 javascript 写的加密算法类库 ,能够十分便利地在 javascript 进行 MD5、SHA1、SHA2、SHA3、RIPEMD-160 哈希散列,进行 AES、DES、Rabbit、RC4、Triple DES 加解密,咱们能够选用 npm install crypto-js --save 进行下载安装,也能够直接去 GitHub下载源码~

  2. 其次咱们需求界说两个办法 ,分别是用于加密和解密,这儿我将它放在了 utils 文件夹下,命名为 secret.js ,其详细代码如下:

  const CryptoJS = require('crypto-js'); //引证AES源码js
  
  const key = CryptoJS.enc.Utf8.parse("1234123412ABCDEF"); //十六位十六进制数作为密钥
  const iv = CryptoJS.enc.Utf8.parse('ABCDEF1234123412');  //十六位十六进制数作为密钥偏移量
  
  //解密办法
  function Decrypt(word) {
    let encryptedHexStr = CryptoJS.enc.Hex.parse(word);
    let srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr);
    let decrypt = CryptoJS.AES.decrypt(srcs, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
    let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
    return decryptedStr.toString();
  }
  
  //加密办法
  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.ciphertext.toString().toUpperCase();
  }
  
  export default {
    Decrypt ,
    Encrypt
  }

上面的代码中的 key 是密钥 ,iv 是密钥偏移量,这个一般是接口回来的,为了便利,咱们这儿就直接在这儿界说了。

值得注意的是密钥的长度,因为对称解密运用的算法是 AES-128-CBC算法,数据选用 PKCS#7 填充 , 因而这儿的 key 需求为16位!

接着咱们界说了 解密办法Decrypt 和 加密办法 Encrypt ,最终经过 export default 将其露出出去,便利在需求的时分进行引进~

ok,中心代码就这么多,是不是很简略啊,其实也么有你想的那么杂乱哈,剩余的便是展现一下怎样运用咯~

示例

这儿我界说了一个 index.vue 用来展现数据加解密的操作~
加密操作: 假定咱们现在要给后端发送一段文字,暂时界说为 This is a clear text , 在发送之前咱们需求对其进行加密操作,这时分咱们能够调用上面介绍的 Encrypt 办法,经过加密后咱们能够得到密文为:4ACEA01505ADAF9FB59A03B22FC1EF1B244AE28DDACFDFAEFA7E263655C44357
前端对称加密
解密操作: 假定咱们恳求后端接口,后端回来了咱们一堆如下的字符串 BBFE62335C28821AD2F4043B715BB0C3E45734908254666526DCFD86A605F3AF , 这让我很遮盖啊,这时分就要调用 Decrypt 办法,
经过解密咱们能够拿到后端回来的信息其实是:{"name":"Chris","sex":"male"}
前端对称加密

结语

至此,你现已 get 了前端 AES 加解密的办法,是不是感觉很简略啊,用起来很简略,原理可不简略,何况这也仅仅其间的一种计划,关于加解密的办法还有许多,感兴趣的小伙伴们能够持续做一些深化的研讨哈~

对了,代码已上传到 GitHub,有需求的小伙伴自行下载~

 
 

本文地址:http://www.cvmachine.com/a/question/99831.html
Tags: 前端 aes crypto-js
修改:申博开户网
关于咱们 | 联络咱们 | 大发体育 | 网站地图 | Sitemap | App | 回来顶部