1. Base64加密

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

// base64加密var fn1=()=>{ // 加密 var str = window.btoa('123564896514') console.log('加密后',str); // 解密 var str2 = window.atob(str); console.log('解密后',str2);}

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

2. MD5加密

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

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

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

3. SHA-1加密

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

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

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

4. 编码解码加密

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

//编码解码 使用JS函数的escape()和unescape()var fn4=()=>{ // 加密 var str = '中国123abc' let str1 = escape(str); console.log('加密后',str1); // 解密 let str2 = unescape(str); console.log('解密后',str2);}

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

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

  1. 对称加密：使用相同的密钥进行加密和解密，常见的算法有DES、3DES、AES等。实现方式如下：
// 加密 secretKey为秘钥message是需要加密后的字段function encryptByAES(message, secretKey) {// 将密钥转换为UTF-8编码的字节数组const key = CryptoJS.enc.Utf8.parse(secretKey);// 使用AES算法对消息进行加密const encrypted = CryptoJS.AES.encrypt(message, key, {mode: CryptoJS.mode.ECB, // 使用ECB模式padding: CryptoJS.pad.Pkcs7 // 使用Pkcs7填充});// 将加密后的结果转换为字符串并返回return encrypted.toString();}// 解密 secretKey为秘钥ciphertext是加密后的字段function decryptByAES(ciphertext, secretKey) {// 将密钥转换为UTF-8编码的字节数组const key = CryptoJS.enc.Utf8.parse(secretKey);// 使用AES算法对密文进行解密const decrypted = CryptoJS.AES.decrypt(ciphertext, key, {mode: CryptoJS.mode.ECB, // 使用ECB模式padding: CryptoJS.pad.Pkcs7 // 使用Pkcs7填充});// 将解密后的结果转换为UTF-8编码的字符串并返回return decrypted.toString(CryptoJS.enc.Utf8);}
  1. 非对称加密：使用公钥和私钥进行加密和解密，常见的算法有RSA、DSA等。实现方式如下：
 // 生成公钥和私钥const keyPair = await window.crypto.subtle.generateKey({name: "RSA-OAEP", // 使用RSA-OAEP算法modulusLength: 2048, // 密钥长度为2048位publicExponent: new Uint8Array([1, 0, 1]), // 公共指数为65537hash: "SHA-256" // 哈希算法为SHA-256},true, // 生成可导出的密钥对["encrypt", "decrypt"] // 可用于加密和解密操作);keyPair.then(function(result) {// 处理生成的密钥对console.log(result.publicKey); // 打印公钥console.log(result.privateKey); // 打印私钥}).catch(function(error) {// 处理错误console.error(error);});// 加密async function encryptByRSA(message, publicKey) {// 将消息编码为Uint8Array格式const encodedMessage = new TextEncoder().encode(message);// 使用Web Crypto API的encrypt()方法对消息进行加密const encrypted = await window.crypto.subtle.encrypt({name: "RSA-OAEP" // 加密算法为RSA-OAEP},publicKey,// 使用传入的公钥进行加密encodedMessage// 要加密的消息);// 将加密后的数据转换为Base64编码的字符串return window.btoa(String.fromCharCode(...new Uint8Array(encrypted)));} // 解密使用RSA私钥对密文进行解密async function decryptByRSA(ciphertext, privateKey) { // 将Base64编码的密文解码为Uint8Array格式const decodedCiphertext = Uint8Array.from(atob(ciphertext),c => c.charCodeAt(0)); // 使用Web Crypto API的decrypt()方法对密文进行解密const decrypted = await window.crypto.subtle.decrypt({name: "RSA-OAEP" // 解密算法为RSA-OAEP},privateKey, // 使用传入的私钥进行解密decodedCiphertext // 要解密的密文);// 将解密后的数据转换为字符串return new TextDecoder().decode(decrypted);}
  1. 散列加密：将数据转化为固定长度的散列值，常见的算法有MD5、SHA-1、SHA-256等。实现方式如下：
//参数为要加密的字段// 计算MD5散列值function hashByMD5(message) {return CryptoJS.MD5(message).toString();}// 计算SHA-256散列值function hashBySHA256(message) {return CryptoJS.SHA256(message).toString();}
  1. 混淆加密：通过混淆代码或者加入噪音的方式来增强安全性，常见的方式有代码混淆、字符替换等。实现方式如下：
//参数为要加密的字段// 字符串替换function replaceChars(str) {return str.replace(/a/g, "@").replace(/e/g, "3").replace(/i/g, "1");}// 代码混淆function obfuscateCode(code) {// 实现方式可以使用自己的加密算法，这里只是示例return code.split("").reverse().join("");}