本篇要解決的問題
一般來說，加密解密這件事兒都是要讓後端來處理，因為前端寫的程式碼全部都會是明碼，加解密的密碼會大辣辣的攤在所有平行宇宙底下。
But！對，就是這個 But！在 August 遇過的專案中卻用過二次加解密的功能，主要是一些普通的資料不想一直調用 API 來取得，就暫存在 Cookies 中，儲存的時候寫「12345」跟寫「U2Fs+7ZUKvqr+7C=」之類的就是不一樣。
而且也不是所有工程師看到別人的頁面就會去無聊翻 Cookies 跟 JS 檔去解密吧？加上敢存在前端的資訊不會是什麼重要機密了，所以前端的加、解密就還是有機會用到。
本篇是用 Crypto.js 來進行加解密的動作，選它是因為網路上很多人推薦，GitHub 上星星數也多……對，工程師的選擇就是這麼的樸實無華，再加上實際使用起來真的很簡單，因此就決定是它了。
CryptoJS 官方說明文件：GitHub。
安裝
官方文件提供的安裝方式主要分為二種：前端 Browser、後端 Node.js。
身為一位專業的前端工程師們，我們這邊就傲驕的用前端版的。
前端安裝方式也有二種：直接 CDN 引用、import。
CDN
基本上搜尋「crypto js cdn」，就會看見一些第三方的 CDN 網站有提供，比方 cdnjs。
寫這篇時的最新版本是 4.1.1，可以直接引用：
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
import
首先先安裝 package：
$ npm install crypto-js
# 或
$ yarn add crypto-js
接著在 JS 檔中 import，import 時可以選擇直接整包，也可以只引用我們有用到的功能。
本篇不會直接 import 整包，而是只 import 有用到的功能：
import AES from 'crypto-js/aes';
import Rabbit from 'crypto-js/rabbit';
import encUtf8 from 'crypto-js/enc-utf8';
使用
官方 API 的文件在這：GitBook。
AES 加密解密
AES 加解密是官方提供的範例之一，使用方式很簡單：
import AES from 'crypto-js/aes';
import encUtf8 from 'crypto-js/enc-utf8';
// 加密
const ciphertext = AES.encrypt('要加密的字串', '加密密碼').toString();
// 解密
const bytes = AES.decrypt(ciphertext, '加密密碼');
const originalText = bytes.toString(encUtf8);
加密密碼 就是每個人自行設定，把它當通關密語，加密跟解密的雙方都要用這組密碼來認證一樣。
除了加解密字串，文件裡也有提供加解密 Object 的部份，其實就是把 Object 變成字串：
import AES from 'crypto-js/aes';
import encUtf8 from 'crypto-js/enc-utf8';
const obj = [{id: 1}, {id: 2}]
// 加密
var ciphertext = CryptoJS.AES.encrypt(JSON.stringify(obj), '加密密碼').toString();
// 解密
var bytes = CryptoJS.AES.decrypt(ciphertext, '加密密碼');
var originalObj = JSON.parse(bytes.toString(CryptoJS.enc.Utf8));
Rabbit 加密解密
除了範例上的 AES，看 API 文件裡提到的 Rabbit 好像也是蠻厲害的，寫法跟 AES 差不多。
import Rabbit from 'crypto-js/rabbit';
import encUtf8 from 'crypto-js/enc-utf8';
// 加密
const encrypted = Rabbit.encrypt('要加密的字串', '加密密碼');
// 解密
const decrypted = Rabbit.decrypt(encrypted, '加密密碼');
const originalText = decrypted.toString(encUtf8);
Top comments (0)