DEV Community

Cover image for CryptoJS 用前端加密、解密
Let's Write
Let's Write

Posted on • Edited on • Originally published at letswrite.tw

9

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>
Enter fullscreen mode Exit fullscreen mode

import

首先先安裝 package:

$ npm install crypto-js
# 或
$ yarn add crypto-js
Enter fullscreen mode Exit fullscreen mode

接著在 JS 檔中 import,import 時可以選擇直接整包,也可以只引用我們有用到的功能。

本篇不會直接 import 整包,而是只 import 有用到的功能:

import AES from 'crypto-js/aes';
import Rabbit from 'crypto-js/rabbit';
import encUtf8 from 'crypto-js/enc-utf8';
Enter fullscreen mode Exit fullscreen mode

使用

官方 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);
Enter fullscreen mode Exit fullscreen mode

加密密碼 就是每個人自行設定,把它當通關密語,加密跟解密的雙方都要用這組密碼來認證一樣。

除了加解密字串,文件裡也有提供加解密 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));
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay