首页 > 网络编程 > JavaScript > javascript技巧 > JavaScript JSEncrypt数据加解密

JavaScript使用JSEncrypt对数据加解密

2026-05-17 14:44:45 作者：ALITTLE_01

文章介绍了在Web开发中使用RSA非对称加密算法保护敏感信息的方法,详细讲解了JSEncrypt库的安装、使用和注意事项,此外,还提供了生成公私钥、动态获取公钥以及安全性建议等实用内容,需要的朋友可以参考下

引言

在 Web 开发中，数据安全是至关重要的环节。当涉及用户密码、身份证号等敏感信息的传输时，仅仅依赖 HTTPS 可能还不够——在金融、政务等高安全场景中，通常需要在应用层再做一次加密，以防止中间人攻击或内网抓包导致的数据泄露。

RSA 是一种非对称加密算法，它使用一对密钥：公钥加密、私钥解密。前端持有公钥进行加密，后端持有私钥进行解密，即使请求被截获，攻击者也无法还原明文数据。

1、关于 JSEncrypt

JSEncrypt 是一个基于 JavaScript 实现的 RSA 加密库，专为浏览器环境设计，提供了简单易用的 API。它的核心特点：

轻量简洁：API 只有几个核心方法，学习成本低
开箱即用：无需复杂的依赖配置
支持标准 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()
  // 设置公钥
  encryptor.setPublicKey(publicKey)
  // 对数据进行加密
  return encryptor.encrypt(txt)
}

// 解密
export function decrypt(txt) {
  if (!txt) {
    return txt;
  }
  const encryptor = new JSEncrypt()
  // 设置私钥
  encryptor.setPrivateKey(privateKey)
  // 对数据进行解密
  return encryptor.decrypt(txt)
}

4、生成公/私钥

生成公/私钥，点击生成密钥对，将生成的公钥、私钥复制到 js 文件中即可。

注意：公钥的格式必须完整包含 -----BEGIN PUBLIC KEY----- 和 -----END PUBLIC KEY----- 标记，否则加密会失败。

5、注意事项

将公钥写死在代码中虽然简单，但存在两个问题：

公钥泄露后无法及时更换
无法实现密钥轮换

最佳实践是在应用启动时或进入登录页时，从后端动态获取公钥。

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

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

// 应用启动时获取公钥
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、常见问题

加密返回 null

原因一：公钥格式不正确

确保公钥包含了正确的头尾标识：

-----BEGIN PUBLIC KEY-----
（公钥内容）
-----END PUBLIC KEY-----

原因二：待加密的数据过长

RSA 加密有长度限制（密钥长度 1024 位时，最多加密 117 字节；2048 位时最多 245 字节）。如果遇到超长内容需要加密，可以考虑：

对长文本使用 AES 对称加密，再用 RSA 加密 AES 密钥（混合加密方案）
或使用分段加密方案

Vue 3 中的使用差异

在 Vue 3 中，使用方式和 Vue 2 基本相同，唯一的区别是 Composition API 的写法：

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

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

TypeScript 支持

如果项目使用 TypeScript，可以安装类型定义：

npm install @types/jsencrypt --save-dev

7、安全性建议

必须使用 HTTPS：即使做了应用层加密，HTTPS 仍然是传输安全的基础
公钥动态获取：避免将公钥写死在前端代码中，通过接口动态获取
定期轮换密钥：后端定期生成新的密钥对，降低密钥泄露风险
配合验证码机制：防止暴力破解攻击
前端只加密，不解密：私钥只保存在服务端，前端永远不应该持有私钥

到此这篇关于JavaScript使用JSEncrypt对数据加解密的文章就介绍到这了,更多相关JavaScript JSEncrypt数据加解密内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！