Front-end data encryption method

1. Base64 encryption

Base64 is an encoding specification used to encode binary data into readable text form. In this page, when the user clicks the "base64 encryption" button, a JavaScript function fn1() will be called, which uses the window.btoa() method for Base64 encryption and the window.atob() method for decryption . The specific implementation is as follows:

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

The window.btoa() method accepts a string as a parameter and returns the Base64 encoded result of the string. The window.atob() method accepts a Base64-encoded string as a parameter and returns the encoded original string.

2. MD5 encryption

MD5 is a commonly used cryptographic hash function, which is usually used to generate a unique "fingerprint" for a piece of data, so as to verify the integrity and consistency of the data. In this page, when the user clicks the "MD5 Encryption" button, a JavaScript function fn2() will be called, which uses the md5() method provided in the md5.js library file to perform MD5 encryption operations. The specific implementation is as follows:

// 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);

}

The md5() method accepts a string as a parameter and returns the MD5 encoded result of the string.

3. SHA-1 encryption

SHA-1 is a commonly used cryptographic hash function similar to MD5 but with increased security. In this page, when the user clicks the "sha-1.js encryption" button, a JavaScript function fn3() will be called, which uses the sha1() method provided in the sha1.js library file to perform SHA-1 encryption operations . The specific implementation is as follows:

// 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);

}

The sha1() method accepts a string as a parameter and returns the SHA-1 encoded result of the string.

4. Encoding and decoding encryption

In web development, it is often necessary to encode and decode data such as URLs and cookies for easy transmission and storage. In this page, when the user clicks the "Encode, Decode, Encrypt" button, a JavaScript function fn4() will be called, which uses the escape() and unescape() methods for encoding and decoding operations. The specific implementation is as follows:

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

The escape() method accepts a string as an argument and returns the URL-encoded result of that string. The unescape() method accepts a URL-encoded string as an argument and returns the encoded original string.

Front-end encryption has the following methods:

1. Symmetric encryption: Use the same key for encryption and decryption. Common algorithms include DES, 3DES, AES, etc. The implementation is as follows:

// 加密
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);
}

1. Asymmetric encryption: Encryption and decryption using public and private keys. Common algorithms include RSA, DSA, etc. The implementation is as follows:

// 生成公钥和私钥
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);
}

1. Hash encryption: Convert data into fixed-length hash values. Common algorithms include MD5, SHA-1, SHA-256, etc. The implementation is as follows:

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

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

1. Obfuscated encryption: Enhance security by obfuscating code or adding noise. Common methods include code obfuscation and character replacement. The implementation is as follows:

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

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