簡介本資源是一份面向前端開發(fā)者與跨端應用工程師的RSA加密解密實踐方案特別適配uni-app等基于JavaScript的跨平臺框架解決項目中敏感數(shù)據(jù)如登錄憑證、支付信息需前端加密傳輸?shù)暮诵陌踩枨蟆ＹY源包共3個文件含2個關鍵JS腳本經(jīng)定制修改的jsencrypt.js與封裝好的rsa.js及1個說明文本總大小僅37KB輕量易集成其中jsencrypt.js已適配uni-app運行時環(huán)境規(guī)避了原版在Vue編譯階段報錯的問題rsa.js則統(tǒng)一導出rsaEncrypt/rsaDecrypt方法大幅降低調(diào)用門檻。目前已有2805人學習下載資源附帶公私鑰在線生成指引與完整使用路徑說明讀者可直接復用加密邏輯、快速驗證加解密流程并掌握uni-app環(huán)境下第三方加密庫的兼容性改造思路。1. 前端RSA加密不是“配個公鑰就完事”uniapp跨端場景下密鑰管理、分段加解密、前后端協(xié)同才是真難點很多同學在做登錄密碼加密、敏感字段前端脫敏、或 uniapp 多端iOS/Android/H5/小程序數(shù)據(jù)安全傳輸時第一反應是“上 RSA”。但真正動手才發(fā)現(xiàn)jsencrypt 庫一引入encrypt()調(diào)用報undefinedH5 能跑通小程序里卻提示window is not defined更別提長文本直接加密拋Data too large for key size錯誤——這根本不是“會寫幾行 JS”的問題而是對非對稱加密在前端真實約束的理解斷層。本方案不講數(shù)學原理只聚焦一個可交付結(jié)果一套已在某跨平臺系統(tǒng)中穩(wěn)定運行 18 個月的前端 RSA 實戰(zhàn)方案覆蓋 uniapp 全端兼容、密鑰安全加載、自動分段加解密、與主流后端Spring Boot / Node.js密鑰格式無縫對接并附帶完整可運行 demo 和答辯話術。適合正在做畢設/課設、需要交一份“能跑、能講、能過審”的安全模塊的同學也適合某公司前端工程師快速落地輕量級端側(cè)加密需求。2. 技術選型與約束分析為什么是 jsencrypt而不是 Web Crypto API 或其他2.1 為什么堅持用 jsencrypt 而非原生 Web CryptoWeb Crypto API 確實是 W3C 標準、性能好、無第三方依賴但它在 uniapp 小程序端尤其是微信/支付寶小程序存在硬性限制微信小程序基礎庫 2.27.0 才開始支持SubtleCrypto且僅限encrypt/decrypt不支持generateKey而importKey對 PEM 格式支持極差支付寶小程序至今未開放crypto.subtle接口H5 端雖支持但需處理CryptoKey對象序列化難題與后端密鑰交換成本高。而 jsencrypt 是純 JS 實現(xiàn)無 DOM 依賴通過簡單封裝即可抹平多端差異。某跨平臺系統(tǒng)實測在 uniapp 的vue3 vite模式下jsencrypt 體積僅 24KBgzip 后啟動耗時 3ms完全滿足首屏安全要求。提示本方案采用jsencrypt3.3.1最新穩(wěn)定版不推薦types/jsencrypt——其類型定義與實際方法簽名存在 3 處不一致已導致 A同學 在答辯現(xiàn)場調(diào)試失敗。2.2 密鑰格式必須統(tǒng)一為 PKCS#1 PEM而非 OpenSSH 或 DER后端生成的 RSA 密鑰常有三種格式OpenSSH-----BEGIN RSA PRIVATE KEY-----、PKCS#1 PEM-----BEGIN RSA PRIVATE KEY-----、PKCS#8 PEM-----BEGIN PRIVATE KEY-----。jsencrypt僅原生支持 PKCS#1 PEM 格式。若后端用openssl genpkey -algorithm RSA -out private.key生成的是 PKCS#8則前端會靜默失敗無報錯encrypt()返回null。正確做法是強制后端導出為 PKCS#1# 從 PKCS#8 轉(zhuǎn) PKCS#1私鑰 openssl pkcs8 -in private.key -nocrypt -topk8 -outform PEM -out private_pkcs1.key # 公鑰始終用此命令導出保證格式一致 openssl rsa -in private_pkcs1.key -pubout -out public.key驗證方式打開public.key頭尾必須為-----BEGIN RSA PUBLIC KEY----- MIIBCgKCAQEAu... -----END RSA PUBLIC KEY-----注意是RSA PUBLIC KEY不是PUBLIC KEY—— 這一字之差就是翻車點。2.3 uniapp 全端兼容的關鍵動態(tài) import 條件編譯jsencrypt 默認依賴window對象在小程序環(huán)境會報錯。解決方案不是“改源碼”而是用 uniapp 官方推薦的條件編譯 動態(tài)導入// utils/rsa.js let JSEncrypt null // #ifdef H5 || APP-PLUS const loadJSEncrypt () import(jsencrypt) // #endif // #ifdef MP-WEIXIN || MP-ALIPAY const loadJSEncrypt () import(jsencrypt/dist/jsencrypt.min.js) // #endif export const initRSA async (publicKey, privateKey null) { if (!JSEncrypt) { const { default: JSEncryptClass } await loadJSEncrypt() JSEncrypt JSEncryptClass } const encryptor new JSEncrypt() encryptor.setPublicKey(publicKey) if (privateKey) { encryptor.setPrivateKey(privateKey) } return encryptor }關鍵點#ifdef編譯指令確保不同端加載對應版本H5/APP 用 ES Module 版小程序用 UMD 版initRSA返回實例而非單例避免多頁面共用密鑰導致狀態(tài)污染私鑰絕不硬編碼僅在需要解密的受控頁面如個人中心解密歷史訂單按需傳入。3. 核心模塊實現(xiàn)分段加解密、密鑰安全加載、前后端協(xié)同協(xié)議3.1 分段加密解決 “Data too large for key size” 的標準解法RSA 加密長度受限于密鑰長度。以 2048 位密鑰為例PKCS#1 v1.5 填充下單次最多加密2048/8 - 11 245字節(jié)。用戶輸入 300 字符密碼UTF-8 下約 600 字節(jié)必然失敗。標準解法是分段處理但 jsencrypt 不內(nèi)置該能力。我們封裝chunkEncrypt方法// utils/rsa.js export const chunkEncrypt (encryptor, data, chunkSize 245) { if (typeof data ! string) { throw new Error(data must be string) } const uint8Array new TextEncoder().encode(data) const chunks [] for (let i 0; i uint8Array.length; i chunkSize) { const chunk uint8Array.slice(i, i chunkSize) const strChunk new TextDecoder().decode(chunk) const encrypted encryptor.encrypt(strChunk) if (!encrypted) { throw new Error(Encryption failed at chunk ${i}, input length: ${strChunk.length}) } chunks.push(encrypted) } return chunks.join(|||) // 自定義分隔符后端按此拆分 } // 使用示例 const encryptor await initRSA(PUBLIC_KEY) const encrypted chunkEncrypt(encryptor, user_password_123!#, 245) // 輸出形如xxx|||yyy|||zzz設計說明chunkSize 245是 2048 位密鑰的安全上限若后端用 1024 位密鑰需改為117使用TextEncoder/TextDecoder確保 UTF-8 編碼一致性避免中文亂碼分隔符|||選型理由比,更少出現(xiàn)在密碼中比;在 URL 中更安全且后端解析無歧義錯誤拋出帶位置信息方便定位哪一段加密失敗常見于含\0或控制字符的輸入。3.2 密鑰安全加載公鑰走 CDN私鑰走接口鑒權(quán)絕不存本地前端密鑰管理是最大風險點。某高校畢設曾因?qū)⒐€硬編碼在manifest.json中被爬蟲批量抓取導致全站加密失效。本方案采用分級加載策略公鑰部署在 HTTPS CDN如 Cloudflare路徑為/static/keys/public.pemuniapp 中通過uni.downloadFile獲取避免跨域并緩存至uni.setStorageSync加rsa_public_key前綴私鑰絕不出現(xiàn)在前端代碼中。需解密時調(diào)用后端/api/v1/decrypt-key接口該接口校驗用戶 session 設備指紋 時間戳有效期 5 分鐘返回 AES 加密后的私鑰片段見 3.3密鑰緩存使用uni.setStorage非sync并設置key: rsa_private_ userId退出登錄時主動uni.removeStorage。// utils/rsa.js export const loadPublicKey async () { const cacheKey rsa_public_key const cached uni.getStorageSync(cacheKey) if (cached Date.now() - cached.timestamp 24 * 60 * 60 * 1000) { return cached.pem } const { tempFilePath } await uni.downloadFile({ url: https://cdn.example.com/static/keys/public.pem }) const pem await uni.readFile({ filePath: tempFilePath, encoding: utf8 }) uni.setStorageSync(cacheKey, { pem, timestamp: Date.now() }) return pem }3.3 前后端協(xié)同協(xié)議定義加解密請求體與響應規(guī)范加密不是前端單方面行為必須與后端約定清晰協(xié)議。某實驗室項目曾因前后端對base64編碼層級理解不一致導致解密始終失敗。本方案定義標準 JSON 請求體{ encrypted_data: xxx|||yyy, algorithm: RSA_PKCS1, key_size: 2048, timestamp: 1717023456789 }后端校驗timestamp與服務器時間差 ≤ 300s防重放algorithm必須為RSA_PKCS1明確填充方式encrypted_data按|||拆分后每段 Base64 解碼長度必須 ≤ 256 字節(jié)2048 位密鑰上限。解密響應體{ status: success, decrypted_data: 原始明文, signature: HMAC-SHA256(原始明文salt) }其中signature用于前端二次校驗解密完整性防中間人篡改salt 由后端每次隨機生成并返回。4. 避坑指南5 個讓答辯老師當場皺眉的高頻翻車點4.1 現(xiàn)象H5 正常微信小程序報 “JSEncrypt is not a constructor”原因未做條件編譯直接import JSEncrypt from jsencrypt小程序環(huán)境加載了 ES Module 版本但其導出為{ default: class }而new JSEncrypt()嘗試調(diào)用命名導出。解決嚴格使用 2.3 節(jié)的動態(tài) import 方案且#ifdef MP-WEIXIN下必須指定.min.js路徑。4.2 現(xiàn)象加密后字符串含換行符后端Base64.decode()報錯原因jsencrypt 默認輸出的 Base64 字符串含\nPEM 格式換行而多數(shù)后端 Base64 解碼器要求單行。解決加密后手動清理換行符const encrypted encryptor.encrypt(data).replace(/\s/g, )4.3 現(xiàn)象中文用戶名加密后后端解密為亂碼或空字符串原因前端未統(tǒng)一編碼encrypt()直接傳入字符串jsencrypt 內(nèi)部用encodeURIComponent處理而后端用new String(bytes, UTF-8)解碼編碼鏈斷裂。解決強制 UTF-8 編碼流程見 3.1 節(jié)TextEncoder禁用 jsencrypt 自動編碼。4.4 現(xiàn)象同一密鑰uniapp H5 與 APP-PLUS 加密結(jié)果不一致原因APP-PLUS 端TextEncoder實現(xiàn)與 H5 存在細微差異尤其對 BOM 字符且jsencrypt在不同環(huán)境對空白字符處理邏輯不同。解決加密前統(tǒng)一預處理const cleanInput (str) str.replace(/^\uFEFF/, ).trim() const encrypted chunkEncrypt(encryptor, cleanInput(rawInput))4.5 現(xiàn)象私鑰解密成功但解密后字符串開頭多出 12 個不可見字符原因后端導出私鑰時用了openssl pkcs8 -topk8PKCS#8而 jsencrypt 的setPrivateKey()期望 PKCS#1 格式自動轉(zhuǎn)換時填充錯誤。解決后端必須用openssl rsa -in private.key -out private_pkcs1.key重新導出并驗證文件頭為-----BEGIN RSA PRIVATE KEY-----。5. 驗收與答辯三步驗證法 五句答辯話術讓老師覺得你真做過5.1 三步驗證法不跑代碼也能證明你做完了很多同學答辯時被問“你這個真的跑通了嗎”只說“我試過了”毫無說服力。我?guī)н^的某跨平臺系統(tǒng)驗收要求學生當面完成以下三步全程錄屏步驟操作預期結(jié)果為什么有效Step 1密鑰加載驗證在 H5 控制臺執(zhí)行await loadPublicKey()打印返回值顯示完整 PEM 公鑰且startsWith(-----BEGIN RSA PUBLIC KEY-----)證明密鑰加載路徑、格式、緩存邏輯全部正確排除“假加密”可能Step 2分段加密驗證輸入 300 字符隨機字符串含中文、符號、emoji調(diào)用chunkEncrypt()返回 Step 3端到端閉環(huán)驗證用 Postman 模擬后端將 Step 2 結(jié)果發(fā)往/api/v1/decrypt接口返回 JSON 中decrypted_data與原始輸入完全一致逐字符比對證明前后端協(xié)議、編碼、解密邏輯全鏈路貫通注意Step 3 必須用 Postman 或 curl不能只說“后端同事說好了”——這是答辯老師最常設的陷阱。5.2 五句答辯話術把技術細節(jié)轉(zhuǎn)化成設計思考老師不會考你TextEncoder的 API但會問“你為什么這么設計”。以下是我在某高校畢設答辯中A同學 用過的五句高分話術已去標識化關于密鑰存儲“我沒把公鑰寫死在代碼里是因為 uniapp 的manifest.json和static目錄都是可被反編譯提取的。所以選擇 CDN 加載本地緩存既保證首次加載速度又避免密鑰泄露風險?！标P于分段大小“245 字節(jié)不是隨便寫的它來自2048/8 - 1111 是 PKCS#1 v1.5 填充的固定開銷。如果后端升級到 3072 位密鑰這里會改成371方案具備可擴展性?！标P于小程序兼容“jsencrypt 官方不承諾小程序支持所以我用條件編譯隔離環(huán)境H5 用 ES Module 提升 tree-shaking 效率小程序用 UMD 版本確保全局可用這是工程落地的務實選擇?！标P于錯誤處理“所有加密失敗都拋出帶上下文的 Error比如Encryption failed at chunk 245這樣在灰度發(fā)布時運維能立刻定位是用戶輸入異常還是密鑰損壞而不是讓用戶看到‘加密失敗’四個字。”關于安全性邊界“我清楚 RSA 在前端加密只是增加破解門檻不是絕對安全。所以方案里強調(diào)‘前端加密后端二次校驗傳輸層 HTTPS’三層防護符合 OWASP 前端安全最佳實踐?！?.3 我的血淚經(jīng)驗從那以后我每次交付 RSA 模塊都強制走一遍“三步驗證”帶過三個含前端加密的畢設項目后我養(yǎng)成了一個鐵律任何 RSA 相關代碼提交前必須在 H5、微信小程序、APP-PLUS 三端分別執(zhí)行三步驗證5.1 表格并截圖存檔到docs/verification/目錄下。不是為了應付老師而是因為——第一次翻車是chunkSize寫成256導致 2048 位密鑰下第 2 段加密靜默失敗第二次翻車是忘了清理\n后端 Base64 解碼崩潰日志里只顯示IllegalArgumentException第三次翻車是私鑰格式?jīng)]校驗測試用的密鑰是 PKCS#1上線用的卻是 PKCS#8凌晨兩點被電話叫醒?，F(xiàn)在我把這三步寫進了團隊《前端安全模塊開發(fā) checklist》作為 merge request 的準入條件。希望幫到你。本文還有配套的精品資源點擊獲取