GOOCODE - Find your code/scripts

0 Today we will focus on front-end encryption. Some projects involve more sensitive data, and developers will require the front end to encrypt the data before transmitting it to the back end for decryption processing. Although https has actually played a great role in protecting data transmission, for users who do not use https, front-end encryption still has a certain significance.

This article involves:
The front end uses CryptoJS to encrypt and decrypt DES or AES data;
The backend uses PHP openssl to decrypt and encrypt the data.

Front-end AES encrypted data
First install crypto-js in vue environment, crypto-js project address: https://github.com/brix/crypto-js.

npm install crypto-js --save

Introduce crypto-js in the component that needs to be called:

import CryptoJS from 'crypto-js'

AES and DES are symmetric encryption. The same key is used for encryption and decryption. In this article, we need to agree on a key for the front end and the back end. In this example, we assume that the agreed key is key=1234567890123456, AES-ECB mode. Encryption, Pkcs7 filling method.

//AES encryption
encryptByAES(string, key) {
     let ckey = CryptoJS.enc.Utf8.parse(key);
     let encrypted = CryptoJS.AES.encrypt(string, ckey, {
         mode: CryptoJS.mode.ECB,
         padding: CryptoJS.pad.Pkcs7
     });
     //return encrypted.toString(); //This method returns the base64 format ciphertext
     return encrypted.ciphertext.toString(); // return ciphertext in hex format
}

Now we want to AES encrypt the data admin:

let result = this.encryptByAES('admin', key);
console.log(result); //Export 7ae2d4a63d1c3e1a187a1fd89f471ef5

You can see that the ciphertext obtained after the final encryption is a hexadecimal string. At first glance, the result is a bit like md5 encryption, isn't it?

Back-end AES decryption data
The encrypted data of the front end is passed to the back end PHP through post or other methods. PHP AES decryption is very simple, which can be solved by using the function openssl_decrypt().

$mes = hex2bin($message);
$res = openssl_decrypt($mes, 'AES-128-ECB', $key, OPENSSL_RAW_DATA);
echo $res; //export admin

Use the same key as the front end to convert the ciphertext to hex2bin. If it is base64 format ciphertext, this step is not necessary and then decrypted. If there is no accident, the final output after decryption is: admin.

Front-end DES encrypted data
Similarly, DES encryption and decryption also need to agree on a same key. In addition, DES encryption also needs to agree on an iv (compilation amount), DES-CBC mode encryption, and Pkcs7 filling method.

encryptByDES(string, key, ivstr) {
     let KeyHex = CryptoJS.enc.Utf8.parse(key);
     let encrypted = CryptoJS.DES.encrypt(string,
         KeyHex, {
           mode: CryptoJS.mode.CBC, // ecb mode does not require an offset
           padding: CryptoJS.pad.Pkcs7,
           iv: CryptoJS.enc.Utf8.parse(ivstr)
         });

       // let hexstr = encrypted.toString(); // this method returns base64
     let hexstr = encrypted.ciphertext.toString() // returns the ciphertext in hex format
     return hexstr;
}

In the example in this article, we have agreed that the key is 1234567890123456 and the offset is iv=123456. Now the front end calls the DES encryption method:

let result = this.encryptByDES('admin', key, iv);
console.log(result); //export 2ba086ec85d01afe

Back-end DES decryption data
PHP uses openssl_decrypt() to decrypt the data:

$mes = hex2bin($message);
$res = openssl_decrypt($mes, 'DES-CBC', $key, OPENSSL_RAW_DATA, $iv);
echo $res; //export admin

Obviously, hex2bin() conversion must be performed on the encrypted data, and then directly decrypted. It is so simple. After decrypting the encrypted result of the front end, the result is: admin.

Back-end AES/DES encryption, front-end decryption
Sometimes the reverse is also done. The data returned by the backend to the frontend is encrypted by AES/DES, so the frontend needs to decrypt the ciphertext by AES/DES. The code will be directly illuminated here. For more codes, please download the DEMO source code in this article.

<?php
$key = '1234567890123456'; //Key, agreed by both front and back end in advance
$iv = '12345678'; //Offset, the front and back sides agreed in advance, this parameter is not needed in ecb mode

//AES encryption
$aes = openssl_encrypt($message,'AES-128-ECB', $key, OPENSSL_RAW_DATA);
$rs = bin2hex($aes);

//DES encryption
$des = openssl_encrypt($message,'DES-CBC', $key, OPENSSL_RAW_DATA, $iv);
$rs = bin2hex($des);

The decryption method corresponding to the front end:

//AES decryption
decryptByAES(string, key) {
     let ckey = CryptoJS.enc.Utf8.parse(key);
     let ciphertext = CryptoJS.enc.Hex.parse(string);
     let srcs = CryptoJS.enc.Base64.stringify(ciphertext);
     let decrypt = CryptoJS.AES.decrypt(srcs, ckey, {
         mode: CryptoJS.mode.ECB,
         padding: CryptoJS.pad.Pkcs7
     });
     let decrypted = decrypt.toString(CryptoJS.enc.Utf8);
     console.log(decrypted);
     //return decrypted.toString();
     return decrypted.toString(CryptoJS.enc.Utf8);
},
//DES decryption
decryptByDES(ciphertext, key, ivstr) {
     let keyHex = CryptoJS.enc.Utf8.parse(key);
     let decrypted = CryptoJS.DES.decrypt({
         ciphertext: CryptoJS.enc.Hex.parse(ciphertext)
     }, keyHex, {
         iv: CryptoJS.enc.Utf8.parse(ivstr),
         mode: CryptoJS.mode.CBC,
         padding: CryptoJS.pad.Pkcs7
     });
     return decrypted.toString(CryptoJS.enc.Utf8);
}

For AES and DES encryption, it seems simple, but their internal principles are quite complicated, and there are many modes of encryption, which will not be discussed in depth here. Whether it is front-end encryption or decryption, because symmetric encryption involves a key, the key will be directly exposed in the front-end encryption, and the key can be easily obtained by those who are interested, then there is no secret in front-end encryption. Therefore, the author prefers front-end encryption, back-end decryption, and then uses the https protocol to deploy the web environment. The real encryption application scenario should be used when the interface is connected to verify data.