Js Demo
Many students do not know how to cooperate with the front-end js. Now provide an example. The example uses the crypto-js
tool to do it
Install crypto-js
npm install crypto-js
Use
Import crypto-js
import CryptoJS from 'crypto-js'
Generate AES random key
// 对于 AES-256 使用 32,我们的 SecureApi 组件就是使用的 AES-256
const key = CryptoJS.lib.WordArray.random(32).toString(CryptoJS.enc.Base64);
// AES 的 IV 通常是 16 字节
const iv = CryptoJS.lib.WordArray.random(16).toString(CryptoJS.enc.Base64);
console.log(key, iv)
Use AES encryption
const content = 'hello,您好!《》\\/'
const encryptData = encrypt(content, key, iv)
console.log('encrypt:' + encryptData)
const decryptData = decrypt(encryptData, key, iv)
console.log('decrypt:' + encryptData)
// Decrypt data: the data to be encrypted and decrypted, AES_KEY: key, IV: offset
function decrypt(data: string, AES_KEY: string, IV: string) {
let decrypt
const key = CryptoJS.enc.Base64.parse(AES_KEY);
if (IV) {
const iv = CryptoJS.enc.Base64.parse(IV);
decrypt = CryptoJS.AES.decrypt(data, key, {
iv,
mode: CryptoJS.mode.CBC,
padding: CryptoJS.pad.Pkcs7,
});
} else {
decrypt = CryptoJS.AES.decrypt(data, key, {
mode: CryptoJS.mode.ECB,
padding: CryptoJS.pad.Pkcs7,
});
}
return decrypt.toString(CryptoJS.enc.Utf8);
}
// encrypt data
function encrypt(data: string, AES_KEY: string, IV: string) {
let encrypted
const key = CryptoJS.enc.Base64.parse(AES_KEY);
if (IV) {
const iv = CryptoJS.enc.Base64.parse(IV);
encrypted = CryptoJS.AES.encrypt(data, key, {
iv,
mode: CryptoJS.mode.CBC,
padding: CryptoJS.pad.Pkcs7,
});
} else {
encrypted = CryptoJS.AES.encrypt(data, key, {
mode: CryptoJS.mode.ECB,
padding: CryptoJS.pad.Pkcs7,
});
}
return encrypted.toString();
}
Notes
WARNING
The default configuration of backend SecureApi
is the url safe form, while CryptoJS
can only generate ordinary base64, so the key, ciphertext, etc. generated by the front end need to be converted into url safe form and then sent to the back end. You must also restore the base64 in the form of url safe from the backend to ordinary base64 before giving the CryptoJS
decipher. Of course, if you close the SecureApi
url safe configuration, you don't need these processing
I will provide two examples of js methods to convert to each other
// Generated random key
const key = CryptoJS.lib.WordArray.random(32).toString(CryptoJS.enc.Base64);
console.log(key)
// Encode to url safe base64
const urlSafeBase64 = urlSafeBase64Encode(key)
console.log(urlSafeBase64)
// Restore to normal base64
const originBase64 = urlSafeBase64Decode(urlSafeBase64)
console.log(originBase64)
/**
* Restore to normal base64
*/
function urlSafeBase64Decode(base64Str) {
if (!base64Str) return '';
let safeStr = base64Str.replace(/-/g, '+').replace(/_/g, '/');
let num = safeStr.length % 4;
return safeStr + '===='.substring(0, num);
}
/**
* Encode to url safe base64
*/
function urlSafeBase64Encode(base64Str) {
if (!base64Str) return '';
return base64Str.replace(/\+/g, '-').replace(/\//g, '_')
}
The above code will print the following result, you can see that "/" and "-" have been replaced with characters that match the url code, and successfully restored
YJA8eYYXFlUlNk/w+b/dY7aLofP2SYYszrwItDiHU1M=
YJA8eYYXFlUlNk_w-b_dY7aLofP2SYYszrwItDiHU1M=
YJA8eYYXFlUlNk/w+b/dY7aLofP2SYYszrwItDiHU1M=