前端實(shí)現(xiàn)加密的常見(jiàn)方法和步驟
更新時(shí)間：2025年06月19日 08:28:52 作者：liangshanbo1215
這篇文章主要介紹了前端實(shí)現(xiàn)加密的常見(jiàn)方法和步驟,包括對(duì)稱（AES）、非對(duì)稱（RSA/ECC）及哈希（SHA-256）算法,推薦使用WebCryptoAPI、CryptoJS等工具,需要的朋友可以參考下
前言
在前端實(shí)現(xiàn)加密是一種常見(jiàn)的安全措施，用于保護(hù)敏感數(shù)據(jù)（如密碼、用戶信息等）在傳輸或存儲(chǔ)過(guò)程中的安全性。以下是實(shí)現(xiàn)前端加密的常見(jiàn)方法和步驟：
1. 常見(jiàn)的加密方式
(1) 對(duì)稱加密
- 使用同一個(gè)密鑰進(jìn)行加密和解密。
- 優(yōu)點(diǎn)：速度快，適合加密大量數(shù)據(jù)。
- 缺點(diǎn)：密鑰需要安全地共享，容易被破解。
- 常見(jiàn)算法：AES（Advanced Encryption Standard）。
(2) 非對(duì)稱加密
- 使用一對(duì)密鑰（公鑰和私鑰），公鑰用于加密，私鑰用于解密。
- 優(yōu)點(diǎn)：安全性高，適合密鑰交換和身份驗(yàn)證。
- 缺點(diǎn)：速度較慢，不適合加密大量數(shù)據(jù)。
- 常見(jiàn)算法：RSA、ECC（Elliptic Curve Cryptography）。
(3) 哈希算法
- 將數(shù)據(jù)轉(zhuǎn)換為固定長(zhǎng)度的散列值，不可逆。
- 常用于密碼存儲(chǔ)和數(shù)據(jù)完整性校驗(yàn)。
- 常見(jiàn)算法：SHA-256、MD5（不推薦用于安全性要求高的場(chǎng)景）。
2. 實(shí)現(xiàn)前端加密
(1) 使用 Web Crypto API (推薦)
Web Crypto API 是瀏覽器原生提供的加密接口，支持現(xiàn)代加密標(biāo)準(zhǔn)。
// 加密函數(shù)
async function encryptData(plainText, secretKey) {
const encoder = new TextEncoder();
const data = encoder.encode(plainText);
// 使用AES-GCM算法
const iv = window.crypto.getRandomValues(new Uint8Array(12));
const encrypted = await window.crypto.subtle.encrypt(
{
name: "AES-GCM",
iv: iv
},
secretKey,
data
);
return {
iv: Array.from(iv).join(','),
ciphertext: Array.from(new Uint8Array(encrypted)).join(',')
};
}
// 生成密鑰
async function generateKey() {
return await window.crypto.subtle.generateKey(
{
name: "AES-GCM",
length: 256
},
true,
["encrypt", "decrypt"]
);
}(2) CryptoJS
CryptoJS 是一個(gè)流行的 JavaScript 加密庫(kù)，支持多種加密算法（如 AES、SHA、MD5 等）。
// 引入 CryptoJS
const CryptoJS = require("crypto-js");
// 加密
const secretKey = "my-secret-key-123"; // 密鑰
const data = "Sensitive data";
const encrypted = CryptoJS.AES.encrypt(data, secretKey).toString();
console.log("Encrypted:", encrypted);
// 解密
const decrypted = CryptoJS.AES.decrypt(encrypted, secretKey).toString(CryptoJS.enc.Utf8);
console.log("Decrypted:", decrypted);(3) jsrsasign
jsrsasign 是一個(gè)支持 RSA 和 ECC 的 JavaScript 加密庫(kù)。
const KJUR = require("jsrsasign");
// 生成密鑰對(duì)
const keyPair = KJUR.KEYUTIL.generateKeypair("RSA", 1024);
const publicKey = KJUR.KEYUTIL.getPEM(keyPair.pubKeyObj);
const privateKey = KJUR.KEYUTIL.getPEM(keyPair.prvKeyObj, "PKCS8PRV");
// 加密
const plainText = "Sensitive data";
const encrypted = KJUR.crypto.Cipher.encrypt(plainText, keyPair.pubKeyObj);
console.log("Encrypted:", encrypted);
// 解密
const decrypted = KJUR.crypto.Cipher.decrypt(encrypted, keyPair.prvKeyObj);
console.log("Decrypted:", decrypted);3. 前端加密的應(yīng)用場(chǎng)景
(1) 用戶密碼加密
- 在用戶登錄時(shí)，前端對(duì)密碼進(jìn)行加密后再發(fā)送到服務(wù)器。
- 通常使用哈希算法（如 SHA-256）或非對(duì)稱加密（如 RSA）。
const CryptoJS = require("crypto-js");
function hashPassword(password) {
return CryptoJS.SHA256(password).toString(CryptoJS.enc.Hex);
}
const password = "user_password";
const hashedPassword = hashPassword(password);
console.log("Hashed Password:", hashedPassword);(2) 數(shù)據(jù)傳輸加密
- 在前后端通信中，使用對(duì)稱加密（如 AES）或 HTTPS 協(xié)議保護(hù)數(shù)據(jù)。
- 如果使用對(duì)稱加密，密鑰應(yīng)通過(guò)安全的方式（如非對(duì)稱加密）傳遞。
1、非對(duì)稱加密傳輸密鑰
// 客戶端生成對(duì)稱密鑰
async function generateAndEncryptKey(publicKey) {
const symmetricKey = await generateKey();
// 使用服務(wù)器的公鑰加密對(duì)稱密鑰
const exportedKey = await window.crypto.subtle.exportKey('raw', symmetricKey);
const encryptedKey = await window.crypto.subtle.encrypt(
{
name: "RSA-OAEP"
},
publicKey,
exportedKey
);
return {
encryptedKey: Array.from(new Uint8Array(encryptedKey)).join(','),
symmetricKey
};
}2、完整傳輸流程
客戶端請(qǐng)求服務(wù)器公鑰
服務(wù)器返回RSA公鑰
客戶端生成AES密鑰并用RSA公鑰加密
發(fā)送加密后的AES密鑰到服務(wù)器
之后通信使用AES加密
(3) 數(shù)據(jù)完整性校驗(yàn)
- 使用哈希算法生成數(shù)據(jù)的散列值，并在接收端校驗(yàn)散列值是否一致。
const CryptoJS = require("crypto-js");
const data = "Original data";
const hash = CryptoJS.SHA256(data).toString(CryptoJS.enc.Hex);
console.log("Generated Hash:", hash);(4) 本地存儲(chǔ)加密
// 使用Web Crypto API封裝本地存儲(chǔ)
const secureStorage = {
async setItem(key, value, secretKey) {
const encrypted = await encryptData(value, secretKey);
localStorage.setItem(key, JSON.stringify(encrypted));
},
async getItem(key, secretKey) {
const encryptedData = JSON.parse(localStorage.getItem(key));
if (!encryptedData) return null;
const decrypted = await decryptData(encryptedData, secretKey);
return decrypted;
}
};
// 使用示例
(async () => {
const key = await generateKey();
await secureStorage.setItem('user_data', JSON.stringify({name: 'John'}), key);
const data = await secureStorage.getItem('user_data', key);
console.log(data);
})();4. 注意事項(xiàng)
不要依賴前端加密作為唯一的安全措施：
- 前端代碼容易被篡改，攻擊者可以通過(guò)調(diào)試工具繞過(guò)加密邏輯。
- 后端始終需要對(duì)數(shù)據(jù)進(jìn)行驗(yàn)證和加密。
結(jié)合 HTTPS 使用：
始終使用HTTPS
實(shí)施CSRF保護(hù)
添加時(shí)間戳和隨機(jī)數(shù)防止重放攻擊
避免硬編碼密鑰：
- 不要在前端硬編碼密鑰，容易被查看源碼獲取。
- 考慮使用密鑰派生函數(shù)（如PBKDF2）或者定期輪換密鑰
選擇合適的算法：
- 對(duì)于密碼存儲(chǔ)，優(yōu)先使用不可逆的哈希算法（如 SHA-256 或 bcrypt）。
- 對(duì)于數(shù)據(jù)傳輸，優(yōu)先使用對(duì)稱加密（如 AES）或 HTTPS。
- 性能考慮：
Web Workers中進(jìn)行加密運(yùn)算避免阻塞UI
對(duì)大文件使用分塊加密
總結(jié)
到此這篇關(guān)于前端實(shí)現(xiàn)加密的常見(jiàn)方法和步驟的文章就介紹到這了,更多相關(guān)前端實(shí)現(xiàn)加密內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Bootstrap CSS布局之代碼的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要介紹了如何使用JS console.log()技巧提高工作效率,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-10-10
js表格分頁(yè)實(shí)現(xiàn)代碼，需要的朋友可以參考下。2009-09-09
這篇文章主要為大家詳細(xì)介紹了Vue指令的鉤子函數(shù)使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)簽到功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-10-10
原生JS實(shí)現(xiàn)左右箭頭選擇日期實(shí)例代碼
原生JS 左右箭頭選擇日期,就是用左右尖括號(hào)可改變中間日期的值，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下2017-03-03
js驗(yàn)證整數(shù)加保留小數(shù)點(diǎn)的簡(jiǎn)單實(shí)例
這篇文章主要介紹了js驗(yàn)證整數(shù)加保留小數(shù)點(diǎn)的簡(jiǎn)單實(shí)例，有需要的朋友可以參考一下2013-12-12
JavaScript實(shí)現(xiàn)設(shè)計(jì)模式中的單例模式的一些技巧總結(jié)
單例模式是JavaScript項(xiàng)目中最常用的設(shè)計(jì)模式之一,下面羅列了JavaScript實(shí)現(xiàn)設(shè)計(jì)模式中的單例模式的一些技巧總結(jié),包括惰性加載與分支技術(shù)等,需要的朋友可以參考下.
2016-05-05 
深入理解javascript動(dòng)態(tài)插入技術(shù)
這篇文章介紹了javascript動(dòng)態(tài)插入技術(shù)，有需要的朋友可以參考一下
2013-11-11