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：才疏學淺，如果有考慮不周之處或者有更好的解決方案，歡迎指正探討！