引言

在 Web 開發(fā)中，數(shù)據(jù)安全是至關(guān)重要的環(huán)節(jié)。當(dāng)涉及用戶密碼、身份證號等敏感信息的傳輸時，僅僅依賴 HTTPS 可能還不夠——在金融、政務(wù)等高安全場景中，通常需要在應(yīng)用層再做一次加密，以防止中間人攻擊或內(nèi)網(wǎng)抓包導(dǎo)致的數(shù)據(jù)泄露。

RSA 是一種非對稱加密算法，它使用一對密鑰：公鑰加密、私鑰解密。前端持有公鑰進行加密，后端持有私鑰進行解密，即使請求被截獲，攻擊者也無法還原明文數(shù)據(jù)。

1、關(guān)于 JSEncrypt

JSEncrypt 是一個基于 JavaScript 實現(xiàn)的 RSA 加密庫，專為瀏覽器環(huán)境設(shè)計，提供了簡單易用的 API。它的核心特點：

• 輕量簡潔：API 只有幾個核心方法，學(xué)習(xí)成本低
• 開箱即用：無需復(fù)雜的依賴配置
• 支持標(biāo)準(zhǔn) PEM 格式：可與后端（Java、Python、PHP、Node.js）無縫對接

2、安裝

• 使用 npm 安裝

npm install jsencrypt --save

• 使用 yarn 安裝

yarn add jsencrypt

3、使用 JSEncrypt

import JSEncrypt from 'jsencrypt/bin/jsencrypt.min'

const publicKey = 'xxxx';

const privateKey = 'xxxx';

// 加密
export function encrypt(txt) {
  if (!txt) {
    return txt;
  }
  const encryptor = new JSEncrypt()
  // 設(shè)置公鑰
  encryptor.setPublicKey(publicKey)
  // 對數(shù)據(jù)進行加密
  return encryptor.encrypt(txt)
}

// 解密
export function decrypt(txt) {
  if (!txt) {
    return txt;
  }
  const encryptor = new JSEncrypt()
  // 設(shè)置私鑰
  encryptor.setPrivateKey(privateKey)
  // 對數(shù)據(jù)進行解密
  return encryptor.decrypt(txt)
}

4、生成公/私鑰

生成公/私鑰，點擊生成密鑰對，將生成的公鑰、私鑰復(fù)制到 js 文件中即可。

注意：公鑰的格式必須完整包含 -----BEGIN PUBLIC KEY----- 和 -----END PUBLIC KEY----- 標(biāo)記，否則加密會失敗。

5、注意事項

將公鑰寫死在代碼中雖然簡單，但存在兩個問題：

1. 公鑰泄露后無法及時更換
2. 無法實現(xiàn)密鑰輪換

最佳實踐是在應(yīng)用啟動時或進入登錄頁時，從后端動態(tài)獲取公鑰。

在 main.js 或 App.vue 中初始化：

// main.js
import { setPublicKey } from '@/utils/rsaEncrypt'
import axios from 'axios'

// 應(yīng)用啟動時獲取公鑰
async function initRSA() {
  try {
    const response = await axios.get('/api/public-key')
    if (response.data.code === 200) {
      setPublicKey(response.data.publicKey)
      console.log('RSA 公鑰初始化成功')
    }
  } catch (error) {
    console.error('獲取公鑰失敗', error)
  }
}

initRSA()

6、常見問題

1. 加密返回 null

• 原因一：公鑰格式不正確

確保公鑰包含了正確的頭尾標(biāo)識：

-----BEGIN PUBLIC KEY-----
（公鑰內(nèi)容）
-----END PUBLIC KEY-----

• 原因二：待加密的數(shù)據(jù)過長

RSA 加密有長度限制（密鑰長度 1024 位時，最多加密 117 字節(jié)；2048 位時最多 245 字節(jié)）。如果遇到超長內(nèi)容需要加密，可以考慮：

• 對長文本使用 AES 對稱加密，再用 RSA 加密 AES 密鑰（混合加密方案）
• 或使用分段加密方案

2. Vue 3 中的使用差異

在 Vue 3 中，使用方式和 Vue 2 基本相同，唯一的區(qū)別是 Composition API 的寫法：

<script setup>
import { ref } from 'vue'
import { encrypt } from '@/utils/rsaEncrypt'

const password = ref('')
const encryptedPwd = encrypt(password.value)
</script>

3. TypeScript 支持

如果項目使用 TypeScript，可以安裝類型定義：

npm install @types/jsencrypt --save-dev

7、安全性建議

• 必須使用 HTTPS：即使做了應(yīng)用層加密，HTTPS 仍然是傳輸安全的基礎(chǔ)
• 公鑰動態(tài)獲?。罕苊鈱⒐€寫死在前端代碼中，通過接口動態(tài)獲取
• 定期輪換密鑰：后端定期生成新的密鑰對，降低密鑰泄露風(fēng)險
• 配合驗證碼機制：防止暴力 破解攻擊
• 前端只加密，不解密：私鑰只保存在服務(wù)端，前端永遠不應(yīng)該持有私鑰

到此這篇關(guān)于JavaScript使用JSEncrypt對數(shù)據(jù)加解密的文章就介紹到這了,更多相關(guān)JavaScript JSEncrypt數(shù)據(jù)加解密內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論