【jsencrypt】-前端RSA加解密那些事儿-及使用JsEncrypt进行加解密啦～

最新推荐文章于 2025-07-01 16:37:28 发布

原创最新推荐文章于 2025-07-01 16:37:28 发布 · 7.5k 阅读

29 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #js #安全 #vue.js #前端框架

vue 同时被 3 个专栏收录

6 篇文章

订阅专栏

vue项目

5 篇文章

订阅专栏

4 篇文章

订阅专栏

嗨～姐妹们好久不见！最近因为工作太忙啦已经开始减少博客的构思了，其实有构思好几个项目中比较感兴趣的内容想分享给大家的，但是总是觉得写的不够好不够完善，所以草稿内容很多个，每一个都很难坚持写完。不过立个flag，我会近期把这些内容都更新完毕。希望大家耐心等等～
在这里插入图片描述

今天这篇文章想重点给大家讲讲关于项目中安全扫描漏洞会发现部分敏感信息明文传输后会被爬虫抓取导致信息泄漏的问题，那么我们就需要将信息加密传输，解密展示。下面开始我们的内容吧，希望对大家的开发会有很大的帮助

RSA是什么

RSA加密算法是一种非对称加密算法，使用一对密钥：公钥和私钥。这些密钥实际上是一组数字，长度通常为1024位或2048位。密钥越长，加密强度越高，但加解密所需时间也越长。因此，应根据信息的敏感性、攻击难度和系统响应时间来综合选择合适的密钥长度。

RSA如何加解密

基本原理
RSA本质上其实就是两个公式，在了解公式之前我们先了解几个数论中的概念：互质、欧拉函数、欧拉定理、模反元素，因为csdn上面有很多内容会对该内容进行详尽的解释，有想要了解的小伙伴可以对该内容仔细研读，这里就不再进行介绍了，具体我们来看一下其原理：
公钥加密：任何人可以使用公钥加密信息。
私钥解密：只有拥有私钥的人才能解密加密的信息。
那么，如何生成密钥呢？

// 1、选择两个大素数p和q。
// 2、计算n
	n= p*q
// 3、计算欧拉函数 ϕ(n)
	ϕ(n) = (p-1)(q-1)
// 4、选择公钥指数e
	e与ϕ(n)互质，且1<e<ϕ(n)
	常用的选择是e = 65537
// 5、计算私钥指数 d
	d 是 e 关于 ϕ(n) 的模反元素，即满足：
	e×d≡1(modϕ(n))

以上是密钥的生成过程，了解此项原理之后我们开始进入RSA的加解密过程：
2. RSA加密过程
先来看公式：使用公钥 (n,e) 将明文 m 加密为密文 c
在这里插入图片描述
3. RSA解密过程
使用私钥 d 将密文 c 解密为明文 m：

4. RSA密钥对生成
通过上述步骤生成公钥和私钥。
使用jsencrypt生成密钥对

const crypt = new JSEncrypt({ default_key_size: 2048 });
const publicKey = crypt.getPublicKey();
const privateKey = crypt.getPrivateKey();

加密和解密示例

使用jsencrypt进行RSA加密和解密

import JsEncrypt from 'jsencrypt/bin/jsencrypt.min.js'//项目中需要下载JsEncrypt
const publicKey = `-----BEGIN PUBLIC KEY-----YOUR_PUBLIC_KEY_HERE-----END PUBLIC KEY-----`
const privateKey = `-----BEGIN PRIVATE KEY-----YOUR_PRIVATE_KEY_HERE-----END PRIVATE KEY-----`;
const crypt = new JSEncrypt();
crypt.setPublicKey(publicKey);
const encrypted = crypt.encrypt("Hello, RSA!");
crypt.setPrivateKey(privateKey);
const decrypted = crypt.decrypt(encrypted);

加密选项和参数：

密钥长度：通常为2048位或更高。
填充模式：常用PKCS#1 v1.5或OAEP。

那么如何在axios中封装一个关于加解密的示例呢？

const axios = require('axios');
const JSEncrypt = require('jsencrypt');

// 创建 JSEncrypt 实例
const encryptor = new JSEncrypt();
const decryptor = new JSEncrypt();

// 设置公钥和私钥
const publicKey = `-----BEGIN PUBLIC KEY-----YOUR_PUBLIC_KEY_HERE-----END PUBLIC KEY-----`;
const privateKey = `-----BEGIN PRIVATE KEY-----YOUR_PRIVATE_KEY_HERE-----END PRIVATE KEY-----`;

encryptor.setPublicKey(publicKey);
decryptor.setPrivateKey(privateKey);

// 创建 Axios 实例
const api = axios.create({
    baseURL: 'https://api.example.com',
});
// 添加请求拦截器进行加密--我们统一将请求参数中需要加密的数据加上'_ESA'后缀
api.interceptors.request.use((config) => {
    if (config.data) {
        for (const key in config.data) {
            if (key.endsWith('_ESA')) {
                const originalKey = key.slice(0, -4);
                config.data[originalKey] = encryptor.encrypt(config.data[key]);
                delete config.data[key];
            }
        }
    }
    return config;
}, (error) => {
    return Promise.reject(error);
});

// 添加响应拦截器进行解密
api.interceptors.response.use((response) => {
    if (response.data) {
        for (const key in response.data) {
        //我们统一将请求参数中需要加密的数据加上'_DESA'后缀
            if (key.endsWith('_DESA')) {
                const originalKey = key.slice(0, -5);
                response.data[originalKey] = decryptor.decrypt(response.data[key]);
                delete response.data[key];
            }
        }
    }
    return response;
}, (error) => {
    return Promise.reject(error);
});

// 示例请求
api.post('/secure-endpoint', {
    username_ESA: 'user123',
    password_ESA: 'mysecretpassword', // 这些参数会被加密
})
.then(response => {
    console.log(response.data);
})
.catch(error => {
    console.error(error);
});