The distal end encryption crypto-js aes
HTTPS: // www.jianshu.com/p/a47477e8126a original front end there are so many cryptographic toolkit
The distal end encryption crypto-js aes
background
Some time ago the company to do items, which involved the more sensitive data, wave after discussion, the front and rear end decided interface encrypted, using the AES + BASE64 encryption algorithm ~
Online concerning AES the algorithm of symmetric encryption introduce a lot of, this one is not particularly understand the small partners are free to Baidu, I recommend a detailed introduction and implementation of AES encryption algorithm , speaking or very detailed ~
Implementation
In fact, we get to know how it is, it is still quite easy to do, because the library is ready, we just need to be a thousand million, here I recommend one understand how to use AES encryption and decryption , deepen everyone AES - understand the algorithm
Here I am at Vue as an example, the other is not any different -
-
Use
AESencryption algorithm, we need to introducecrypto-js,crypto-jsis a purejavascriptwrite encryption algorithm libraries, can be very easily injavascriptcarry onMD5,SHA1,SHA2,SHA3,RIPEMD-160hashes, beAES,DES,Rabbit,RC4,Triple DESencryption and decryption, we can usenpm install crypto-js --saveto download and install, you can also go directly to GitHub Download Source - -
Secondly, we need to define two methods are used to encrypt and decrypt, here I put it in a
utilsfolder, namedsecret.js, specific code is as follows:
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 } The above code key is the key, iv is a key offset, this is generally returned interface, for convenience, we are here defined here directly.
It is noted that the length of the key, since the decryption algorithm is a symmetric AES-128-CBCalgorithm, data were PKCS#7 filled, so there is key need to 16!
Next we define a deciphering method Decrypt and the encryption method Encrypt . Finally export default , to facilitate the introduction thereof when required to expose ~
ok, the core code so much, it is not very simple ah, in fact, what have you think so complex Kazakhstan, the rest is show you how to use slightly ~
Examples
Here I define a index.vue for encryption and decryption of data showing the operation ~
加密操作： 假设我们现在要给后端发送一段文字，暂且定义为 This is a clear text ， 在发送之前我们需要对其进行加密操作，这时候我们可以调用上面介绍的 Encrypt 方法，通过加密后我们可以得到密文为：4ACEA01505ADAF9FB59A03B22FC1EF1B244AE28DDACFDFAEFA7E263655C44357
解密操作： 假设我们请求后端接口，后端返回了我们一堆如下的字符串 BBFE62335C28821AD2F4043B715BB0C3E45734908254666526DCFD86A605F3AF , 这让我很蒙蔽啊，这时候就要调用 Decrypt 方法，
通过解密我们可以拿到后端返回的信息其实是：{"name":"Chris","sex":"male"}
结语
至此，你已经 get 了前端 AES 加解密的方法，是不是感觉很简单啊，用起来很简单，原理可不简单，况且这也只是其中的一种方案，关于加解密的方法还有很多，感兴趣的小伙伴们可以继续做一些深入的研究哈~
至于我呢。。
对了，代码已上传到 GitHub，有需要的小伙伴自行下载~