加密 | 編碼 | 雜湊 🔐 crypto-js 使用方法以及與 Vue CLI 結合應用

2021-07-22

筆記如何使用 crypto-js，用以在前端進行資料的加密、編碼與雜湊。本次的說明是以 Vue CLI 結合應用，並設計了一個線上使用 Client 端資源進行 加密、編碼與雜湊的服務。

logo

說明

crypto-js GitHub

Components.vue

import SHA256 from 'crypto-js/sha256';
import MD5 from 'crypto-js/md5';
import Base64 from 'crypto-js/enc-base64';
import UTF8 from 'crypto-js/enc-utf8';
import SHA1 from 'crypto-js/sha1';

SHA1

crypto 回傳的物件為 WordArray，需要藉由 toString 的方式才能夠顯示為字串。

Components.vue / Script / Methods

HashSha1() {
  return SHA1(this.inputtext).toString();
},

SHA256

Components.vue / Script / Methods

HashSha256() {
  return SHA256(this.inputtext).toString();
}

MD5

Components.vue / Script / Methods

HashMd5() {
  return MD5(this.inputtext).toString();
},

Base64 Encode

Base64 無法只皆以 PlainText 作為參數，必須先經轉換為 WordArray 後再以 stringify 的方式轉為字串，而轉換為 WordArray 的函式就選擇以 UTF8 進行。

Components.vue / Script / Methods

EncodeBase64() {
  return Base64.stringify(UTF8.parse(this.inputtext));
}

Base64 Decode

Base64 的 Decode 先反向由 Base64 對字串進行 Prse 為 WordArray，再經 UTF8 使用 stringify 轉換為字串，需要注意的是如果是無效 Base64 Decode 轉換會造成網頁呈現上的問題，因此先做 Try /Catch 來避免。

Components.vue / Script / Methods

DecodeBase64() {
  let result = '';
  try {
    result = UTF8.stringify(Base64.parse(this.inputtext));
  } catch (error) {
    result = 'Can\'t Decode From Base64';
  }
  return result;
}

AES Encrypt

Components.vue / Script / Methods

AESEncrypt() {
  return AES.encrypt(this.inputtext, this.secretkey).toString();
}

AES Decrypt

Components.vue / Script / Methods

AESDecrypt() {
  const bytes = AES.decrypt(this.inputtext, this.secretkey);
  return bytes.toString(UTF8);
}

相關連結

🔐 線上 AES 加密、BASE64 編碼與 SHA、MD5 雜湊的服務

鍵泥棒のメソッド

參考資料

tabnine

#JavaScript #F2E #Vue #Dev