Small knowledge, big challenge! This paper is participating in theEssentials for programmers”Creative activities.

At present, encryption is basically used in front-end development, the most common is the encryption of login password. Next, we will introduce several encryption methods.

1. The md5 encryption

There are two types of bits after MD5 encryption: 16 bits and 32 bits. The default value is 32 bits. (16-bit is actually the middle 9-24 bit portion of the 32-bit string) to improve security. You can add an offset to MD5 based on service requirements. A string specifying digits, as in the concatenation of an existing character.

1.1 Usage

npm install --save js-md5
// Then introduce it in the page
import md5 from 'js-md5';   
md5('holle') // bcecb35d0a12baad472fbe0392bcc043
Copy the code

extension

Md5 Supported Algorithms

md5.hex(' '); // d41d8cd98f00b204e9800998ecf8427e
md5.array(' '); // [212, 29, 140, 217, 143, 0, 178, 4, 233, 128, 9, 152, 236, 248, 66, 126]
md5.digest(' '); // [212, 29, 140, 217, 143, 0, 178, 4, 233, 128, 9, 152, 236, 248, 66, 126]
md5.arrayBuffer(' '); // ArrayBuffer
md5.buffer(' '); // ArrayBuffer, deprecated, This maybe confuse with Buffer in node.js. Please use arrayBuffer instead.
md5.base64(' '); 
Copy the code

2. The base64 encryption

2.1 Usage

npm install --save js-base64
/ / introduction
let Base64 = require('js-base64').Base64
/ / encryption
Base64.encode('test'); // 5bCP6aO85by+ 
Base64.encodeURI('test'); // 5bCP6aO85by- 
/ / decryption
Base64.decode('5bCP6aO85by+'); / / test
// note .decodeURI() is unnecessary since it accepts both flavors
Base64.decode('5bCP6aO85by-'); / / test
Copy the code

3. The res encryption

Front-end JS library: jsencrypt.js Github address: github.com/travist/jse…

Background: The front-end data is encrypted and transmitted to the background, which is decrypted for data processing. In the process of project development, in order to ensure data security, data need to be encrypted and decrypted in the process of front-end and back-end data transmission.

The most secure and popular encryption method is asymmetric encryption (RSA). The encryption method requires two secret keys: a private key and a public key. The public key is encrypted and the private key is decrypted.

RSA Encryption Rules

PublicKey encryption and privateKey decryption. The privateKey is encrypted and the publicKey is decrypted. Both ends need to be encrypted using a publicKey and decrypted using a privateKey.

Why is it irreversible? Front-end code is notoriously insecure. It is called a privateKey because it is private and cannot be made public. You need to ensure the security of the key. If the privateKey is encrypted, it means that the privateKey needs to be stored in the front end, which is not secure and defeats the purpose of data security.

RSA bidirectional encryption and decryption

One problem encountered during development was that the front end not only had to encrypt data to the back end, but also had to decrypt the encrypted data returned from the back end. Therefore, two methods are defined to encrypt and decrypt data.

Introduce the front-end JS library: jsencrypt.js

// RSA static decryptRSA(STR: String) {const encryptor = new JSEncrypt() // create a JSEncrypt object const privateKey = "XXXX" // privateKey string Encryptor. setPrivateKey(privateKey)// set the privateKey const decrytStr = encryptor.decrypt(STR) return decrytStr}Copy the code
// RSA encryptRSA(STR: string) {const encryptor = new JSEncrypt() // New JSEncrypt object const publicKey = ''; // encryptor.setPublicKey(publicKey) // setting the publicKey const rsaPassWord = encryptor.encrypt(STR) return rsaPassWord}Copy the code

I believe you have found the problem, we put the privateKey (privateKey), publicKey (publicKey) all in the front-end code, front-end security is poor, you can easily get the secret key pair, RSA encryption and decryption also lost value. So how do you solve this problem?

Through the communication of the front and back end, we use bidirectional encryption and decryption, which is to use two sets of secret keys to solve this problem. What is bidirectional encryption?

The back-end defines two pairs of secret keys: key pair A and key pair B.

The secret key to The public key The private key
A publicKeyA privateKeyA
B publicKeyB privateKeyB

The back-end holds privateKeyA (privateKeyA) and publicKeyB (publicKeyB), and the front-end holds publicKeyA (publicKeyA) and privateKeyB (privateKeyB).

  • Secret key to A — front-end encryption, back-end decryption

    The front-end uses publicKeyA (publicA) to encrypt data, and the back-end uses the corresponding privateKeyA (privateKeyA) to decrypt data.

  • Secret key to B — front-end decryption, back-end encryption

    The back-end uses publicKeyB (publicKeyB) for encryption, and the front-end uses the corresponding privateKeyA (privateKeyA) for decryption.

This ensures that although both the private key (privateKeyB) and public key (publicKeyA) are in the front-end code, they are not a pair and cannot be decrypted if both are obtained. It also complies with publicKey encryption and privateKey decryption rules. Perfect solution!

This plugin encrypts the res with a maximum of 117 characters.

Add the following code to the source code to redefine the encryptLong function by calling the encryptLong method.

JSEncrypt.prototype.encryptLong = function(string) { var k = this.getKey(); // var maxLength = (((k.n.bitLength()+7)>>3)-11); var maxLength = 117; try { var lt = ""; var ct = ""; If (string.length > maxLength) {lt = string.match(/.{1,117}/g); lt.forEach(function(entry) { var t1 = k.encrypt(entry); ct += t1 ; }); return hex2b64(ct); } var t = k.encrypt(string); var y = hex2b64(t); return y; } catch (ex) { return false; }};Copy the code

Praise support, hand left lingering fragrance, with rongyan, move your rich little hands yo, thank you big guy can leave your footprints.

Past wonderful recommendation

Canvas Pit Climbing Road

Don’t know SEO optimization? An article helps you understand how to do SEO optimization

Canvas Pit Road

Wechat small program development guide and optimization practice

Talk about mobile adaptation

Front-end performance optimization for actual combat

Talk about annoying regular expressions

Obtain file BLOB stream address to achieve the download function

Vue virtual DOM confused? This article will get you through the virtual DOM once and for all

Git Git

Easy to understand Git introduction

Git implements automatic push

How do I use Git in my work

Interview Recommendations

Front ten thousand literal classics – the foundation

Front swastika area – advanced section

More exciting details: personal homepage