AES加密在前端项目中的使用方法
本人使用的框架 React 进行的AES前端加密(不管是React,Vue,还是引入的JQuery库一样)
1) 引用
在public>index.html文件中引入
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();
}
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
}
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);
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
}