前端数据加密的方法

1. Base64加密

Base64是一种用来将二进制数据编码为可读文本形式的编码规范。在这个页面中，当用户点击“base64加密”按钮时，会调用一个JavaScript函数fn1()，该函数使用了window.btoa()方法进行Base64加密操作，并使用window.atob()方法进行解密操作。具体实现如下：

1. // base64加密
2. var fn1=()=>{
3.   // 加密
4.   var str = window.btoa('123564896514')
5.   console.log('加密后',str);
6.   // 解密
7.   var str2 = window.atob(str);
8.   console.log('解密后',str2);
9. }

window.btoa()方法接受一个字符串作为参数，返回该字符串的Base64编码结果。window.atob()方法接受一个Base64编码的字符串作为参数，返回该编码的原始字符串。

2. MD5加密

MD5是一种常用的密码散列函数，通常用于对一段数据产生唯一的“指纹”，以便于验证数据的完整性和一致性。在这个页面中，当用户点击“MD5加密”按钮时，会调用一个JavaScript函数fn2()，该函数使用了md5.js库文件中提供的md5()方法进行MD5加密操作。具体实现如下：

1. // MD5加密（不可逆的） 密码散列函数  需要引入https://cdn.bootcss.com/blueimp-md5/2.12.0/js/md5.min.js 这个js文件
2. var fn2=()=>{
3.   // 加密
4.   var str = '123'
5.   var str2 = md5(str)
6.   console.log('加密后',str2);
8. }

md5()方法接受一个字符串作为参数，返回该字符串的MD5编码结果。

3. SHA-1加密

SHA-1是一种常用的密码散列函数，类似于MD5，但具有更高的安全性。在这个页面中，当用户点击“sha-1.js加密”按钮时，会调用一个JavaScript函数fn3()，该函数使用了sha1.js库文件中提供的sha1()方法进行SHA-1加密操作。具体实现如下：

1. // sha-1加密（不可逆） 是一种数加密算法  需要引入https://cdn.bootcss.com/js-sha1/0.6.0/sha1.js  
2. var fn3=()=>{
3.   // 加密
4.   var str = '123'
5.   var str2 = sha1(str)
6.   console.log('加密后',str2);
8. }

sha1()方法接受一个字符串作为参数，返回该字符串的SHA-1编码结果。

4. 编码解码加密

在Web开发中，经常需要对URL、Cookie等数据进行编码和解码操作，以便于传输和存储。在这个页面中，当用户点击“编码解码加密”按钮时，会调用一个JavaScript函数fn4()，该函数使用了escape()和unescape()方法进行编码和解码操作。具体实现如下：

1. //编码解码  使用JS函数的escape()和unescape()
2. var fn4=()=>{
3.   // 加密
4.   var str = '中国123abc'
5.   let str1 = escape(str);
6.   console.log('加密后',str1);
7.   // 解密
8.   let str2 = unescape(str);
9.   console.log('解密后',str2);
10. }

escape()方法接受一个字符串作为参数，返回该字符串的URL编码结果。unescape()方法接受一个URL编码的字符串作为参数，返回该编码的原始字符串。

前端加密有以下几种方式：

1. 对称加密：使用相同的密钥进行加密和解密，常见的算法有DES、3DES、AES等。实现方式如下：

1. // 加密 secretKey为秘钥 message是需要加密后的字段
2. function encryptByAES(message, secretKey) {
3. // 将密钥转换为UTF-8编码的字节数组
4. const key = CryptoJS.enc.Utf8.parse(secretKey);
5. // 使用AES算法对消息进行加密
6. const encrypted = CryptoJS.AES.encrypt(message, key, {
7. mode: CryptoJS.mode.ECB, // 使用ECB模式
8. padding: CryptoJS.pad.Pkcs7 // 使用Pkcs7填充
9. });
10. // 将加密后的结果转换为字符串并返回
11. return encrypted.toString();
12. }
14. // 解密 secretKey为秘钥 ciphertext是加密后的字段
15. function decryptByAES(ciphertext, secretKey) {
16. // 将密钥转换为UTF-8编码的字节数组
17. const key = CryptoJS.enc.Utf8.parse(secretKey);
18. // 使用AES算法对密文进行解密
19. const decrypted = CryptoJS.AES.decrypt(ciphertext, key, {
20. mode: CryptoJS.mode.ECB, // 使用ECB模式
21. padding: CryptoJS.pad.Pkcs7 // 使用Pkcs7填充
22. });
23. // 将解密后的结果转换为UTF-8编码的字符串并返回
24. return decrypted.toString(CryptoJS.enc.Utf8);
25. }

1. 非对称加密：使用公钥和私钥进行加密和解密，常见的算法有RSA、DSA等。实现方式如下：

1. // 生成公钥和私钥
2. const keyPair = await window.crypto.subtle.generateKey(
3. {
4. name: "RSA-OAEP", // 使用RSA-OAEP算法
5. modulusLength: 2048, // 密钥长度为2048位
6. publicExponent: new Uint8Array([1, 0, 1]), // 公共指数为65537
7. hash: "SHA-256" // 哈希算法为SHA-256
8. },
9. true, // 生成可导出的密钥对
10. ["encrypt", "decrypt"] // 可用于加密和解密操作
11. );
12. keyPair.then(function(result) {
13. // 处理生成的密钥对
14. console.log(result.publicKey); // 打印公钥
15. console.log(result.privateKey); // 打印私钥
16. }).catch(function(error) {
17. // 处理错误
18. console.error(error);
19. });
20. // 加密
21. async function encryptByRSA(message, publicKey) {
22. // 将消息编码为Uint8Array格式
23. const encodedMessage = new TextEncoder().encode(message);
24. // 使用Web Crypto API的encrypt()方法对消息进行加密
25. const encrypted = await window.crypto.subtle.encrypt(
26. {
27. name: "RSA-OAEP" // 加密算法为RSA-OAEP
28. },
29. publicKey, // 使用传入的公钥进行加密
30. encodedMessage // 要加密的消息
31. );
32. // 将加密后的数据转换为Base64编码的字符串
33. return window.btoa(String.fromCharCode(...new Uint8Array(encrypted)));
34. }
36. // 解密 使用RSA私钥对密文进行解密
37. async function decryptByRSA(ciphertext, privateKey) {
38. // 将Base64编码的密文解码为Uint8Array格式
39. const decodedCiphertext = Uint8Array.from(
40. atob(ciphertext),
41. c => c.charCodeAt(0)
42. );
43. // 使用Web Crypto API的decrypt()方法对密文进行解密
44. const decrypted = await window.crypto.subtle.decrypt(
45. {
46. name: "RSA-OAEP" // 解密算法为RSA-OAEP
47. },
48. privateKey, // 使用传入的私钥进行解密
49. decodedCiphertext // 要解密的密文
50. );
51. // 将解密后的数据转换为字符串
52. return new TextDecoder().decode(decrypted);
53. }

1. 散列加密：将数据转化为固定长度的散列值，常见的算法有MD5、SHA-1、SHA-256等。实现方式如下：

1. //参数为要加密的字段
3. // 计算MD5散列值
4. function hashByMD5(message) {
5. return CryptoJS.MD5(message).toString();
6. }
8. // 计算SHA-256散列值
9. function hashBySHA256(message) {
10. return CryptoJS.SHA256(message).toString();
11. }

1. 混淆加密：通过混淆代码或者加入噪音的方式来增强安全性，常见的方式有代码混淆、字符替换等。实现方式如下：

1. //参数为要加密的字段
3. // 字符串替换
4. function replaceChars(str) {
5. return str.replace(/a/g, "@").replace(/e/g, "3").replace(/i/g, "1");
6. }
8. // 代码混淆
9. function obfuscateCode(code) {
10. // 实现方式可以使用自己的加密算法，这里只是示例
11. return code.split("").reverse().join("");
12. }