当前位置: 首页 > article >正文

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

目录

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 是一个用于 密码哈希 的库,通常用于 对称哈希(不可逆加密)。它不支持解密操作。
    • 主要用于将密码或其他敏感数据转化为哈希值,用于存储在数据库中进行验证。
    • 典型用途:存储用户密码、验证密码是否正确。

相关文章:

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

目录 RSA密钥生成选项简介 jsencrypt 使用教程 一、安装 jsencrypt 二、使用 jsencrypt 进行加密和解密 1. 创建密钥对 2. 加密数据 3. 解密数据 三、实际应用示例 加密数据并存储到 localStorage 中: 从 localStorage 中读取加密数据并解密: …...

ESP32和STM32在处理中断方面的区别

为了通俗地讲解ESP32和STM32在处理中断方面的区别,我们可以把它们想象成两个不同的“智能管家”系统,各自负责管理一个家庭(即嵌入式项目)的各种任务。我们将重点放在如何处理突发事件(即中断)上。 ESP32 …...

98.1 AI量化开发:长文本AI金融智能体(Qwen-Long)对金融研报大批量处理与智能分析的实战应用

目录 0. 承前1. 简介1.1 通义千问(Qwen-Long)的长文本处理能力 2. 基础功能实现2.1 文件上传2.2 单文件分析2.3 多文件分析 3. 汇总代码&运行3.1 封装的工具函数3.2 主要功能特点3.3 使用示例3.4 首次运行3.5 运行结果展示 4. 注意事项4.1 文件要求4.2 错误处理机制4.3 最佳…...

PPT演示设置:插入音频同步切换播放时长计算

PPT中插入音频&同步切换&放时长计算 一、 插入音频及音频设置二、设置页面切换和音频同步三、播放时长计算 一、 插入音频及音频设置 1.插入音频:点击菜单栏插入-音频-选择PC上的音频(已存在的音频)或者录制音频(现场录制…...

链表的简单介绍

申明: 我们的链表可以写在类中或者接口中(接口中更好),这里我们是写在类当中。 1.节点的构造是由当前数据和指向下一个结点的地址组成,那么我们在当前这个链表的类中需要实现一个节点那么此时就需要用到内部类(当一个…...

Cocoa和Cocoa Touch是什么语言写成的?什么是Cocoa?编程语言中什么是框架?为什么苹果公司Cocoa类库有不少NS前缀?Swift编程语言?

Cocoa和Cocoa Touch是什么语言写成的? 二者主要都是用Objective-C语言编写而成的。 什么是Cocoa? Cocoa是苹果操作系统macOS和iOS上的应用程序开发框架集合,核心语言是Objective-C编程语言,在移动平台被称为Cocoa Touch,Cocoa包含多个子框架…...

AI-System 学习

《AI系统原理与架构》ZOMI https://github.com/chenzomi12/AISystem CPU、GPU、NPU 芯片基础 华为 Ascend 产品 NVLink的发展 & 结构 NVLink 拓扑、DGX 硬件渲染图...

基于聚类与相关性分析对马来西亚房价数据进行分析

碎碎念:由于最近太忙了,更新的比较慢,提前祝大家新春快乐,万事如意!本数据集的下载地址,读者可以自行下载。 1.项目背景 本项目旨在对马来西亚房地产市场进行初步的数据分析,探索各州的房产市…...

ARM嵌入式学习--第十一天(中断处理 , ADC)

--中断的概念 中断是指计算机运行过程中,出现某些意外情况需主机干预时,机器能自动停止正在运行的程序并转入处理新情况的程序,处理完毕后又返回被暂停的程序继续运行 --CPU处理事情的方式 -轮询方式 不断查询是否有事情需要处理&#xff0c…...

消息队列篇--通信协议篇--网络通信模型(OSI7层参考模型,TCP/IP分层模型)

一、OSI参考模型(Open Systems Interconnection Model) OSI参考模型是一个用于描述和标准化网络通信功能的七层框架。它由国际标准化组织(ISO)提出,旨在为不同的网络设备和协议提供一个通用的语言和结构,以…...

“新月之智”智能战术头盔系统(CITHS)

新月人物传记:人物传记之新月篇-CSDN博客 相关文章链接(更新): 星际战争模拟系统:新月的编程之道-CSDN博客 新月智能护甲系统CMIA--未来战场的守护者-CSDN博客 目录 一、引言 二、智能头盔控制系统概述 三、系统架…...

Go Fx 框架使用指南:深入理解 Provide 和 Invoke 的区别

1. 什么是 Fx 框架? Fx 是一个基于 Go 语言的依赖注入框架,专注于简化应用程序的生命周期管理和依赖的构建。在复杂的应用程序中,Fx 通过模块化的设计方式将组件连接起来,使开发者能够更高效地管理依赖关系。 Fx 的核心理念是&a…...

实验七 JSP内置对象II

实验七 JSP内置对象II 目的: 1、掌握JSP内置对象的使用。 2、理解JSP的作用域 3、掌握session,application对象的使用 实验要求: 1、完成实验题目 2、要求提交实验报告,将代码和实验结果页面截图放入报告中 实验过程&#xff1a…...

OpenCV:Harris、Shi-Tomasi角点检测

简述 在计算机视觉和图像处理领域,角点是一种重要的特征点,通常是图像中梯度变化剧烈的区域,例如建筑物的拐角、棋盘的交点等。角点检测广泛应用于目标跟踪、运动检测、拼接全景图 等任务。 本文将介绍 Harris 角点检测 和 Shi-Tomasi 角点…...

RK3568 opencv播放视频

文章目录 一、opencv相关视频播放类1. cv::VideoCapture 类主要构造方法:主要方法: 2. 视频播放基本流程代码示例: 3. 获取和设置视频属性4. 结合 FFmpeg 使用5. OpenCV 视频播放的局限性6. 结合 Qt 实现更高级的视频播放总结 二、QT中的代码…...

白话DeepSeek-R1论文(一)|AI的顿悟时刻:DeepSeek-R1-Zero 纯强化学习解锁推理新境界

最近有不少朋友来询问Deepseek的技术核心,今天开始陆续针对DeepSeek-R1论文中的核心内容进行解读,并且用大家都能听懂的方式来解读。 AI的顿悟时刻:DeepSeek-R1-Zero 纯强化学习解锁推理新境界 你有没有想过,人工智能是如何学会…...

青少年编程与数学 02-008 Pyhon语言编程基础 10课题、列表与循环语句

青少年编程与数学 02-008 Pyhon语言编程基础 10课题、列表与循环语句 一、列表二、定义与使用定义列表访问列表元素访问列表的切片修改列表元素列表的其他操作 三、运算1. 列表连接(Concatenation)2. 列表复制(Copying)3. 列表重复…...

caddy2配置http_basic用于验证用户名密码才允许访问页面

参考: basicauth (Caddyfile指令) — Caddy v2中文文档 1,查看caddy是否已经包含了Basic Auth插件 命令:caddy list-modules | grep http_basic 如果显示: http.authentication.providers.http_basic 则代表包含 Basic Auth 模…...

FOC核心原理的C语言实现

概述 应用FOC算法,比如无人机、电动汽车或工业电机控制。因此,除了理论,还需要提供实用的实现步骤、常见问题及解决方案,比如如何获取电机的位置信息(编码器或传感器),如何处理电流采样&#x…...

利用Manim库结合`matplotlib`、`numpy`和`scipy`来制作工作流程动画

以下是一个利用Manim库结合matplotlib、numpy和scipy来制作工作流程动画,展示流场速度分布计算模型,以及三流喷嘴的速度场和主要参数分布的可视化图形与动画的示例代码。这个示例将模拟一个简化的三流喷嘴速度场,通过计算速度分布并将其可视化…...

零代码搭建个人博客—Zblog结合内网穿透发布公网

目录 一、准备工作二、Z-blog 网站搭建1. XAMPP 环境设置2. Z-blog 安装3. Z-blog 网页测试 三、内网穿透工具 Cpolar 的安装和配置1. Cpolar 安装2. Cpolar 云端设置3. Cpolar 本地设置 四、本地网页发布五、注意六、本次经历总结 大家好,我是学问小小谢。 最近心血…...

宏_wps_宏修改word中所有excel表格的格式_设置字体对齐格式_删除空行等

需求: 将word中所有excel表格的格式进行统一化,修改其中的数字类型为“宋体, 五号,右对齐, 不加粗,不倾斜”,其中的中文为“宋体, 五号, 不加粗,不倾斜” 数…...

electron 应用开发实践

参考链接: https://blog.csdn.net/2401_83384536/article/details/140549279...

xss靶场

xss-labs下载地址&#xff1a;GitHub - do0dl3/xss-labs: xss 跨站漏洞平台 xss常见触发标签&#xff1a;XSS跨站脚本攻击实例与防御策略-CSDN博客 level-1 首先查看网页的源代码发现get传参的name的值test插入了html里头&#xff0c;还回显了payload的长度。 <!DOCTYPE …...

Koa 基础篇(二)—— 路由与中间件

let app new Koa() router.get(“/”,async ctx > { ctx.body “hello koa router” }) app.use(router.routes()) app.use(router.allowedMethods()) app.listen(3000) 运行项目&#xff0c;在浏览器访问本地3000端口&#xff0c;在页面上就会看到输出的语句。这就…...

Day48:获取字典键的值

在 Python 中&#xff0c;字典是一种无序的集合类型&#xff0c;它以键-值对的形式存储数据。字典的每个元素都有一个唯一的键&#xff0c;并且每个键都对应一个值。获取字典中的值是字典操作的常见任务&#xff0c;今天我们将学习如何从字典中获取键对应的值。 1. 使用方括号…...

线段树(Segment Tree)和树状数组

线段树&#xff08;Segment Tree&#xff09;和树状数组 线段树的实现链式&#xff1a;数组实现 解题思路树状数组 线段树是 二叉树结构 的衍生&#xff0c;用于高效解决区间查询和动态修改的问题&#xff0c;其中区间查询的时间复杂度为 O(logN)&#xff0c;动态修改单个元素的…...

MySQL注入中load_file()函数的使用

前言 在Msql注入中&#xff0c;load_file()函数在获得webshell以及提权过程中起着十分重要的作用&#xff0c;常被用来读取各种配置文件 而load_file函数只有在满足两个条件的情况下才可以使用&#xff1a; 文件权限&#xff1a;chmod ax pathtofile 文件大小&#xff1a;必须…...

[NOIP2007]矩阵取数游戏

点我写题 题目描述 帅帅经常跟同学玩一个矩阵取数游戏&#xff1a;对于一个给定的n*m的矩阵&#xff0c;矩阵中的每个元素aij均为非负整数。游戏规则如下&#xff1a; 1.每次取数时须从每行各取走一个元素&#xff0c;共n个。m次后取完矩阵所有元素&#xff1b; 2.每次取走的…...

DeepSeek-R1 论文解读 —— 强化学习大语言模型新时代来临?

近年来&#xff0c;人工智能&#xff08;AI&#xff09;领域发展迅猛&#xff0c;大语言模型&#xff08;LLMs&#xff09;为通用人工智能&#xff08;AGI&#xff09;的发展开辟了道路。OpenAI 的 o1 模型表现非凡&#xff0c;它引入的创新性推理时缩放技术显著提升了推理能力…...