[Front End] Use jsencrypt for front-end encryption of parameters

Posted by Sentosa on Thu, 09 May 2019 07:06:03 +0200

For login function in a project, parameters are usually submitted to the server through form form or ajax for validation. In this process, if the login password is encrypted once in the front end, the security is better than that of direct submission.Recently, when I read the login page of the blog park, I found that the login of the blog park is sent http request by ajax and encrypted in front by jsencypt.After consulting the data later, I learned that Taobao and Jingdong also use the jsencypt library to encrypt the login password.Specific use reference for jsencypt:
https://github.com/travist/jsencrypt

Here's a brief introduction to basic usage:

Create a key pair in JKS format keystore:

keytool -genkey -v -alias test -keyalg RSA -keystore test.jks

Convert JKS format keystore to PKCS12 certificate file:

keytool -importkeystore -srckeystore test.jks -destkeystore test.p12 -srcstoretype JKS -deststoretype PKCS12

Export key pairs from PKCS12 certificate files using OpenSSL tools:

openssl pkcs12 -in test.p12 -nocerts -nodes -out test.key

Extract the public key from the key pair:

openssl rsa -in test.key -pubout -out test_public.pem

When you get the public key test_public.pem, check the content of the public key in cat test_public.pem. The content is in base64 format. This public key is used for RSA encryption of login passwords and other parameters with jsencrypt on the front end. Look at the contents of test_public.pem: (Here, copy the one from github, the reader can try it by himself)

-----BEGIN RSA PUBLIC KEY-----
MIICXQIBAAKBgQDlOJu6TyygqxfWT7eLtGDwajtNFOb9I5XRb6khyfD1Yt3YiCgQ
WMNW649887VGJiGr/L5i2osbl8C9+WJTeucF+S76xFxdU6jE0NQ+Z+zEdhUTooNR
aY5nZiu5PgDB0ED/ZKBUSLKL7eibMxZtMlUDHjm4gwQco1KRMDSmXSMkDwIDAQAB
AoGAfY9LpnuWK5Bs50UVep5c93SJdUi82u7yMx4iHFMc/Z2hfenfYEzu+57fI4fv
xTQ//5DbzRR/XKb8ulNv6+CHyPF31xk7YOBfkGI8qjLoq06V+FyBfDSwL8KbLyeH
m7KUZnLNQbk8yGLzB3iYKkRHlmUanQGaNMIJziWOkN+N9dECQQD0ONYRNZeuM8zd
-----END RSA PUBLIC KEY-----

Next, a simple front-end code demonstrates the use of jsencrypt:

<!doctype html>
<html>
  <head>
    <title>jsencrypt Use</title>
    <script src="./jquery.min.js"></script>
    <script src="./jsencrypt.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $('submit').click(function() {
                var data = [];
                data['username']= $('#username').val();
                data['passwd']= $('#passwd').val();
      
                var publickey = $('#publickey').val();
                encryptSend('./Jsencrypt.do', data, publickey);  // Jsencrypt.do corresponds to the service-side processing address
            });
        });

        // Encrypt front-end parameters using jsencrypt Library
        function encryptSend(url, data, publicKey){
            var jsencrypt = new JSEncrypt();
            jsencrypt.setPublicKey(publicKey);
            // enData is used to load encrypted data
            var enData = new Object();
            // Assign parameters to enData after encrypting them with jsencrypt
            for(var key in data){
                enData[key] = jsencrypt.encrypt(data[key]);
            }
          
            $.ajax({
                url: url,
                type: 'post',
                data: enData,
                dataType: 'json',
                success: function (data) {                    
                    console.info(data);
                },
                error: function (xhr) {
                    console.error('Something went wrong....');
                }
            });
        }
    </script>
  </head>
  <body>
    <label for="publickey">Public Key</label><br/>
    <textarea id="publickey" rows="20" cols="60">
        -----BEGIN RSA PUBLIC KEY-----
        MIICXQIBAAKBgQDlOJu6TyygqxfWT7eLtGDwajtNFOb9I5XRb6khyfD1Yt3YiCgQ
        WMNW649887VGJiGr/L5i2osbl8C9+WJTeucF+S76xFxdU6jE0NQ+Z+zEdhUTooNR
        aY5nZiu5PgDB0ED/ZKBUSLKL7eibMxZtMlUDHjm4gwQco1KRMDSmXSMkDwIDAQAB
        AoGAfY9LpnuWK5Bs50UVep5c93SJdUi82u7yMx4iHFMc/Z2hfenfYEzu+57fI4fv
        xTQ//5DbzRR/XKb8ulNv6+CHyPF31xk7YOBfkGI8qjLoq06V+FyBfDSwL8KbLyeH
        m7KUZnLNQbk8yGLzB3iYKkRHlmUanQGaNMIJziWOkN+N9dECQQD0ONYRNZeuM8zd
        -----END RSA PUBLIC KEY-----
    </textarea>
    <br/>
    <label for="input">jsencrypt:</label><br/>
    name:<input id="username" name="username" type="text"></input><br/>
    password:<input id="passwd" name="passwd" type="password"></input><br/>
    <input id="submit" type="button" value="submit" />
  </body>
</html>

The following demonstrates the server-side decryption process, taking Java as an example.

import java.io.FileInputStream;
import java.security.KeyStore;
import javax.crypto.Cipher;
import org.apache.log4j.Logger;
import sun.misc.BASE64Decoder;

public class JsencryptTest {

    private static final Logger logger = Logger.getLogger(JsencryptTest.class);
    
    public static void main(String[] args) {
        byte[] bs = null;
        try {
            BASE64Decoder decoder = new BASE64Decoder();
            // encodePwd is obtained by encrypting the front-end password using the public key through jscencrypt (this is also an example of copying github)
            String encodePwd = "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQ"
                                + "DlOJu6TyygqxfWT7eLtGDwajtNFOb9I5XRb6"
                                + "khyfD1Yt3YiCgQWMNW649887VGJiGr/L5i2o"
                                + "sbl8C9+WJTeucF+S76xFxdU6jE0NQ+Z+zEdh"
                                + "UTooNRaY5nZiu5PgDB0ED/ZKBUSLKL7eibMx"
                                + "ZtMlUDHjm4gwQco1KRMDSmXSMkDwIDAQAB";
            bs = decoder.decodeBuffer(encodePwd);
        } catch (Exception e) {
            e.printStackTrace();
        }
        
        KeyStore keyStore = null;
        try {
            keyStore = KeyStore.getInstance("JKS");
            keyStore.load(new FileInputStream("D:/jsencrypt/test.jks"), "123456".toCharArray());
            Cipher cipher = Cipher.getInstance("RSA");
            cipher.init(Cipher.DECRYPT_MODE, keyStore.getKey("test", "123456".toCharArray()));
            logger.info(new String(cipher.doFinal(bs)));
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

Of course, in addition to the above processing, the server can also use different processing methods according to the actual business scenario.You can also read small headlines original text.



Author: weknow
Link: https://www.jianshu.com/p/3da3d81e1572
Source: Short Book
The copyright in the brief book is owned by the author. For any form of reprinting, contact the author for authorization and indicate the source.

Topics: github OpenSSL Java JQuery