JavaScript使用JSEncrypt对数据加解密

 更新时间:2026年05月17日 14:44:44   作者: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、注意事项

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

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

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

在 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、常见问题

  1. 加密返回 null
  • 原因一:公钥格式不正确

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

-----BEGIN PUBLIC KEY-----
(公钥内容)
-----END PUBLIC KEY-----
  • 原因二:待加密的数据过长

RSA 加密有长度限制(密钥长度 1024 位时,最多加密 117 字节;2048 位时最多 245 字节)。如果遇到超长内容需要加密,可以考虑:

  • 对长文本使用 AES 对称加密,再用 RSA 加密 AES 密钥(混合加密方案)
  • 或使用分段加密方案
  1. 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>
  1. TypeScript 支持

如果项目使用 TypeScript,可以安装类型定义:

npm install @types/jsencrypt --save-dev

7、安全性建议

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

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

相关文章

  • 微信小程序实现默认第一个选中变色效果

    微信小程序实现默认第一个选中变色效果

    这篇文章主要介绍了微信小程序实现默认第一个选中变色效果,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-07-07
  • javascript中export 和export default的区别

    javascript中export 和export default的区别

    本文主要介绍了javascript中export 和export default的区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07
  • javascript 打印页面代码

    javascript 打印页面代码

    不用window.print实现的打印效果代码。
    2009-03-03
  • JavaScript设计模式之外观模式实例

    JavaScript设计模式之外观模式实例

    这篇文章主要介绍了JavaScript设计模式之外观模式实例,本文用一些代码实例来讲解JavaScript中的外观模式,需要的朋友可以参考下
    2014-10-10
  • 深入浅析JavaScript函数声明和函数表达式

    深入浅析JavaScript函数声明和函数表达式

    函数声明是以function关键字开头,必须指定函数名(如 function greet() {}),且不能作为其他语句的一部分,本文给大家介绍JavaScript函数声明和函数表达式的相关知识,感兴趣的朋友跟随小编一起看看吧
    2025-10-10
  • javascript实现标签切换代码示例

    javascript实现标签切换代码示例

    本文给大家分享的事tab切换的两段js,均可实现标签切换功能,大家根据自己的需求自由选择
    2016-05-05
  • JS库 Highlightjs 添加代码行号的实现代码

    JS库 Highlightjs 添加代码行号的实现代码

    Highlightjs是一款优秀的代码高亮Js组件,可以很方便地对各种语言编写的代码添加语法高亮样式。本文重点给大家介绍Highlightjs 添加代码行号的实现代码,需要的朋友参考下吧
    2017-09-09
  • JavaScript实现两个数组的交集

    JavaScript实现两个数组的交集

    这篇文章主要介绍了JavaScript实现两个数组的交集,给定两个数组 ​​nums1​​​和​​nums2​​返回它们的交集,输出结果中的每个元素一定是唯一的,下文详细介绍,需要的小伙伴可以参考一下
    2022-03-03
  • javaScript中json字符串操作详细例子

    javaScript中json字符串操作详细例子

    JSON(JavaScript Object Notation)是JavaScript编程语言的一个子集,正因JSON是JavaScript的一个子集,所以它可清晰的运用于此语言中,这篇文章主要给大家介绍了关于javaScript中json字符串操作的相关资料,需要的朋友可以参考下
    2023-11-11
  • WEB 前端开发中防治重复提交的实现方法

    WEB 前端开发中防治重复提交的实现方法

    这篇文章主要介绍了JS WEB 前端开发中防治重复提交的实现方法,涉及到表单提交的几种方式介绍,非常不错具有参考借鉴价值,需要的朋友可以参考下
    2016-10-10

最新评论