フロントエンドは AES (ECB、CBC モード) を通じて暗号化および復号化します。

暗号化要件

1. プロジェクト開発中、インターフェイス パラメーターの機密情報を暗号化して送信する必要があるため、バックエンド インターフェイスから返されるパラメーターも暗号化され、この時点で暗号化と復号化の操作が必要になります。
2. この記事では、暗号化と復号化に AES を使用します。AES 暗号化アルゴリズムには、CBC、ECB、CTR、CFB、OFB の 5 つの異なる動作モードが用意されています。
3. ここでは、CBC および ECB の暗号化と復号化についてのみ説明します。フロントエンドで使用される場合のこれら 2 つの暗号化モードの主な違いは次のとおりです。
   1. 基本的な暗号化方式で、暗号文を同じ長さ（十分ではない）のブロックに分割し、1つずつ暗号化し、1つずつ出力して暗号文を形成します。
   2. サイクリック モードでは、前のグループの暗号文と現在のグループの平文を XOR 演算または暗号化してから暗号化しますが、これは解読の難易度を高めることを目的としています。(積極的な攻撃が容易ではない、ECBよりも安全性が高い、SSLやIPSecの標準となっている)

AES暗号化と復号化

依存関係をインストールする

npm install crypto-js --save-dev

カプセル化暗号化・復号化方式（ECBモード）

1. 次のメソッドをカプセル化し、ファイルに aes.js という名前を付けます。

   // 引入
   import CryptoJS from 'crypto-js'
   
   // 密钥
   const AES_KEY = '****************' // 后端提供
   
   // 加密
   export function encrypt ({
          
           word }) {
         
         
     const key = CryptoJS.enc.Utf8.parse(AES_KEY)
     const srcs = CryptoJS.enc.Utf8.parse(word)
     const encrypted = CryptoJS.AES.encrypt(srcs, key, {
         
         
       mode: CryptoJS.mode.ECB,
       padding: CryptoJS.pad.Pkcs7
     })
     return encrypted.toString()
   }
   
   // 解密
   export function decrypt ({
          
           word }) {
         
         
     var key = CryptoJS.enc.Utf8.parse(AES_KEY)
     var decrypt = CryptoJS.AES.decrypt(word, key, {
         
         
       mode: CryptoJS.mode.ECB,
       padding: CryptoJS.pad.Pkcs7
     })
     return CryptoJS.enc.Utf8.stringify(decrypt).toString()
   }
   

2. 使用

   // 引入aes.js，注意文件路径不要出错
   import {
         
          encrypt, decrypt } from './aes'
   
   // data：需要加密的数据
   // encryptData：加密后的密文
   // 若有需要则将js对象转换为字符串后进行加密：JSON.stringify(data)
   const encryptData = encrypt({
         
          word: JSON.stringify(data) })
   
   // data：需要解密的密文
   // decryptData：解密后的数据
   // 若解密结果为json字符串，则可以通过JSON.parse()方法将解密结果转化为json对象
   const decryptData = decrypt({
         
          word: data}) 
   

カプセル化暗号化・復号化方式（CBCモード）

1. 次のメソッドをカプセル化し、ファイルに aes.js という名前を付けます。

   // 引入
   import CryptoJS from 'crypto-js'
   
   // 密钥
   const AES_KEY = '****************' // 后端提供
   // 初始化向量
   const IV = '****************' // 后端提供
   
   //加密方法
   export function encrypt( word ) {
         
         
   	let key = CryptoJS.enc.Utf8.parse(AES_KEY)
   	let iv = CryptoJS.enc.Utf8.parse(IV)
   	let srcs = CryptoJS.enc.Utf8.parse(word)
   
   	let encrypted = CryptoJS.AES.encrypt(srcs, key, {
         
         
   		iv,
     		mode: CryptoJS.mode.CBC,
     		padding: CryptoJS.pad.ZeroPadding
   	});
   	return encrypted.toString();
   }
   
   //解密方法
   export function decrypt( word ) {
         
         
   	var key = CryptoJS.enc.Utf8.parse(AES_KEY)
   	let iv = CryptoJS.enc.Utf8.parse(IV)
   	
   	var decrypt = CryptoJS.AES.decrypt(word, key, {
         
         
     		iv,
     		mode: CryptoJS.mode.CBC,
    		padding: CryptoJS.pad.ZeroPadding
   	})
   	return decrypt.toString(CryptoJS.enc.Utf8).trim()
   }
   

   2. 使用

   // 引入aes.js，注意文件路径不要出错
   import {
         
          encrypt, decrypt } from './aes'
   
   // data：需要加密的数据
   // encryptData：加密后的密文
   // 若有需要则将js对象转换为字符串后进行加密：JSON.stringify(data)
   const encryptData = encrypt(JSON.stringify(data))
   
   // data：需要解密的密文
   // decryptData：解密后的数据
   // 若解密结果为json字符串，则可以通过JSON.parse()方法将解密结果转化为json对象
   const decryptData = decrypt(data)