前端数据加密的方法

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编码的字符串作为参数，返回该编码的原始字符串。

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

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

// 加密
function encryptByAES(message, secretKey) {
  const key = CryptoJS.enc.Utf8.parse(secretKey);
  const encrypted = CryptoJS.AES.encrypt(message, key, {
    mode: CryptoJS.mode.ECB,
    padding: CryptoJS.pad.Pkcs7
  });
  return encrypted.toString();
}

// 解密
function decryptByAES(ciphertext, secretKey) {
  const key = CryptoJS.enc.Utf8.parse(secretKey);
  const decrypted = CryptoJS.AES.decrypt(ciphertext, key, {
    mode: CryptoJS.mode.ECB,
    padding: CryptoJS.pad.Pkcs7
  });
  return decrypted.toString(CryptoJS.enc.Utf8);
}

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

// 生成公钥和私钥
const keyPair = window.crypto.subtle.generateKey(
  {
    name: "RSA-OAEP",
    modulusLength: 2048,
    publicExponent: new Uint8Array([1, 0, 1]), // 65537
    hash: "SHA-256"
  },
  true,
  ["encrypt", "decrypt"]
);

// 加密
async function encryptByRSA(message, publicKey) {
  const encodedMessage = new TextEncoder().encode(message);
  const encrypted = await window.crypto.subtle.encrypt(
    {
      name: "RSA-OAEP"
    },
    publicKey,
    encodedMessage
  );
  return window.btoa(String.fromCharCode(...new Uint8Array(encrypted)));
}

// 解密
async function decryptByRSA(ciphertext, privateKey) {
  const decodedCiphertext = Uint8Array.from(
    atob(ciphertext),
    c => c.charCodeAt(0)
  );
  const decrypted = await window.crypto.subtle.decrypt(
    {
      name: "RSA-OAEP"
    },
    privateKey,
    decodedCiphertext
  );
  return new TextDecoder().decode(decrypted);
}

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

// 计算MD5散列值
function hashByMD5(message) {
  return CryptoJS.MD5(message).toString();
}

// 计算SHA-256散列值
function hashBySHA256(message) {
  return CryptoJS.SHA256(message).toString();
}

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

// 字符串替换
function replaceChars(str) {
  return str.replace(/a/g, "@").replace(/e/g, "3").replace(/i/g, "1");
}

// 代码混淆
function obfuscateCode(code) {
  // 实现方式可以使用自己的加密算法，这里只是示例
  return code.split("").reverse().join("");
}