前端端使用非对称加密解密

刺骨的言语ヽ痛彻心扉 2021-07-24 15:04 522阅读 0赞

# 前言： #

### **什么是非对称加密？什么是对称加密？** ###

> 对称加密算法在加密和解密时使用的是同一个秘钥；而非对称加密算法需要两个密钥来进行加密和解密，这两个秘钥是公开密钥（public key，简称公钥）和私有密钥（private key，简称私钥）。

A要传给B一句话(需要保密)，就由B生成一对公钥和私钥存好，公钥就好比一把锁，钥匙就是私钥。B只需要把锁给A，A把那句话锁起来，交还给B，在这过程中，即使大家都能看到公钥(锁)，也是不知道那句话是啥的，然后B拿到锁好的机密，拿只有自己才有的私钥(钥匙)解开，这个差不多就是非对称加密。

### **工作流程？** ###

我这边就分为前后端来阐述：

1.  首先，我在后端生成一对密钥（公钥和私钥）并将公钥向其前端公开。
2.  然后，前端得到公钥后，使用该公钥对咬进行加密的信息进行加密(比如账户密码)，加密后将加密的信息再传给后端
3.  后端根据自己保存的另一把专用密钥（私钥）对加密后的信息进行解密，就能得到原信息，这边后端只能用其专用密钥（私钥）解密由对应的公钥加密后的信息。
4.  这样即使攻击者截获了传输的密文，并得到了前端的公钥，也无法破解密文，因为只有后端保存的私钥才能解密密文  
    这是相对比较安全的做法。

### **实操** ###

这边我前端部分采用的是jsencrypt包，我这边是使用Vue脚手架，所以示例代码也是脚手架的

#### 前端部分 ####

先安装个依赖包

npm install jsencrypt --save

然后引入

import JSEncrypt from 'jsencrypt/bin/jsencrypt'

使用它

let $JSEncrypt  = new JSEncrypt()	// 创建实例
    
    // 后端给的公钥
    let pubKey =
    `-----BEGIN PUBLIC KEY----- XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX -----END PUBLIC KEY-----`
    
    this.$JSEncrypt.setPublicKey(pubKey) // 设置公钥
    
    // 将加密的密文传给后端
    let res = await API$login({ 
    	account: $JSEncrypt.encrypt(this.account),	// 要加密的内容
    	pwd: $JSEncrypt.encrypt(this.pwd)			// 要加密的内容
    });

杂：前端解密过程

this.$JSEncrypt.setPrivateKey(privateKey)
    let getWord = this.$JSEncrypt.decrypt(rsaPassWord) // 解密
    console.log(getWord) // 输出，可以在控制台看到解密得到的字段

##### **然后后端要解密密文做判断** #####

后端我这边用的是nodeJS  
安装依赖包

npm install node-jsencrypt --save

这边不用装前端的那个依赖包，会报错，因为那个包只支持游览器环境  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70_pic_center]

使用它

const jsencrypt = require("node-jsencrypt");
    const $JSEncrypt = jsencrypt();
    let priva	teKey =
    	`-----BEGIN PRIVATE KEY----- XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX -----END PRIVATE KEY-----`
    $JSEncrypt.setPrivateKey(privateKey)
    
    console.log($JSEncrypt.decrypt(account))	// 解密内容
    console.log($JSEncrypt.decrypt(pwd))		// 解密内容

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDYwMTk0OA_size_16_color_FFFFFF_t_70_pic_center]: /images/20210724/935e6a8bb9fa4eaeaaa418f9da88beec.png