This is the 24th day of my participation in the August More Text Challenge

This article will explain the AES algorithm in the browser side of the JavaScript language to do a practical demonstration, why the emphasis is on the browser side? The AES algorithm application will be demonstrated separately in Node environment. If you are using it in Node environment, please move on.

Because the JavaScript standard library has limited support for THE AES algorithm, there will be a third-party library github.com/brix/crypto… CryptoJS is also recommended for use in formal environments. Due to space constraints, all the demo code will only show the key steps.

Start by introducing CryptoJS into your pages:

<! -- Replace it with the CryptoJS path you downloaded -->
<script
  type="text/javascript"
  src="path-to/bower_components/crypto-js/crypto-js.js"
></script>
Copy the code

The interface used by the CryptoJS AES algorithm is very simple, consisting of the following two encryption/decryption methods:

// plainData indicates data to be encrypted
let encrypted = CryptoJS.AES.encrypt(plainData);

// cryptoData indicates data to be decrypted
let decrypted = CryptoJS.AES.decrypt(cryptoData);
Copy the code

Yi? Why don’t we have the key, initial vector, working mode and data filling mode we talked about for a long time? Doesn’t it support it?

Of course not, such an excellent library must be supported, but it in order to greatly reduce the novice start difficulty, many parameters are built-in by default, see the details below.

Key

Encrypt and cryptojs.aes. decrypt both accept the second parameter as the key, and if the second parameter is empty, it generates a random 256-bit key for decryption. Of course, in reality, no one will not pass the key to the encryption function, otherwise how can you decrypt?

CryptoJS supports AES standard algorithms AES-128, AES-192, and AES-256, depending on the length of your key.

Actual combat demonstration:

let key = CryptoJS.enc.Hex.parse("000102030405060708090a0b0c0d0e0f");

let encrypted = CryptoJS.AES.encrypt(plainData, key);

let decrypted = CryptoJS.AES.decrypt(cryptoDatam key);
Copy the code

Initial vector (IV)

The initial vector can be passed in the third argument, using the demo:

let iv = CryptoJS.enc.Hex.parse("101112131415161718191a1b1c1d1e1f");

let encrypted = CryptoJS.AES.encrypt(plainData, key, { iv: iv });
Copy the code

Note that the iv of the standard AES algorithm is 128-bit, so a 32-character binary string is given here as an illustration. Don’t know why 128 bits? You can go to see the basic part of the “AES algorithm (four) basic working mode”.

Working Mode (M)

Working mode can also be specified in the third parameter. CryptoJS supports the following working modes: CBC, CFB, CTR, OFB, and ECB. If this parameter is not specified, the CBC mode is used by default.

Use demo:

let encrypted = CryptoJS.AES.encrypt(plainData, key, {
  mode: CryptoJS.mode.CBC,
});
Copy the code

Data filling mode (P)

The data padding mode can also be specified in the third parameter. CryptoJS supports Pkcs7, Iso97971, AnsiX923, Iso10126, ZeroPadding, and NoPadding. If this parameter is not specified, Pkcs7 is used by default.

Use demo:

let encrypted = CryptoJS.AES.encrypt(plainData, key, {
  padding: CryptoJS.pad.Pkcs7,
});
Copy the code

Yi? PKCS5 in the Java standard is not supported. Note that PKCS5 is a subset of PKCS7, and the same PKCS5 that Java uses is using PKCS7. If you are still entangled, please move to the basic part of “AES Algorithm (3) Filling mode”.

Comprehensive practical

Basic use in the above has been explained, but in order to prevent students do not know how to use, we will be a comprehensive actual combat demonstration.

In reality, common encryption requirements must be linked with the backend students, here on the basis of the same parameters used in the previous Java practice, to see if we can get the same encryption string, and also can decrypt out.

The core code is as follows, if you want to run a look and debug yourself, please go to github.com/aurthurxlc/…

let key = CryptoJS.enc.Hex.parse("e43ee68382dc550fbd1d329486febdd4");
let iv = CryptoJS.enc.Hex.parse("ddffc44a93503156abb36e9bbca876f8");
let pText = "AES algorithm based on Java practical demonstration";

let encrypted = CryptoJS.AES.encrypt(pText, key, {
  iv: iv,
  mode: CryptoJS.mode.CBC,
  padding: CryptoJS.pad.Pkcs7,
});

console.log(encrypted.ciphertext.toString()); // toHex

let decrypted = CryptoJS.AES.decrypt(encrypted, key, {
  iv: iv,
  mode: CryptoJS.mode.CBC,
  padding: CryptoJS.pad.Pkcs7,
});

console.log(CryptoJS.enc.Utf8.stringify(decrypted)); / / to a String
Copy the code

On the Console, you can see the same output as Java:

E8aa678c21aa028988cd74ee2835344519014a4e9365cb8dda7cf24bfe95dfdf0e047cf979587b02500ccad15415b1c3 AES algorithm based on Java practical demonstrationCopy the code