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.
Reproduced from WeChat Public Number: weknow