朝闻道_的博客

悟来时见江海古,苍崖行遍谒玄门

前端 jsencypt 加密

在做项目中的登录功能时一般是通过form表单或者ajax方式将参数提交到服务器进行验证,在这个过程中,在前端对登录密码先进行一次加密的话,安全性肯定要优于直接提交的方式。最近在看博客园的登录页面时发现博客园的登录是用ajax发送http请求的方式,并在前端采用了加密,是采用jsencypt在前端进行加密的。后面查阅资料后了解到淘宝、京东也有用jsencypt库对登录密码进行前端加密的操作。jsencypt具体的使用参考: 
https://github.com/travist/jsencrypt

下面简单介绍基本的使用: 
创建密钥对JKS格式keystore:

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

将JKS格式keystore转换成PKCS12证书文件:

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

使用OpenSSL工具从PKCS12证书文件导出密钥对:

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

从密钥对中提取出公钥:

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

拿到公钥test_public.pem后,在cat test_public.pem查看这个公钥内容,内容是base64格式的,这个公钥就是供在前端用jsencrypt对登录密码等参数进行RSA加密用的,看下test_public.pem内容:(这里复制github上的过来,读者可以自行尝试)

-----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-----
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

接下来用一段简单的前端代码演示下jsencrypt的使用:

<!doctype html><html>
  <head>
    <title>jsencrypt使用</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对应服务端处理地址
            });
        });        

        // 使用jsencrypt库加密前端参数
        function encryptSend(url, data, publicKey){            
            var jsencrypt = new JSEncrypt();
            jsencrypt.setPublicKey(publicKey);            
            // enData用来装载加密后的数据
            var enData = new Object();            
            // 将参数用jsencrypt加密后赋给enData
            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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61

下面演示服务端解密过程,以Java为例。

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是前端密码使用公钥通过jscencrypt进行加密后得到的(这里也是复制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();
        }
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36

当然在服务端除了上面这样的处理方式外,也可以根据实际业务场景使用不同的处理方式。

转载自微信公众号:weknow

阅读更多
个人分类: 加密
想对作者说点什么? 我来说一句

RSA前端加密后台解密

2017年11月21日 49B 下载

rsa前端加密,java后台解密

2015年06月06日 2.2MB 下载

没有更多推荐了,返回首页

不良信息举报

前端 jsencypt 加密

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭