CryptoJS 用前端加密、解密

/

本篇要解決的問題

一般來說,加密解密這件事兒都是要讓後端來處理,因為前端寫的程式碼全部都會是明碼,加解密的密碼會大辣辣的攤在所有平行宇宙底下。

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);
Summary
CryptoJS 用前端加密、解密
Article Name
CryptoJS 用前端加密、解密
Description
本篇大綱:本篇要解決的問題。安裝、CDN、import。使用、AES 加密解密、Rabbit 加密解密。本篇是用 Crypto.js 來進行加解密的動作,選它是因為網路上很多人推薦,GitHub 上星星數也多。
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg

以下是留言,但關於留言的部份必需先讓你們知道:

本站的文章都是 August 因為覺得有趣,才會實作並整理成筆記文而後進行發表。

如果留言是希望把 Demo 改成「你想要」的樣子,或是把功能改成「符合你需求」的樣子,

Sorry~ 除非那修改是 August 也有興趣的,不然不會幫你們寫程式去面對工作或是交作業。

未來這類的留言不會再主動回覆。😎

另外,公開信箱是為了讓金流驗證用,

因為之前遇過幾次回信協助解決問題後,對方卻一聲謝謝也沒有,就這樣拿去幫工作交差。

因此決定不再回覆信件,有疑問就利用留言功能囉。

Let's Write

前端工程師 August 的學習筆記 — solving problems, in simple ways.

Follow us Telegram GitHub