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

Projects using ts also need to install @types/crypto-js, otherwise it will be red when imported.

npm install @types/crypto-js

Use

Import crypto-js

import CryptoJS from 'crypto-js'

Generate AES random key

// For AES-256 using 32, our SecureApi component is using AES-256
const key = CryptoJS.lib.WordArray.random(32).toString(CryptoJS.enc.Base64);
// The IV of AES is usually 16 bytes
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
 * @param data data to be decrypted（base64）
 * @param AES_KEY key（base64）
 * @param IV offset（base64）
 * @return result（UTF-8）
 */
function decrypt(data: string, AES_KEY: string, IV: string) {
    let decrypt
    // Base64 key and iv need to be converted to CryptoJS.lib.WordArray
    const key = CryptoJS.enc.Base64.parse(AES_KEY);
    // If you pass iv, go to CBC mode, otherwise go to ECB mode
    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
 * @param data To encrypt the data, it must be of type String. String (data) is used for ordinary types, and JSON.stringify(data) is used for objects.
 * @param AES_KEY key（base64）
 * @param IV offset（base64）
 * @return result（base64）
 */
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,
        });
    }
    // The data format returned by the default encryption is base64
    return encrypted.toString();
}

Notes

WARNING

The default configuration of backend SecureApi is the url safe form, while CryptoJS can only generate and handle 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=