Javascript当中的RSA加解密

Javascript加密与解密

最近一直在玩儿Vue。讲真,前端不是我的强项。不过项目需要,也就只好边学边用。一段时间下来,感觉前端也挺好。

老实说,这个博客大概有大半年没有更新过了,杂草大概长了好几米罢。这次写博,主要还是来源于SF上的一个问答。题主大致的意思是后端传了public key,前端需要使用RSA来加密数据。

对于我这种不善前端、前端水平烂到爆表的基佬,自然会谷歌一番解决方案。于是,搜索出了travist/jsencrypt@Github。起先,我是直接将这个丢在了答案区域。不料题主在使用的过程当中大概是踩了一些坑,于是追问了。

事实上,当前距离题主追问已经有好些天了,这里也不知道题主的问题有没有得到解决。闹太套,在经过实践只好,还是准备将其贴到这里,权当做个笔记。

项目构建什么的,这里不废话,我的实际项目使用的是vue + webpack,同时包管理使用的是yarn

首先,自然是需要引入jsencrypt,超级简单。

     
     
1
     
     
yarn add jsencrypt

然后,需要import到项目当中来

     
     
1
2
3
4
5
     
     
// 很重要!!!这里不是直接引入jsencrypt
import JsEncrypt from 'jsencrypt/bin/jsencrypt'
// 将jsencrypt压入到Vue
Vue.prototype.$jsEncrypt = JsEncrypt

生成密钥、和公钥

     
     
1
2
3
4
5
6
7
     
     
// 私钥
openssl genrsa -out rsa_1024_priv.pem 1024
// cat rsa_1024_priv.pem 读取私钥内容
// 公钥
openssl rsa -pubout -in rsa_1024_priv.pem -out rsa_1024_pub.pem
// cat rsa_1024_pub.pem 读取公钥内容

开发的时候使用到了vue的组件,我们在组件中使用就会有类似下面的代码

     
     
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
     
     
// 实例化一个JSEncrypt对象
let jse = new this.$jsEncrypt.JSEncrypt()
jse.setPublicKey(`-----BEGIN PUBLIC KEY-----
MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC8ygMKjJLSUpnfXqt8lRSAdDxA
HWKi9GbTFkCbAjkRCR6VUakxxXLXHQUtPCizKcvNpuYqZ5bO8LEgpY7SL3JEdEI9
OuMnZ6ToeHPfcHeS+EgN0oYmdQ49RB5wZkcBEFk80OBEAM6VhnE0IuHGkU5ko9oP
Hq3boEQ3Ej6r3T+UhQIDAQAB
-----END PUBLIC KEY-----`)
// 设置需要加密的字符串
let encrypted = jse.encrypt('Hello, world')
// 输出加密结果
console.log(encrypted)
// 设置密钥
jse.setPrivateKey(`-----BEGIN RSA PRIVATE KEY-----
MIICXgIBAAKBgQC8ygMKjJLSUpnfXqt8lRSAdDxAHWKi9GbTFkCbAjkRCR6VUakx
xXLXHQUtPCizKcvNpuYqZ5bO8LEgpY7SL3JEdEI9OuMnZ6ToeHPfcHeS+EgN0oYm
dQ49RB5wZkcBEFk80OBEAM6VhnE0IuHGkU5ko9oPHq3boEQ3Ej6r3T+UhQIDAQAB
AoGBAIO8JwEedHlE4FBovBsT4Bl+gmhu2NxC1NlpBq3jkDSd+3RQZlLvp6IJgwo8
l13lxWv8kVF3tVkzxTW1sQJjz0RYShH8vXLl94gf6mFkJbeOPP6uA0mGDG81yINw
KUpE0RM6ZM9yKEeVdK3u67TkEBcC6Td5KBl8Yof3q7qxiOWhAkEA4BXEtpnfhgm3
7s1VjDxdIHTtWL1PihMT+SCOqp+Vv27ABVrxtDW/w2R3ZzR5ezROI2v1DVhj5wvs
xPGXx6OpSQJBANetVvazS/5SQNvb+Cmjw9Rt5NilyxfX5IsSswaIojbwhZY2FVZy
AlFH9K/YS2FYFyU7iIqN6IIkOxXpOcj/bV0CQQCRYM4MgWuotClmfkSgBJGOew14
4uj1dUch+2NTgtFOLvXZA5WICs7sXwOwKzUdH2QKSwHitJOr0+q6ItsLpDwxAkBX
zvDK+/CCmIZjfMkqWsxN3nf/ZHCtQm5/2Jsem94/M+mPYHGLgltDMGKEfTEjbrPt
qrFKh8ATzCBqKUwncybZAkEAmVNW1dftWWoriZZXXMvfFkTDgYvRmytoVEThhnd0
J/AOhZiUAs9+kHfGKivlTE209AY6Bw8aRzuTCziSwQhhBQ==
-----END RSA PRIVATE KEY-----`)
// 解密加密过的字符串
let decrypted = jse.decrypt(encrypted)
// 打印结果
console.log(decrypted)

事实上超级简单。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值