前端数据加密的方法

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.***/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.***/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]), // 公共指数为65537
    hash: "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("");
}