先端の暗号化暗号jsのAES
HTTPS：// www.jianshu.com/p/a47477e8126a オリジナルのフロントエンド非常に多くの暗号化ツールキットがあります
先端の暗号化暗号jsのAES
背景
いくつかの時間前、より機密性の高いデータ、議論の後の波、フロントとリアエンドを関与アイテムを行う会社は、インタフェースは暗号化されたことを決めた、使用して AES +の BASE64 暗号化アルゴリズムを〜
オンライン AES 対称暗号化のアルゴリズムは、私がお勧めします、この1つは、特に小さなパートナーは百度に無料で理解されていない、たくさんのご紹介AES暗号化アルゴリズムの詳細な導入と実装〜話すか、非常に詳細な、
実現
実際には、我々はそれがどのように知ってもらう、ライブラリの準備ができているので、私達はちょうど私が1をお勧めしますここでは、数千万人である必要があり、まだやることは非常に簡単であるAESの暗号化と復号化を使用する方法を理解、皆を深めます AES -アルゴリズムを理解します
で、ここで私は Vue 一例として、他には何が違うのではありません-
-
使用する
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，有需要的小伙伴自行下载~