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