Overview of front-end JS encryption

If the system has high security requirements, select HTTPS to transfer data. Of course, in many cases, the general Web site, if the security requirements are not very high, HTTP protocol can be used. In this case, the cleartext transfer of the password is obviously not appropriate, because if the request is intercepted in transit, you can simply log in to the site with the cleartext password.

HTTPS (443) adds the Secure Sockets Layer (SSL) protocol to HTTP (80), which relies on certificates to verify the identity of the server and to encrypt communication between the browser and the server. Encrypt with public key before transmission and decrypt with private key on server side.

For the use of HTTP protocol web front-end encryption, can only prevent the gentleman can not prevent the villain. The front end is completely exposed, including your encryption algorithms. Knowing the encryption algorithm, the password can be solved, just a matter of time. In order to ensure the security of the password stored in the database, it is necessary to use a variety of one-way (asymmetric) encryption methods at the back end of the encryption storage.

Symmetric encryption algorithms are required, that is, encrypted = encrypt(Password +key) is used on the front end and Password = Decrypt (encrypted +key) is used on the back end. The front-end only transmits the encrypted character string encrypted after the password and key, so that the encryption algorithm is known even if the request is intercepted. However, it is difficult to solve the plaintext password due to the lack of key. So this key is critical. However, this key is generated and destroyed by the control of the back end, which will become invalid immediately after use. Therefore, even if the encrypted password can be used to simulate the login request, but the key has been invalid, and the back end is still unable to verify.

Note that if the local environment is inherently insecure and the key is known, then the decryption algorithm can be used to solve the password in an instant. This is just assuming that the transmission process is intercepted. So front-end encryption can’t protect against crooks. If you really want to prevent, you can encrypt the js file encryption algorithm compression, constantly updated means to make JS files difficult to obtain, so that hackers are difficult to obtain encryption algorithm. This is what perverted Google is doing, implementing a JS virtual machine by constantly updating encryption obfuscating JS files to make encryption algorithms difficult to obtain. So a hacker who doesn’t know the encryption algorithm can’t figure it out.

Common symmetric encryption algorithms include DES, 3DES (TripleDES), AES, RC2, RC4, RC5, and Blowfis. The VUE project of the front-end encryption and decryption application is installed through NPM Install

npm install crypto-js --save
Copy the code

Create a new public js utils, create crypto.js and use AES encryption

const CryptoJS = require('crypto-js'); Const key = cryptojs.enc.utf8.parse ("1234123412ABCDEF"); // Hexadecimal number as key const iv = cryptojs.enc.utf8.parse ('ABCDEF1234123412'); // Hexadecimal number as key offset // encryption methodfunction Encrypt(word) {
    let srcs = CryptoJS.enc.Utf8.parse(word);
    let encrypted = CryptoJS.AES.encrypt(srcs, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
    returnencrypted.ciphertext.toString().toUpperCase(); } // Decrypt methodfunction Decrypt(word) {
    let encryptedHexStr = CryptoJS.enc.Hex.parse(word);
    let srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr);
    let decrypt = CryptoJS.AES.decrypt(srcs, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
    let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
    return decryptedStr.toString();
}

const desKey = CryptoJS.enc.Utf8.parse("11"); //DES encryption methodfunction desEncrypt(message) {
    let encrypted = CryptoJS.DES.encrypt(message, desKey, {
        mode: CryptoJS.mode.ECB,
        padding: CryptoJS.pad.Pkcs7
    });
    returnencrypted.toString(); } //DES decryption methodfunction desDecrypt(ciphertext) {
    if(ciphertext===""||ciphertext===null||ciphertext===undefined){
        return "";
    }
    if(typeof(ciphertext)! ="string"){
        ciphertext=ciphertext.toString();
    }
    var decrypted = CryptoJS.DES.decrypt({
        ciphertext: CryptoJS.enc.Base64.parse(ciphertext)
    }, desKey, {
        mode: CryptoJS.mode.ECB,
        padding: CryptoJS.pad.Pkcs7
    });
    return decrypted.toString(CryptoJS.enc.Utf8);
}


export default {
    Encrypt,
    Decrypt,
    desEncrypt,
    desDecrypt
}

Copy the code

Reference in a VUE file

<template><div> </template> import crypto from"@/utils/crypto.js";
export default {
    data() {return{}},created() {/** here only for demonstration **/ console.log(crypto.encrypt (122)) // console.log(crypto.decrypt (crypto.encrypt (122))) // Decrypt}}Copy the code

The Front-end encryption and decryption application requireJS project

// Tripledes is the crto.js library define(['jquery'.'Tripledes'].function ($,Tripledes){
    var groupCrypto = {};
    var fn={
        key:'huakangdashen'// t = t = t = t = t = t = t = tfunction () {
        var ECB = CryptoJS.lib.BlockCipherMode.extend();
        ECB.Encryptor = ECB.extend({
            processBlock: function(words, offset) { this._cipher.encryptBlock(words, offset); }}); ECB.Decryptor = ECB.extend({ processBlock:function(words, offset) { this._cipher.decryptBlock(words, offset); }});returnECB; } ()); /** encryptByDES= groupcrypto.encryptBydes =function(message, key) {/** Determine the type of the parameter **/if(message===""||message===null||message===undefined){
            return "";
        }
        if(typeof(message)! ="string"){
            message=message.toString();
        }
        var keyHex = CryptoJS.enc.Utf8.parse(key||fn.key);
        var encrypted = CryptoJS.DES.encrypt(message, keyHex, {
            mode: CryptoJS.mode.ECB,
            padding: CryptoJS.pad.Pkcs7
        });
        returnencrypted.toString(); } /** decryption method **/ groupcrypto.decryptbydes =function(ciphertext, key) {
        if(ciphertext===""||ciphertext===null||ciphertext===undefined){
            return "";
        }
        if(typeof(ciphertext)! ="string"){
            ciphertext=ciphertext.toString();
        }
        var keyHex = CryptoJS.enc.Utf8.parse(key||fn.key);
        var decrypted = CryptoJS.DES.decrypt({
            ciphertext: CryptoJS.enc.Base64.parse(ciphertext)
        }, keyHex, {
            mode: CryptoJS.mode.ECB,
            padding: CryptoJS.pad.Pkcs7
        });
        return decrypted.toString(CryptoJS.enc.Utf8);
    }
    return groupCrypto;
});

Copy the code

So here’s a component of Require Tripledes which is a library called Crptto.js where DES encryption is used and this code is just an example of where to put the key and you need to plan it for your project instance. You can also request that the interface be generated by the back end to generate a different key each time.

The important parameters returned by the back end of the input parameter can be decrypted by the encrypted front end