前端开发之jsencrypt加密解密的使用方法和使用示例

ops/2025/2/4 14:52:01/

目录

RSA密钥生成选项简介

jsencrypt 使用教程

一、安装 jsencrypt

二、使用 jsencrypt 进行加密和解密

1. 创建密钥对

2. 加密数据

3. 解密数据

三、实际应用示例

加密数据并存储到 localStorage 中:

从 localStorage 中读取加密数据并解密:

四、使用示例:加密和解密函数

五、注意事项

jsencrypt vs bcryptjs


// 密钥对生成  密钥对生成

RSA密钥生成选项简介

1. 密钥位数

  • 512位: 最弱,仅用于测试
  • 1024位: 较弱,不推荐
  • 2048位 ✅: 推荐使用,安全性和性能均衡
  • 3072位: 更安全,但更慢
  • 4096位: 最安全,性能最差

2. 密钥格式

  • PKCS#1 ✅: 适合JSEncrypt使用,兼容性好
  • PKCS#8:  更现代的格式 支持更多算法

3. 输出格式

  • PEM/Base64 ✅: 最常用 可直接复制使用
  • Hex: 十六进制格式 特殊场景使用

4. 证书密码

  • 可以为空 ✅
  • 设置密码会增加安全性,但使用时需要额外步骤
密钥位数:2048位
密钥格式:PKCS#1
输出格式:PEM/Base64
证书密码:空(测试环境)

 

jsencrypt 使用教程

jsencrypt 是一个用于 JavaScript 中的数据加密解密库,允许在前端进行加密和解密操作,确保敏感信息在浏览器端的安全处理。下面是关于如何使用 jsencrypt 的详细介绍。


一、安装 jsencrypt

首先,您可以使用 npm 安装 jsencrypt

npm install jsencrypt


二、使用 jsencrypt 进行加密和解密

1. 创建密钥对

jsencrypt 中,您需要先创建一对公钥和私钥。公钥用于加密数据,私钥用于解密数据。您可以使用以下代码来设置公钥和私钥:

const JSEncrypt = require('jsencrypt');
const key = new JSEncrypt();// 设置公钥
key.setPublicKey('-----BEGIN PUBLIC KEY-----\n...your public key...\n-----END PUBLIC KEY-----');// 设置私钥
key.setPrivateKey('-----BEGIN RSA PRIVATE KEY-----\n...your private key...\n-----END RSA PRIVATE KEY-----');
2. 加密数据
const encrypted = key.encrypt('hello world');
console.log(encrypted); // 输出加密后的数据
3. 解密数据

使用私钥对加密后的数据进行解密,示例如下:

const decrypted = key.decrypt(encrypted);
console.log(decrypted); // 输出解密后的数据,应该与原始数据相同

三、实际应用示例

假设您需要将敏感数据加密后存储在 localStorage 中,并在需要时进行解密,以下是完整的实现代码:

加密数据并存储到 localStorage 中:
const JSEncrypt = require('jsencrypt');
const key = new JSEncrypt();// 设置公钥和私钥
key.setPublicKey('-----BEGIN PUBLIC KEY-----\n...your public key...\n-----END PUBLIC KEY-----');
key.setPrivateKey('-----BEGIN RSA PRIVATE KEY-----\n...your private key...\n-----END RSA PRIVATE KEY-----');const data = '敏感数据'; // 需要加密的数据
const encryptedData = key.encrypt(data);// 将加密后的数据存储到 localStorage 中
localStorage.setItem('encryptedData', encryptedData);
localStorage 中读取加密数据并解密:
const encryptedData = localStorage.getItem('encryptedData'); // 从 localStorage 获取加密后的数据
const decryptedData = key.decrypt(encryptedData); // 解密数据并获取原始数据
console.log(decryptedData); // 输出解密后的数据,应该与原始数据相同

四、使用示例:加密和解密函数

您还可以将加密和解密的逻辑封装成函数,简化后续调用:

import JSEncrypt from "jsencrypt/bin/jsencrypt.min";// 密钥对生成工具(如 http://web.chacuo.net/netrsakeypair)const publicKey = `-----BEGIN PUBLIC KEY-----
MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAgXG04cRq/BGjI3abUyu9
... (省略部分公钥) ...
-----END PUBLIC KEY-----`;const privateKey = `-----BEGIN RSA PRIVATE KEY-----
MIIEogIBAAKCAQEAgXG04cRq/BGjI3abUyu9jZKjhC4VOTrlqbNwF/jYiBvKWpc3
... (省略部分私钥) ...
-----END RSA PRIVATE KEY-----`;// 加密
export function encrypt(txt) {const encryptor = new JSEncrypt();encryptor.setPublicKey(publicKey); // 设置公钥return encryptor.encrypt(txt); // 对数据进行加密
}// 解密
export function decrypt(txt) {const encryptor = new JSEncrypt();encryptor.setPrivateKey(privateKey); // 设置私钥return encryptor.decrypt(txt); // 对数据进行解密
}

 

五、注意事项

  1. 密钥安全性:确保私钥和公钥的安全性,尤其是私钥必须保密,避免泄露。
  2. 加密算法:选择适合您的应用场景的加密算法和密钥长度,RSA 是常见的非对称加密算法,适用于许多加密需求。
  3. 浏览器兼容性jsencrypt 使用 JavaScript 来进行加解密操作,确保您的应用在目标浏览器中兼容。

通过 jsencrypt,您可以轻松在前端实现数据的加密和解密,提升数据安全性,避免敏感信息被非法窃取。

jsencrypt vs bcryptjs

  • jsencrypt
    • jsencrypt 是一个用于 非对称加密 的库,通常使用公钥加密数据,私钥解密。
    • 适用于加密数据在传输过程中保持机密性,比如在前端加密后传输到后端。
    • 典型用途:加密敏感信息如 API 密钥、用户密码等。
  • bcryptjs
    • bcryptjs 是一个用于 密码哈希 的库,通常用于 对称哈希(不可逆加密)。它不支持解密操作。
    • 主要用于将密码或其他敏感数据转化为哈希值,用于存储在数据库中进行验证。
    • 典型用途:存储用户密码、验证密码是否正确。


http://www.ppmy.cn/ops/155589.html

相关文章

Rust `struct`和 `enum`番外《哪吒、白蛇传?》

第一章:混天绫引发的血案——没有 struct 的江湖有多乱 天庭码农哪吒最近很头疼。 他写了个程序管理法宝库,结果代码乱成一锅粥: // 哪吒的早期代码:法宝属性分散传递 fn print_treasure(name: String, power_level: u32, is_…

【Jax和Flax介绍】

Jax 的概述 背景:由Google开发的开源机器学习库,结合了NumPy、Autograd和XLA,旨在提供一个高效且灵活的机器学习研究平台。核心功能: 自动微分:通过Autograd实现自动求导,简化了梯度计算。GPU加速&#xf…

使用大语言模型在表格化网络安全数据中进行高效异常检测

论文链接 Efficient anomaly detection in tabular cybersecurity data using large language models 论文主要内容 这篇论文介绍了一种基于大语言模型(LLMs)的创新方法,用于表格网络安全数据中的异常检测,称为“基于引导式提示…

【C++】线程池实现

目录 一、线程池简介线程池的核心组件实现步骤 二、C11实现线程池源码 三、线程池源码解析1. 成员变量2. 构造函数2.1 线程初始化2.2 工作线程逻辑 3. 任务提交(enqueue方法)3.1 方法签名3.2 任务封装3.3 任务入队 4. 析构函数4.1 停机控制 5. 关键技术点解析5.1 完美转发实现5…

线性调整器——耗能型调整器

线性调整器又称线性电压调节器,以下是关于它的介绍: 基本工作原理 线性调整器的基本电路如图1.1(a)所示,晶体管Q1(工作于线性状态,或非开关状态)构成一个连接直流源V和输出端V。的可调电气电阻,直流源V由60Hz隔离变压器(电气隔离和整流&#…

蓝桥杯嵌入式uart,iic,adc_scan模版

本次用到的是ttl电平 1.波特率配置 2.中断使能 为什么会乱码 //uartmy_main.h #include "my_main.h" uint8_t led_sta0x10; char text[30]; char uart_tx[50]; char uart_rx[50];extern struct Bkeys bkey[]; char passwd[3]{1,2,3}; void LED_Disp(uint8_t dsLED)…

deepseek-r1模型本地win10部署

转载自大佬:高效快速教你deepseek如何进行本地部署并且可视化对话 deepseek 如果安装遇到这个问题 Error: Post “http://127.0.0.1:11434/api/show”: read tcp 127. 用管理员cmd打开 接着再去切换盘符d: cd 文件夹 重新下载模型:ollama run deepseek…

Kafka中文文档

文章来源:https://kafka.cadn.net.cn 什么是事件流式处理? 事件流是人体中枢神经系统的数字等价物。它是 为“永远在线”的世界奠定技术基础,在这个世界里,企业越来越多地使用软件定义 和 automated,而软件的用户更…