A. 前端页面显示了签名的密钥怎么办
1，首先引入前端需要用到的js：crypto-js，下载命令 npm install crypto-js
将 crypto-js 文件放到要引用的路径
以下是要引用到清中巧的js
2，引用，jQuery也要记得引用哦
3，在登录页的登录按钮的function里，设置key值和iv值，这是加密的设置字段，定义要进行加密的密码passwordNode
下面再加个function
function aesMinEncrypt(key, iv, word){
var _word = CryptoJS.enc.Utf8.parse(word),
_key = CryptoJS.enc.Utf8.parse(key),
_iv = CryptoJS.enc.Utf8.parse(iv);
var encrypted = CryptoJS.AES.encrypt(_word, _key, {
iv: _iv,
mode: CryptoJS.mode.CBC,
padding: CryptoJS.pad.Pkcs7
});
return encrypted.toString();
}
3，（另一种）上面的过程也可以这样
function encryption(){
//密钥 (需要前端和后端保持一致)十六位作为密钥
var key = "ABCDEFGHIJKL_key";
//密钥偏移量 (需要前端和后端保持一致)十六位作为密钥偏移量
var iv = "ABCDEFGHIJKLM_iv";
var username=document.getElementById("usr").value;
// var passwordNode=document.getElementById("paw").value;
var passwordNode=aesMinEncrypt(key,iv,$("#paw").val());
console.log(passwordNode);
alert("加密后的密码为："+passwordNode);
$.ajax({
url: "login",
async:false,
type: "POST",
data: {'username':username,'password':passwordNode},
success: function (result) {
$("html").html(result);
}
});
}
function aesMinEncrypt(key, iv, word){
var _word = CryptoJS.enc.Utf8.parse(word),
_key = CryptoJS.enc.Utf8.parse(key),
_iv = CryptoJS.enc.Utf8.parse(iv);
var encrypted = CryptoJS.AES.encrypt(_word, _key, {
iv: _iv,
mode: CryptoJS.mode.CBC,
padding: CryptoJS.pad.Pkcs7
});
return encrypted.toString();
$("#form").submit();
}
4，前端加密就算是完成了，接下来是后端解密，后端解密需要用到一个工具类 AESUtils,里面是解密方法代码如下
package com.wuye.common.utils;
import cn.jpush.api.utils.StringUtils;
import sun.misc.BASE64Decoder;
import javax.crypto.Cipher;
import javax.crypto.spec.IvParameterSpec;
import javax.crypto.spec.SecretKeySpec;
/**
* TODO
*
* @author CSD
* @date 2022-07-28 14:16
*/
public class AESUtils {
//密钥 (需要前端和培碰后端保持一致)十六位作为密钥答键
private static final String KEY = "ABCDEFGHIJKL_key";
//密钥偏移量 (需要前端和后端保持一致)十六位作为密钥偏移量
private static final String IV = "ABCDEFGHIJKLM_iv";
//算法
private static final String ALGORITHMSTR = "AES/CBC/PKCS5Padding";
/**
* base 64 decode
* @param base64Code 待解码的base 64 code
* @return 解码后的byte[]
* @throws Exception
*/
public static byte[] base64Decode(String base64Code) throws Exception{
return StringUtils.isEmpty(base64Code) ? null : new BASE64Decoder().decodeBuffer(base64Code);
}
/**
* AES解密
* @param encryptBytes 待解密的byte[]
* @return 解密后的String
* @throws Exception
*/
public static String aesDecryptByBytes(byte[] encryptBytes) throws Exception {
Cipher cipher = Cipher.getInstance(ALGORITHMSTR);
byte[] temp = IV.getBytes("UTF-8");
IvParameterSpec iv = new IvParameterSpec(temp);
cipher.init(Cipher.DECRYPT_MODE, new SecretKeySpec(KEY.getBytes(), "AES"), iv);
byte[] decryptBytes = cipher.doFinal(encryptBytes);
System.out.print(new String(decryptBytes));
return new String(decryptBytes);
}
/**
* 将base 64 code AES解密
* @param encryptStr 待解密的base 64 code
* @return 解密后的string
* @throws Exception
*/
public static String aesDecrypt(String encryptStr) throws Exception {
return StringUtils.isEmpty(encryptStr) ? null : aesDecryptByBytes(base64Decode(encryptStr));
}
//测试一下
public static void main(String[] args) throws Exception {
String str = "Q uus tQvLdwtGSldhrtKQ==";
str = str.replace(" ", "+");
System.out.println(str);
aesDecrypt(str);
}
}
5，在密码验证的java页面做解密，建议打断点看看走的哪里，解密很简单，就一句
password = AESUtils.aesDecrypt(getPassword
B. 记录一下前端使用CryptoJS的几种加密方式
自己太小白了，之前在PC端项目中使用的MD5加密，现在的小程序项目使用了 CryptoJS 里面的 enc-base64 和 hmac-sha1 ，之前没有用到过这两种，所以比较疑惑，为何在小程序不继续使用 MD5 呢？所以在这里记录一下自己解疑惑的一些知识点。
随着互联网的兴起，我们对信息的安全越来越受重视，这样就导致在web开发中，对用户密码等各种加密变得更加重要了。与服务器的交互中，为了确保数据传输的安全性，避免被黑客抓包篡改。
对于Base64编码的，我觉得看一篇文章能够解决你的疑惑，我在这里就不赘述了
🧐 Base64编码原理
如： 用户密码，请求参数，文件加密
如： 接口参数签名验证服务
支付数据、CA数字证书
前端的朋友可能会关注前端js加密，我们在做 WEB 的登录功能时一般是通过 Form 提交或 Ajax 方式提交到服务器进行验证的。为了防止抓包，登录密码肯定要先进行一次加密（RSA），再提交到服务器进行验证。一些大公司都在使用，比如淘宝、京东、新浪 等。
前端加密也有很多现成的js库，如：
JS-RSA： 用于执行OpenSSL RSA加密、解密和密钥生成的Javascript库， https://github.com/travist/jsencrypt
MD5： 单向散列加密md5 js库， https://github.com/blueimp/JavaScript-MD5
crypto-js： 对称加密AES js库， https://github.com/brix/crypto-js
-CryptoJS (crypto.js) 为 JavaScript 提供了各种各样的加密算法。
HMAC 系列是消息验证，用于验证一个消息是否被篡改——如网站上传递 email 和 hmac(email)，则接收时可以通过 hmac(email) 获知 email 是否是用户伪造的
C. 前后端交互数据加解密
本文提供了一种前后端交互数据的加解密方法，主要涉及了AES和RSA两种加密方式。
AES加密是一种对称式加密，即加密和解密所需秘钥是相同的。后端生成一组秘钥，并利用该秘钥加密数据，然后发给前端，同时也需要把秘钥发送给前端，这样前端才能解密。这样就会有风险，一旦秘钥被泄露，你的加密将不存在任何意义。同时，相比RSA加密来说，好处是不会限制加密字符串的长度。
RSA加密，是一种非对称式加密，相比AES加密，这个就安全多了。后端生成一对秘钥，自己拿着私钥，公钥可以公开。这样前端拿公钥进行加密，后端拿私钥进行解密，私钥掌握在自己手里，被泄露的风险就小了很多。当然也有不好的地方，就是被加密字符串的长度不能过长，1024的秘钥只能加密117字节以内的明文，这就比较尴尬了，可能稍微长一点的数据就会超出了，当然可以通过2048或者4096的秘钥来延长加密长度，但总会被超出。所以适合需要加密长度不长的数据，最好是已知长度的数据，这样 就不会因长度问题报错。
RSA+AES混合加密，即后端通过RSA算法生成一对公私钥，并把公钥提供给前端。前端通过AES算法生成密钥，利用公钥进行加密并送给后端，后端根据私钥进行解密，得到与前端相同的AES密钥。然后，前后端就可以利用AES密钥对称加密进行数据交互。
详细步骤如图所示。
RSA+AES混合加密，结合了两种加密方式的优点。另外，前端每次启动都会随机生成AES密钥，后端增加token失效机制（前端设置了定时任务请求token），增加了前后端数据交互的安全性。
https://www.cnblogs.com/huanzi-qch/p/10913636.html
https://blog.csdn.net/weixin_38342534/article/details/94582656
D. web前端的数据如何加密
前端数据一般都需要在后台使用的所以必须要用可逆的加密方式 现在比较流行的就是非对称的加密方式比如RSA 具体方法是生成两个秘钥 公钥 私钥 前端使用js（可以网络下载）把数据利用公钥进行加密 加密结果传给后端 后端利用私钥解密方法对数据进行解密
E. 前端加密、解密数据
首先，为了更好的加密，我们不能用简单的加密，因为很有可能会被轻松破解掉，我之前实现的加密只是简单的把数据加密，在测试过程中（安全数伏性测试），通过一些技巧还是可以解密成功。
所以，对于一些重要的信息可能需要非对称加密。
所谓的非对称加密解密，在我的理解的，就是前端用一把钥匙解密/加密，而后台用另一把钥匙来做同样的操作。
也就是，薯乱携前端加密用特定的钥匙，解密的钥匙只在陪雀后端那里。这样在传输过程中就不会把钥匙丢掉。
同样，后端加密数据用一把钥匙，解密的时候，前端自己有规定的钥匙，这样数据也不会在过程中解密截取。
1、我这里是用vue
所以，第一步 npm install jsencrypt
2、安装完之后，开始定义一个专门用来加密解密的文件，我放到utils文件里面。
引入JSEncrypt
3、重点来了加密解密
首先，我这里使用公钥加密（由后台来给你公钥）
全局引用，使用
这样加密就完成了。
通常由后台加密，前端负责加密
由后台生成私钥，然后前端用来解密。
引用和加密一样
F. jsencrypt实现前端RSA非对称加密解密（vue项目）
最近一个vue项目要求所有密码数据需要使用RSA非对称加密传输，以为挺简单，结果开发过程中还是遇到了些问题，简单做个笔记。同时也希望可以帮助到遇到同样问题的道友门。
重点来了：使用jsencrypt实现RSA非对称加解密
因为这里直接闭衡春在前端加解密，所以需要一对现成的密钥，我们通过 密钥在线生成器 得到：
然后在需要使用的文件中引入JSEncrypt，我是将所有工具拦颂函数都封装在一个js文件的，我就直接在该文件中引入，我看也有人是在main.js中引入的。
到这里我们的加密解密方法就完成了，在需要的地方直接拿过来用就好了！
大功告成！这样就完了？我以为这样就ok了。
当然，如果没有遇到这个bug，就可以忽略下面的内容了。
从上面截图可以看到，重启项目的时候报错： navigator is not defined
而且这个bug有点奇葩，先启动项目再引入jsencrypt就什么问题都轿耐没有，但是先引入jsencrypt再启动项目就报错。这也是我前面能顺利执行的原因所在。
通过好一通折腾，用了网上的各种方法，比如在main.js引入jsencrypt、引入jsdom之类的，都没能解决这个问题，最终还是在jsencrypt的git相关 issue 下找到了这个问题的解决方案。
到这里问题就算基本解决了，但是由于项目组不止我一个前端，我不能要求每个同事或者以后接手维护项目的同事都要在node_moles中去替换文件。
所以就采用了另外一种方案：将jsencrypt.js通过在线js压缩器压缩至jsencrypt.min.js中，然后把jsencrypt.min.js放到src/assets/jsencrypt文件夹中，就不用npm install的方式了。
换了种方式，jsencrypt的引用方式需要做出相应的调整：
参考链接： RSA非对称加密传输---前端加密&解密(VUE项目)
https://github.com/travist/jsencrypt/issues/144
PS：才疏学浅，如果有考虑不周之处或者有更好的解决方案，欢迎指正探讨！