JSEncrypt

本文从定位、用途、核心功能、使用方法及注意事项等方面,详细介绍 JSEncrypt 框架,内容通俗易懂,适合编程新手理解。

一、JSEncrypt 核心定义

JSEncrypt 是一个基于 JavaScript 实现的 RSA 非对称加密算法库,核心作用是在前端(浏览器/Node.js)完成 RSA 加密、解密、签名、验签操作,无需开发者手动实现复杂的 RSA 加密逻辑。

核心特点与依赖:

  • 底层依赖经典的 `jsbn` 大数运算库,封装了复杂的 RSA 算法,提供简单易用的 API;
  • 核心用途:解决前端与后端之间的敏感数据加密传输问题(如登录密码加密、身份证/银行卡信息提交),避免明文数据被劫持泄露。

二、核心功能与使用场景

1. 核心功能

  1. 生成 RSA 密钥对(公钥 + 私钥);
  1. 公钥加密数据:前端常用此功能,将敏感数据加密后传输给后端;
  1. 私钥解密数据:后端专用功能,解密前端传输的加密数据;
  1. 私钥签名与公钥验签:验证传输数据是否被篡改,保障数据完整性。

2. 典型使用场景

  • 登录场景:前端用后端下发的公钥加密用户密码,后端用私钥解密,防止密码明文传输;
  • 敏感数据提交场景:如用户身份证号、银行卡号等核心信息,前端加密后再提交至后端。

三、快速上手使用(新手友好版)

1. 安装/引入方式

JSEncrypt 支持两种常用引入方式,可根据项目类型选择:

方式1:CDN 引入(适用于传统 HTML 项目)

直接在 HTML 文件中引入 CDN 链接,无需额外安装依赖:

|-----------------------------------------------------------------------------------------------------|
| html <script src="https://cdn.bootcdn.net/ajax/libs/jsencrypt/3.2.1/jsencrypt.min.js"></script> |

方式2:npm 安装(适用于 Vue/React 等模块化项目)

通过 npm 命令安装,之后在项目中按需导入:

|-----------------------------------|
| bash npm install jsencrypt --save |

2. 核心使用示例(加密/解密完整流程)

以下示例包含前端加密、后端解密的完整逻辑(注:私钥仅在后端使用,不可暴露在前端):

|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| javascript // 1. 创建 JSEncrypt 实例 const encrypt = new JSEncrypt(); // 2. 准备 RSA 密钥对(实际开发中,公钥由后端提供,私钥保存在后端) // 公钥(示例,需替换成真实业务公钥) const publicKey = `-----BEGIN PUBLIC KEY----- MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDCFENGw33yGihy92pDjZQhl0C3 6rPJj+CvfSC8+q28hxA161QFNUd13wuCTUcq0Qd2qsBe/2hFyc2DCJJg0h1L78+6 Z4UMR7EOcpfdUE9Hf3m/hs+FUR45uBJeDK1HSFHD8bHKD6kv8FPGfJTotc+2xjJw oYi+1hqp1fIekaxsyQIDAQAB -----END PUBLIC KEY-----`; // 私钥(示例,仅后端使用,禁止前端存储/传输) const privateKey = `-----BEGIN RSA PRIVATE KEY----- MIICXQIBAAKBgQDCFENGw33yGihy92pDjZQhl0C36rPJj+CvfSC8+q28hxA161QF NUd13wuCTUcq0Qd2qsBe/2hFyc2DCJJg0h1L78+6Z4UMR7EOcpfdUE9Hf3m/hs+F UR45uBJeDK1HSFHD8bHKD6kv8FPGfJTotc+2xjJwoYi+1hqp1fIekaxsyQIDAQAB AoGBAJR8ZkCUvx5kzv+utdl7T5MnordT1TvoXXJGXK7ZZ+UuvMNUCdN2QPc4sBiA QWvLw1cSKt5DsKZ8UETpYPy8pPYnnDEz2dDYiaew9+xEpubyeW2oH4Zx71wqBtOK kqwrXa/pzdpiucRRjk6vE6YY7EBBs/g7uanVpGibOVAEsqH1AkEA7DkjVH28WDUg f1nqvfn2Kj6CT7nIcE3jGJsZZ7zlZmBmHFDONMLUrXR/Zm3pR5m0tCmBqa5RK95u4 12jt1dPIwJBANJT3v8pnkth48bQo/fKel6uEYyboRtA5/uHuHkZ6FQF7OUkGogcS mKvX1DBH5ZLfBc1aR9p2Zs7kUnCjB00xf0J0hF0EQQSNEsXrKb4M5wmc2oY61liz dIRmq2accgySN5vEcYUZ+3d+DEF1WKKm/7w0p+ufQwJrIvpNvAAxsCZwJACmH5fSS jAkLRi54PKJ8TFUeOP15h9sQzydI8zJU+upvDEKZsZc/UhT/SySDOxQ4G/523Y00 tA5uCStwc+yqHRK0tMS0Zh05OBzFTJuUBc1Z7Up1T8DAgw9GWtxOKVCzW9QJAZIT ztZbJxQ5xgPjbtG8+AeRgd5w6HPFk2flUTj6g0Y7hx/3X9BmYB6ce5Hibn6w5mZX pRbpBZoNcNQN3vXlCQJCCBSom/2Qixh3Z7i/zQ7RtDz2qmp10GbM1HgZ1nKHm_oW 0XhI7yWHTe4CghpdhAgAG6Qc856yIZpAZC740JQ== -----END RSA PRIVATE KEY-----`; // 3. 前端用公钥加密数据(以加密密码为例) encrypt.setPublicKey(publicKey); // 加载公钥 const originalData = "123456"; // 待加密的明文数据(如用户密码) const encryptedData = encrypt.encrypt(originalData); // 加密结果(base64 格式) console.log("加密后的数据:", encryptedData); // 4. 后端用私钥解密(仅示例,实际逻辑在后端执行) const decrypt = new JSEncrypt(); decrypt.setPrivateKey(privateKey); // 加载私钥 const decryptedData = decrypt.decrypt(encryptedData); // 解密获取明文 console.log("解密后的原始数据:", decryptedData); // 输出:123456 |

3. 关键说明

  • 密钥对要求:公钥和私钥必须成对生成,公钥可公开(下发给前端),私钥需严格保密(仅后端存储,禁止前端存储或传输);
  • 加密长度限制:JSEncrypt 加密内容长度受 RSA 密钥长度限制(如 1024 位密钥最多加密 117 字节数据);
  • 大数据加密方案:若需加密大文件/长文本,需结合 AES 对称加密:前端先用 AES 加密核心数据,再用 RSA 加密 AES 密钥,最后将"加密后的 AES 密钥 + 加密后的核心数据"一并传输给后端。

四、注意事项

  1. 兼容性:支持主流浏览器(Chrome、Firefox、Edge 等)和 Node.js 环境,无需额外配置兼容性插件;
  1. 安全性:严禁在前端保存或传输私钥,所有私钥相关操作(解密、签名)必须在后端完成;
  1. 性能:RSA 算法本身加密/解密速度较慢,不适合高频次、大批量数据的加密操作,优先用于敏感小数据(如密码、密钥)加密。

五、总结

  1. JSEncrypt 是前端实现 RSA 非对称加密的轻量级工具库,核心价值是保障前端与后端的敏感数据传输安全;
  1. 核心使用逻辑:前端用后端下发的公钥加密数据,后端用私钥解密数据,需严格遵守"公钥公开、私钥保密"的原则;
  1. 生产环境注意:需提前确认密钥长度、加密数据大小限制,大数据场景需结合对称加密技术,避免性能问题。

|(注:文档部分内容可能由 AI 生成)

相关推荐
XTTX1101 小时前
Vue3+Cesium教程(36)--动态设置降雨效果
前端·javascript·vue.js
han_4 小时前
从一道前端面试题,谈 JS 对象存储特点和运算符执行顺序
前端·javascript·面试
前端小超超4 小时前
ionic + vue3 + capacitor遇到backButton问题
前端·javascript·vue.js
EndingCoder5 小时前
枚举类型:常量集合的优雅管理
前端·javascript·typescript
cute_ming6 小时前
关于基于nodeMap重构DOM的最佳实践
java·javascript·重构
码途潇潇6 小时前
JavaScript 中 ==、===、Object.is 以及 null、undefined、undeclared 的区别
前端·javascript
Sun_小杰杰哇6 小时前
Dayjs常用操作使用
开发语言·前端·javascript·typescript·vue·reactjs·anti-design-vue
basestone7 小时前
🚀 从重复 CRUD 到工程化封装:我是如何设计 useTableList 统一列表逻辑的
javascript·react.js·ant design
pas1367 小时前
25-mini-vue fragment & Text
前端·javascript·vue.js
软件开发技术深度爱好者7 小时前
JavaScript的p5.js库使用介绍
javascript·html