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

前端开发之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 中读取加密数据并解密: …...

电路研究9.2.5——合宙Air780EP中GPS 相关命令使用方法研究

注:本命令仅适用于合宙 4G CAT1 模块(Air780EG 系列)。 正好,我们使用的Air780EP好像也有4G CAT1模块,好像也属于Air780EG系列吧。 这个例子好像比较少就个。 18.9 使用方法举例 18.1GPS 开关:ATCGNSPWR 这…...

Python标准库 - os (3) 调度策略、系统信息

文章目录 6 调度策略6.1 调度策略常量6.2 访问和设置进程的调度策略 7 系统信息7.1 系统信息7.2 系统配置信息7.3 系统负载7.4 路径相关常量7.5 生成随机字节 os模块提供了各种操作系统接口。包括环境变量、进程管理、进程调度、文件操作等方面。 这里整理了进程调度和查看系统…...

【NLP251】NLP RNN 系列网络

NLP251 系列主要记录从NLP基础网络结构到知识图谱的学习 1.原理及网络结构 1.1RNN 在Yoshua Bengio论文中( http://proceedings.mlr.press/v28/pascanu13.pdf )证明了梯度求导的一部分环节是一个指数模型…...

【漫话机器学习系列】067.希腊字母(greek letters)-写法、名称、读法和常见用途

希腊字母(Greek Letters) 希腊字母在数学、科学、工程学和编程中广泛使用,常用于表示变量、常量、参数、角度等。以下是希腊字母的完整列表及其常见用途。 大写与小写希腊字母表 大写小写名称(英文)名称(…...

2.文件IO

2.文件IO **1. 文件I/O概述****2. 文件I/O函数接口****3. 文件定位****4. 文件描述符与文件流指针的转换****5. 文件I/O与标准I/O的比较****6. 练习与作业****7. 文件I/O与标准I/O的对应关系****8. 其他注意事项****9. 总结** 1. 文件I/O概述 文件I/O:操作系统为了…...

毕业设计--具有车流量检测功能的智能交通灯设计

摘要: 随着21世纪机动车保有量的持续增加,城市交通拥堵已成为一个日益严重的问题。传统的固定绿灯时长方案导致了大量的时间浪费和交通拥堵。为解决这一问题,本文设计了一款智能交通灯系统,利用车流量检测功能和先进的算法实现了…...

【SpringBoot教程】Spring Boot + MySQL + HikariCP 连接池整合教程

🙋大家好!我是毛毛张! 🌈个人首页: 神马都会亿点点的毛毛张 在前面一篇文章中毛毛张介绍了SpringBoot中数据源与数据库连接池相关概念,今天毛毛张要分享的是关于SpringBoot整合HicariCP连接池相关知识点以及底层源码…...

设计模式的艺术-策略模式

行为型模式的名称、定义、学习难度和使用频率如下表所示: 1.如何理解策略模式 在策略模式中,可以定义一些独立的类来封装不同的算法,每个类封装一种具体的算法。在这里,每个封装算法的类都可以称之为一种策略(Strategy…...

【memgpt】letta 课程1/2:从头实现一个自我编辑、记忆和多步骤推理的代理

llms-as-operating-systems-agent-memory llms-as-operating-systems-agent-memory内存 操作系统的内存管理...

动态规划DP 最长上升子序列模型 合唱队形(题目分析+C++完整代码)

概览检索 动态规划DP 最长上升子序列模型 合唱队形 原题链接 AcWiing 482. 合唱队形 题目描述 N位同学站成一排,音乐老师要请其中的 (N−K)位同学出列,使得剩下的 K位同学排成合唱队形。 合唱队形是指这样的一种队形:设 K位同学从左到右…...

【踩坑】解决Hugging-face下载问题

解决Hugging-face下载问题 问题1:couldnt connect to https://huggingface.co问题2:HTTPSConnectionPool(hostcdn-lfs-us-1.hf-mirror.com, port443)设置hf_transfer加快速度 问题3:requests.exceptions.ChunkedEncodingError: (Connection b…...

Spring AI 在微服务中的应用:支持分布式 AI 推理

1. 引言 在现代企业中,微服务架构 已成为开发复杂系统的主流方式,而 AI 模型推理 也越来越多地被集成到业务流程中。如何在分布式微服务架构下高效地集成 Spring AI,使多个服务可以协同完成 AI 任务,并支持分布式 AI 推理&#x…...

5.3.2 软件设计原则

文章目录 抽象模块化信息隐蔽与独立性衡量 软件设计原则:抽象、模块化、信息隐蔽。 抽象 抽象是抽出事物本质的共同特性。过程抽象是指将一个明确定义功能的操作当作单个实体看待。数据抽象是对数据的类型、操作、取值范围进行定义,然后通过这些操作对数…...

java求职学习day20

1 在线考试系统 1.1 软件开发的流程 需求分析文档、概要设计文档、详细设计文档、编码和测试、安装和调试、维护和升级 1.2 软件的需求分析 在线考试系统的主要功能分析如下: ( 1 )学员系统 (1.1)用户模块&…...

Python NumPy(8):NumPy 位运算、NumPy 字符串函数

1 NumPy 位运算 位运算是一种在二进制数字的位级别上进行操作的一类运算,它们直接操作二进制数字的各个位,而不考虑数字的整体值。NumPy 提供了一系列位运算函数,允许对数组中的元素进行逐位操作,这些操作与 Python 的位运算符类似…...

日志2025.1.30

日志2025.1.30 1.简略地做了一下交互系统 public class Interactable : MonoBehaviour { private MeshRenderer renderer; private Material defaultMaterial; public Material highlightMaterial; private void Awake() { renderer GetComponentInChildren<Me…...

实战:如何快速让新网站被百度收录?

本文来自&#xff1a;百万收录网 原文链接&#xff1a;https://www.baiwanshoulu.com/22.html 要让新网站快速被百度收录&#xff0c;可以采取以下实战策略&#xff1a; 一、网站基础优化 网站结构清晰&#xff1a;确保网站的结构简洁清晰&#xff0c;符合百度的抓取规则。主…...

PhotoShop中JSX编辑器安装

1.使用ExtendScript Tookit CC编辑 1.安装 打开CEP Resource链接&#xff1a; CEP-Resources/ExtendScript-Toolkit at master Adobe-CEP/CEP-Resources (github.com) 将文件clone到本地或者下载到本地 点击AdobeExtendScriptToolKit_4_Ls22.exe安装&#xff0c;根据弹出的…...

01-时间与管理

时间与效率 一丶番茄时钟步骤好处 二丶86400s的财富利用时间的方法每天坚持写下一天计划 自我管理体系计划-行动-评价-回顾 一丶番茄时钟 一个计时器 一份任务清单,任务 步骤 每一个25分钟是一个番茄时钟 将工作时间划分为若干个25分钟的工作单元期间只专注于当前任务,遇到…...

简易版抽奖活动的设计技术方案

1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑,确保抽奖活动能够公平、公正、公开地进行,同时满足高并发访问、数据安全存储与高效处理等需求,为用户提供流畅的抽奖体验,助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...

Admin.Net中的消息通信SignalR解释

定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...

Golang dig框架与GraphQL的完美结合

将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用&#xff0c;可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器&#xff0c;能够帮助开发者更好地管理复杂的依赖关系&#xff0c;而 GraphQL 则是一种用于 API 的查询语言&#xff0c;能够提…...

MMaDA: Multimodal Large Diffusion Language Models

CODE &#xff1a; https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA&#xff0c;它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构&#xf…...

根据万维钢·精英日课6的内容,使用AI(2025)可以参考以下方法:

根据万维钢精英日课6的内容&#xff0c;使用AI&#xff08;2025&#xff09;可以参考以下方法&#xff1a; 四个洞见 模型已经比人聪明&#xff1a;以ChatGPT o3为代表的AI非常强大&#xff0c;能运用高级理论解释道理、引用最新学术论文&#xff0c;生成对顶尖科学家都有用的…...

【电力电子】基于STM32F103C8T6单片机双极性SPWM逆变(硬件篇)

本项目是基于 STM32F103C8T6 微控制器的 SPWM(正弦脉宽调制)电源模块,能够生成可调频率和幅值的正弦波交流电源输出。该项目适用于逆变器、UPS电源、变频器等应用场景。 供电电源 输入电压采集 上图为本设计的电源电路,图中 D1 为二极管, 其目的是防止正负极电源反接, …...

毫米波雷达基础理论(3D+4D)

3D、4D毫米波雷达基础知识及厂商选型 PreView : https://mp.weixin.qq.com/s/bQkju4r6med7I3TBGJI_bQ 1. FMCW毫米波雷达基础知识 主要参考博文&#xff1a; 一文入门汽车毫米波雷达基本原理 &#xff1a;https://mp.weixin.qq.com/s/_EN7A5lKcz2Eh8dLnjE19w 毫米波雷达基础…...

数据结构:泰勒展开式:霍纳法则(Horner‘s Rule)

目录 &#x1f50d; 若用递归计算每一项&#xff0c;会发生什么&#xff1f; Horners Rule&#xff08;霍纳法则&#xff09; 第一步&#xff1a;我们从最原始的泰勒公式出发 第二步&#xff1a;从形式上重新观察展开式 &#x1f31f; 第三步&#xff1a;引出霍纳法则&…...

如何通过git命令查看项目连接的仓库地址?

要通过 Git 命令查看项目连接的仓库地址&#xff0c;您可以使用以下几种方法&#xff1a; 1. 查看所有远程仓库地址 使用 git remote -v 命令&#xff0c;它会显示项目中配置的所有远程仓库及其对应的 URL&#xff1a; git remote -v输出示例&#xff1a; origin https://…...

前端工具库lodash与lodash-es区别详解

lodash 和 lodash-es 是同一工具库的两个不同版本&#xff0c;核心功能完全一致&#xff0c;主要区别在于模块化格式和优化方式&#xff0c;适合不同的开发环境。以下是详细对比&#xff1a; 1. 模块化格式 lodash 使用 CommonJS 模块格式&#xff08;require/module.exports&a…...