前端使用AES(ECB)加解密、国密算法SM2加解密、base64加解密、RSA加解密总结

memory_zzz

已于 2024-12-09 16:13:10 修改

阅读量1w

点赞数 10

CC 4.0 BY-SA版权

分类专栏：前端加密解密文章标签：前端算法安全

于 2021-11-15 15:22:46 首次发布

本文链接：https://blog.youkuaiyun.com/memory_zzz/article/details/121330714

前端加密解密专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了在前端项目中如何使用AES（ECB模式）、国密SM2、Base64以及RSA算法进行数据的加解密操作。通过具体的代码示例，展示了在React环境中如何引入和封装这些加密库，以确保敏感信息的安全传输。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. AES(ECB)加解密

AES加密在前端项目中的使用方法

本人使用的框架 React 进行的AES前端加密（不管是React，Vue，还是引入的JQuery库一样）

1) 引用

在public>index.html文件中引入

<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.js"></script>

2) 使用

var key = CryptoJS.enc.Utf8.parse("zhgerXHBVaaKm8xy")
var plaintText = 'onlystar'
var encryptedData =  CryptoJS.AES.encrypt(plaintText, key, {
    mode: CryptoJS.mode.ECB,  
    padding: CryptoJS.pad.Pkcs7
})
console.log("加密前："+plaintText) // 加密前：onlystar
console.log("加密后："+encryptedData) // 加密后：cp7hxlPgStaA4Jod5uKCuQ==
encryptedData = encryptedData.ciphertext.toString()
var encryptedHexStr = CryptoJS.enc.Hex.parse(encryptedData)
console.log("解密前hex："+encryptedHexStr) // 解密前hex：729ee1c653e04ad680e09a1de6e282b9
var encryptedBase64Str = CryptoJS.enc.Base64.stringify(encryptedHexStr)
console.log("解密前："+encryptedBase64Str) // 解密前：cp7hxlPgStaA4Jod5uKCuQ==
var decryptedData = CryptoJS.AES.decrypt(encryptedBase64Str, key, { 
    mode: CryptoJS.mode.ECB,  
    padding: CryptoJS.pad.Pkcs7
})
var decryptedStr = decryptedData.toString(CryptoJS.enc.Utf8)
console.log("解密后:"+decryptedStr) // 解密后:onlystar

3) 封装（ECB）方法

// 加密事件
encryptionHandler(word) {
    var key = CryptoJS.enc.Utf8.parse("distcoed20140222");
    var srcs = CryptoJS.enc.Utf8.parse(word);
    var encrypted = CryptoJS.AES.encrypt(srcs, key, {
        mode: CryptoJS.mode.ECB,
        padding: CryptoJS.pad.Pkcs7
    });
    return encrypted.toString();
}

// 解密事件
decryptionHandler(word) {
    var key = CryptoJS.enc.Utf8.parse("distcoed20140222");
    var decrypt = CryptoJS.AES.decrypt(word, key, {
        mode: CryptoJS.mode.ECB,
        padding: CryptoJS.pad.Pkcs7
    });
    return CryptoJS.enc.Utf8.stringify(decrypt).toString();
}

2. 国密算法SM2加解密

1) 安装

npm install --save sm-crypto

2) 使用

// 引入
const sm2 = require('sm-crypto').sm2;
const cipherMode = 0;


const publicKey = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
const privateKey = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
const value = "我是加密内容";

// 加密
let encryptData = sm2.doEncrypt(value, publicKey, cipherMode); // 加密结果
console.log("加密结果：", encryptData);

// 解密
let decryptData = sm2.doDecrypt(encryptData, privateKey, cipherMode); // 解密结果
console.log("解密结果：", decryptData);

3) 封装

const sm2 = require('sm-crypto').sm2
const cipherMode = 1 

// 加密
export function sm2Encrypt(text, key) {
  const enText = sm2.doEncrypt(text, key, cipherMode)
  return '04' + enText
}
// 解密
export function sm2Decrypt(text, key) {
  const deText = sm2.doDecrypt(text, key, cipherMode)
  return deText
}

3. base64加解密

1) 封装方法

//加密、解密算法封装：
function Base64() { 
    // private property 
    _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/="; 
    // public method for encoding 
    this.encode = function (input) { 
      var output = ""; 
      var chr1, chr2, chr3, enc1, enc2, enc3, enc4; 
      var i = 0; 
      input = _utf8_encode(input); 
      while (i < input.length) { 
        chr1 = input.charCodeAt(i++); 
        chr2 = input.charCodeAt(i++); 
        chr3 = input.charCodeAt(i++); 
        enc1 = chr1 >> 2; 
        enc2 = ((chr1 & 3) << 4) | (chr2 >> 4); 
        enc3 = ((chr2 & 15) << 2) | (chr3 >> 6); 
        enc4 = chr3 & 63; 
        if (isNaN(chr2)) { 
          enc3 = enc4 = 64; 
        } else if (isNaN(chr3)) { 
          enc4 = 64; 
        } 
        output = output + 
        _keyStr.charAt(enc1) + _keyStr.charAt(enc2) + 
        _keyStr.charAt(enc3) + _keyStr.charAt(enc4); 
      } 
      return output; 
    } 
    // public method for decoding 
    this.decode = function (input) { 
      var output = ""; 
      var chr1, chr2, chr3; 
      var enc1, enc2, enc3, enc4; 
      var i = 0; 
      input = input.replace(/[^A-Za-z0-9\+\/\=]/g, ""); 
      while (i < input.length) { 
        enc1 = _keyStr.indexOf(input.charAt(i++)); 
        enc2 = _keyStr.indexOf(input.charAt(i++)); 
        enc3 = _keyStr.indexOf(input.charAt(i++)); 
        enc4 = _keyStr.indexOf(input.charAt(i++)); 
        chr1 = (enc1 << 2) | (enc2 >> 4); 
        chr2 = ((enc2 & 15) << 4) | (enc3 >> 2); 
        chr3 = ((enc3 & 3) << 6) | enc4; 
        output = output + String.fromCharCode(chr1); 
        if (enc3 != 64) { 
          output = output + String.fromCharCode(chr2); 
        } 
        if (enc4 != 64) { 
          output = output + String.fromCharCode(chr3); 
        } 
      } 
      output = _utf8_decode(output); 
      return output; 
    } 
    // private method for UTF-8 encoding 
    _utf8_encode = function (string) { 
      string = string.replace(/\r\n/g,"\n"); 
      var utftext = ""; 
      for (var n = 0; n < string.length; n++) { 
        var c = string.charCodeAt(n); 
        if (c < 128) { 
          utftext += String.fromCharCode(c); 
        } else if((c > 127) && (c < 2048)) { 
          utftext += String.fromCharCode((c >> 6) | 192); 
          utftext += String.fromCharCode((c & 63) | 128); 
        } else { 
          utftext += String.fromCharCode((c >> 12) | 224); 
          utftext += String.fromCharCode(((c >> 6) & 63) | 128); 
          utftext += String.fromCharCode((c & 63) | 128); 
        } 
      } 
      return utftext; 
    } 
    // private method for UTF-8 decoding 
    _utf8_decode = function (utftext) { 
      var string = ""; 
      var i = 0; 
      var c = c1 = c2 = 0; 
      while ( i < utftext.length ) { 
        c = utftext.charCodeAt(i); 
        if (c < 128) { 
          string += String.fromCharCode(c); 
          i++; 
        } else if((c > 191) && (c < 224)) { 
          c2 = utftext.charCodeAt(i+1); 
          string += String.fromCharCode(((c & 31) << 6) | (c2 & 63)); 
          i += 2; 
        } else { 
          c2 = utftext.charCodeAt(i+1); 
          c3 = utftext.charCodeAt(i+2); 
          string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63)); 
          i += 3; 
        } 
      } 
      return string; 
    } 
}

2) 使用

var base = new Base64();
var value = "我是加密内容123";

// 加密
let encryptData = base.encode(value); // 加密结果
console.log("加密结果：", encryptData);

// 解密
let decryptData = base.decode(value); // 解密结果
console.log("解密结果：", decryptData);

4. RSA加解密

1) 安装

npm install jsencrypt

2) 使用

import JSEncrypt from "jsencrypt/bin/jsencrypt.min.js"

// 加密
rsaEncrypt(text, key) {
  const rsaEn = new JSEncrypt()
  rsaEn.setPublicKey(key)
  const enText = rsaEn.encrypt(text)
  return enText
}

//解密
rsaDecrypt(text, key) {
  const decrypt = new JSEncrypt()
  decrypt.setPrivateKey(key)
  const deText = decrypt.decrypt(text)
  return deText
}