Make writing a habit together! This is the fifth day of my participation in the “Gold Digging Day New Plan · April More text Challenge”. Click here for more details.

Writing in the front

When making an interface request, the data we want to carry is not submitted in plaintext, that is, the parameters need to be obfuscated or encrypted, and the backend can decrypt the data to obtain the real data.

The purpose is to protect the security of data and raise the threshold for decryption into plain text. For example, in the interface request of user login, if the account and password are transmitted in plain text, it will easily cause some security problems. Therefore, it is necessary to confuse front-end parameters. Here is a self-use solution.

What interface parameters need to be processed

From the point of view of security, it is agreed that as long as there are new, modify, delete operations on the database, all need to do confusion/encryption, this kind of interface, mostly POST requests.

For GET requests, if they are normalized interfaces, they generally just get data and do not operate directly on the database, so there is no need to do parameter processing.

Of course, there are also interfaces for POST requests that don’t want to do parameter processing, which require special processing, and in the development environment, which don’t need processing for debugging purposes.

Parameter processing algorithm

Used here is, first will be treated as raw data for the query in the form of a string, and then use a random string as its key, participate in Aes encryption, and the interception of a specific string, as an original key, again Aes encryption, finally the original key using a good agreement with the back-end to Rsa public key encryption processing, specific algorithm is as follows:

/** * encrypt request data *@param {Object} RawData rawData *@returns {data, key}* /
export function encryptRequestData(rawData) {
 // dictionary sort and assign
 var result = {}, str = [], arr = Object.keys(rawData).sort();
 arr.map(m= > { result[m] = rawData[m] });

 // Process to a string in the form of query
 for (var p in result)
     result.hasOwnProperty(p) && str.push(encodeURIComponent(p) + "=" + encodeURIComponent(result[p]));
     result = str.join("&");

 // For the key to participate in Aes encryption, the processed string is symmetrically encrypted with 16-bit random code, and then the 16-bit original key is obtained from the third bit
 const rawKey = aesEncrypt(result, randomString(16)).substr(3.16);


 // Prints the last encryption parameter
 const data = aesEncrypt(JSON.stringify(rawData), rawKey);
 const key = rsaEncrypt(rawKey);

 return { data, key }
}
Copy the code

Parameter processing timing

We need to obfuscate parameters during request interception, which is only for POST requests and non-local environments, and add uncrypt to the instance to identify which interfaces can be excluded from processing.

// Request interception
instance.interceptors.request.use(
    config= > {
        config.headers.contentType = "application/x-www-form-urlencoded"

        const token = local.get('token')
        token && (config.headers.Authorization = token)

        const { method, uncrypt = false, data = {} } = config;
        (method === 'post' && !uncrypt && cfg.NODE_ENV === 'development') && (config.data = encryptRequestData(data));

        return config
    },
    error= > Promise.error(error)
)
Copy the code

Welcome to other articles

  • Vue3 Pagination component (a) basic implementation
  • Actual combat: The front-end interface request parameters are confused
  • Practice: Implement a Message component with Vue3
  • Actual combat: Vue3 Image components, incidentally support lazy loading
  • What updates does One Piece, vue.js 3.0 bring
  • An article digests the major new features of ES7, ES8, and ES9
  • Common problems and solutions for technical teams
  • Introduction to 10 common new features in ES6
  • Vue3 script Setup syntax is really cool