フロントエンドデータ送信の暗号化/復号化方式

まず crypto-js プラグインをインストールし、次のコマンドをインストールします。

npm install crypto-js -S
-S は –save と同等で、依存関係の下の package.json ファイルに保存されます。 –save インストールパッケージ情報が依存関係 (運用環境)、運用段階の依存関係に追加されます。実行時の依存関係とは、プログラムがオンラインになった後もそのプロジェクトに依存する必要があることを意味します。

-D は、-save-dev と同等であり、devDependency の下の package.json ファイルにも保存されます。-save-dev インストールパッケージ情報は devDependency (開発環境) に追加されます。開発フェーズの依存関係は、開発段階のものです。 process で必要な依存関係は、開発段階でのみ機能します。

新しい crypto.js ファイルを作成し、カスタム暗号化および復号化メソッドをカプセル化して、以下をエクスポートします。

import CryptoJS from 'crypto-js'
 
// 默认的KEY与iv与后端保持一致，不采用后端传值密钥
const KEY = CryptoJS.enc.Utf8.parse('aaDJL2d9DfhLZO0z');// 密钥
const IV = CryptoJS.enc.Utf8.parse('412ADDSSFA342442');// 偏移量  
 
/** AES加密 */
export function Encrypt(word, keyStr, ivStr) {
  let key = KEY;
  let iv = IV;
 
  if (keyStr) {
    key = CryptoJS.enc.Utf8.parse(keyStr);
    iv = CryptoJS.enc.Utf8.parse(ivStr);
  }
 
  let srcs = CryptoJS.enc.Utf8.parse(word);
  var encrypted = CryptoJS.AES.encrypt(srcs, key, {
    iv: iv,
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.ZeroPadding
  });
 
  return CryptoJS.enc.Base64.stringify(encrypted.ciphertext);
 
}
 
 
/** AES 解密 */
export function Decrypt(word, keyStr, ivStr) {
  let key  = KEY;
  let iv = IV;
 
  if (keyStr) {
    key = CryptoJS.enc.Utf8.parse(keyStr);
    iv = CryptoJS.enc.Utf8.parse(ivStr);
  }
 
  let base64 = CryptoJS.enc.Base64.parse(word);
  let src = CryptoJS.enc.Base64.stringify(base64);
 
  var decrypt = CryptoJS.AES.decrypt(src, key, {
    iv: iv,
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.ZeroPadding
  });
 
  var decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
  return decryptedStr.toString();
 
}

次のようにインポートして使用します。

//引入
import {Decrypt,Encrypt} from "./crypto.js";
 
//使用方式
Encrypt(JSON.stringify(config.data));//加密
eg: //密码加密
this.formLogin.password = Encrypt(JSON.stringify(this.formLogin.password));
 
JSON.parse(Decrypt(response.data));//解密
eg: //密码解密
this.formLogin.password = JSON.parse(Decrypt(this.getCookie("password")));

著者: 張永輝

フロントエンドデータ送信の暗号化/復号化方式

おすすめ