Detailed example of front-end vue+element using SM4 national encryption and decryption

Preface

Since the project involves payment-related functions, it is necessary to enter the password inscription to the front-end user and perform encryption processing. The method used is to process it by SM4 national cryptographic encryption algorithm. Various related tutorials have been found. Most of them are missing arms and legs, and finally I spent some time to find the processing solution. Choose which method you can do. The implementation plan is recorded below.

Project environment:

Vue2+element is developed. After understanding the following, the same applies to other frameworks using this function.

Overview of the National Secret Expansion Learning

algorithm

The National Secretariat is the domestic cryptographic algorithm recognized by the State Cryptography Administration. Mainly there are SM1, SM2, SM3, and SM4. The key length and packet length are both 128 bits.

SM1 is symmetric encryption. Its encryption strength is comparable to that of AES. This algorithm is not disclosed. When calling this algorithm, it needs to be called through the interface of the encryption chip.

SM2 is asymmetric encryption and is based on ECC. The algorithm has been disclosed. Since this algorithm is based on ECC, its signature speed and key generation speed are faster than RSA. ECC 256-bit (SM2 uses ECC 256-bit) has a higher security strength than RSA 2048-bit, but the computing speed is faster than RSA.

SM3 message summary. MD5 can be used as a comparison to understand. The algorithm has been disclosed. The verification result is 256 bits.

SM4 wireless LAN standard packet data algorithm. Symmetric encryption, the key length and packet length are both 128 bits.

2. There are two modes for sm4 encryption: ecb and cbc. The differences between the two modes are as follows (the following text comes from Baidu):

ECB: It is a basic encryption method. The ciphertext is divided into blocks of equal group lengths (not enough to be filled), and then encrypted one by one, and output one by one to form the ciphertext.

CBC: It is a loop mode (chain type), which is encrypted after the ciphertext of the previous packet and the plaintext of the current packet. The purpose of this is to increase the difficulty of cracking. (It is not easy to proactively attack, its security is better than ECB, and it is the standard of SSL and IPSec)

1. Different advantages:

ECB mode: 1. Simple; 2. Favorable for parallel calculation; 3. Error will not be transmitted;
CBC mode: 1. Not easy to proactively attack, security is better than baiECB, suitable for transmitting packets with long lengths, and is the standard of SSL and IPSec.

2. Different disadvantages:

ECB mode: 1. The mode of plain text cannot be hidden; 2. The possibility of proactive attacks on plain text;

CBC mode: 1. Not conducive to parallel computing; 2. Error transmission; 3. The vector IV needs to be initialized

Solution 1, use the code directly

1. Install the encrypted gm-crypt dependency

npm install gm-crypt

2. In the form submission method, directly add the code provided below, which is suitable for use when the frequency of use is small.
Code example:

checkPassword() {
  this.$(valid =&gt; {
      if (valid) {
          // Reference sm4 package for encryption          const SM4 = require("gm-crypt").sm4;
          let sm4Config = {
              //Configure sm4 parameters              key: "GJwsXX_BzW=gJWJW", //The key value here must be consistent with the backend, and the backend decryption is based on this key              mode: "cbc", // There are two ways to encrypt, ecb and cbc. The cbc is used here. The cbc mode also needs to add an iv parameter, ecb does not use ecb.              iv: "ZkR_SiNoSOFT=568", //iv is the second parameter of cbc mode, and it also needs to be consistent with the backend configuration.              cipherType: "base64" //
          };
          let sm4 = new SM4(sm4Config); //new a sm4 function, and pass the above sm4Config as a parameter.          ({
              newPassword: () //Encryption processing plain text password          }).then(res =&gt; {
              if ( === STATUSCODE.code01) {
                   = false;
              }else{
                  this.$()
              }
          });
      }
  });
},

Solution 2, encapsulated version, called as a public method

Encapsulate the processed function code, then export the encryption and decryption methods, and call them as public methods, which are convenient for many places, and then introduce calls into the code. Easy to maintain and later use.
1. Also install the encrypted gm-crypt dependency first

npm install gm-crypt

2. Create a new one in the project's utils directory as a public file.

const SM4 = require("gm-crypt").sm4;
const pwdKey = "GJstSK_YBD=gSOFT"; //"GJstSK_YBD=gSOFT"; The key is consistent with the front and back ends, and the back end provides the back end.let sm4Config = {
      key: pwdKey, //The key value here must be consistent with the backend, and the backend decryption is based on this key      mode: "ecb",  // There are two ways to encrypt, ecb and cbc, which also depends on how the backend is defined. However, if it is cbc, you need to add an iv parameter below, ecb does not need      iv: '1234567891011121', //iv is the second parameter of the cbc mode, and it also needs to be consistent with the backend configuration iv is the initialization vector, which is the encrypted initialization vector, the variable of the initialization encryption function, also called the initial vector.  (It should have been generated dynamically, but since the project does not have strict encryption requirements, I can just write one to death)      cipherType: "base64"
    };

const sm4Util = new SM4(sm4Config); // new sm4 function, pass the above sm4Config as a parameter.    
/*
  * Encryption tool function
  * @param {String} text
  */
export function encrypt(text) {
  return (text, pwdKey);
}

/*
  * Decryption tool function
  * @param {String} text cipher text to be decrypted
  */
 export function decrypt(text) {
  return (text, pwdKey);
}

3. Introduce

import {encrypt,decrypt} from "./" //Introduce relative paths

4. Call the corresponding method in the component and put the encrypted data into the encryption method to process it.
example:

// SM4 encryption transmission starts -----------------------------------------------------------------------------------------------------------------------const user = 'admin'; // usernameconst pass = '123456'; // password// Start encryption Username and passwordconst usernameSM4 = encrypt(user); //Encrypted usernameconst passwordSM4 = encrypt(pass); // Encrypted password

Summarize

This is the article about the front-end vue+element encrypted and decrypted using SM4 national encryption. For more related vue element encrypted and decrypted content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!