前后端参数加解密方案

前后端参数加解密方案

背景

老板要求对参数加密,防止url等把信息泄露出去

简介

HTTP信息传输总会遇到参数被劫持进行二次传输的尴尬境地,为了避免这种情况,建议在前端请求的时候对上行参数进行加密传输,后端再进行解密,防止信息被盗取

知识点

前端: 框架采用VUE.JS,加密可以选用方案较为完善的CryptoJS 本文采用CryptoJS其中的aes加密方案为例 后端: 也采用对应的aes加密进行参数解析

准备

前端

用npm进行安装

npm install crypto-js

这时项目的package.json中就会引入crypto-js,打开package.json会出现以下代码

  "dependencies": {
    "crypto-js": "^3.1.9-1",
    "element-ui": "^1.4.2",
    "vue": "^2.2.1",
    "vue-resource": "^1.2.1",
    "vue-router": "^2.3.1"
  },
  

这时我们就可以开始在前端JS中进行加密操作了

后端

通过java自带的加密包即可实现

    import javax.crypto.Cipher;
    import javax.crypto.KeyGenerator;
    import javax.crypto.spec.SecretKeySpec;

##代码实现 ###JS部分 因为整个项目的请求参数都需要加密,所以这里抽离出一段请求JS 感谢这篇文章给的启发crypto.js的坑

Vue.prototype.getData = function (url,params) {
        //js获取当前日期
    	var date = new Date();
    	// 引入 CryptoJS
     	var CryptoJS = require("crypto-js");
     	//由于Java就是按照128bit给的,需要使用CryptoJS.enc.Utf8.parse方法才可以将key转为128bit的。
     	var key = CryptoJS.enc.Utf8.parse("公钥(需要16位)");
       //因为CryptoJS的规范,需要把date.getTime()转化为String类型才可以正确的加密
     	var encryptedData = CryptoJS.AES.encrypt(""+date.getTime(),key , {
    	    mode: CryptoJS.mode.ECB,
    	    padding: CryptoJS.pad.Pkcs7
    	});
     	params = params || {}
     	//把结果转化为String类型再传入后端
    	params.token = encryptedData.toString()
    	//返回VUE-resource对象
       return this.$http.post(url,params,{ emulateJSON: true });
}

在每个模块请求的代码中引入这个方法


  function:getRemain (){
		let vm = this;
		vm.getData(usages.api.vacation,{}).then((res)=>{
		   if (res.ok) {
			 //doSomething
        }
		},(res)=>{
		  //fail
     })
    }
    

###Java部分 首先要创建一个加密工具类,用于封装加密解密方法

public class EncryptUtil {
    private static final String KEY = "16位加密匙";
    private static final String ALGORITHMSTR = "AES/ECB/PKCS5Padding";
    public static String base64Encode(byte[] bytes){
        return encodeBase64String(bytes);
    }
    public static byte[] base64Decode(String base64Code) throws Exception{
        return new BASE64Decoder().decodeBuffer(base64Code);
    }
    public static byte[] aesEncryptToBytes(String content, String encryptKey) throws Exception {
        KeyGenerator kgen = KeyGenerator.getInstance("AES");
        kgen.init(128);
        Cipher cipher = Cipher.getInstance(ALGORITHMSTR);
        cipher.init(Cipher.ENCRYPT_MODE, new SecretKeySpec(encryptKey.getBytes(), "AES"));
        return cipher.doFinal(content.getBytes("utf-8"));
    }
    public static String aesEncrypt(String content, String encryptKey) throws Exception {
        return base64Encode(aesEncryptToBytes(content, encryptKey));
    }
    public static String aesDecryptByBytes(byte[] encryptBytes, String decryptKey) throws Exception {
        KeyGenerator kgen = KeyGenerator.getInstance("AES");
        kgen.init(128);
        Cipher cipher = Cipher.getInstance(ALGORITHMSTR);
        cipher.init(Cipher.DECRYPT_MODE, new SecretKeySpec(decryptKey.getBytes(), "AES"));
        byte[] decryptBytes = cipher.doFinal(encryptBytes);
        return new String(decryptBytes);
    }
    public static String aesDecrypt(String encryptStr, String decryptKey) throws Exception {
        return aesDecryptByBytes(base64Decode(encryptStr), decryptKey);
    }
    /** * 测试 * */
    public static void main(String[] args) throws Exception {
        String content = "Test";  
        System.out.println("加密前:" + content);
        System.out.println("加密密钥和解密密钥:" + KEY);
        String encrypt = aesEncrypt(content, KEY);
        System.out.println(encrypt.length()+":加密后:" + encrypt);
        String decrypt = aesDecrypt(encrypt, KEY);
        System.out.println("解密后:" + decrypt);
    }
}

在方法中调用

    EncryptUtil.aesDecrypt("","");

你可能感兴趣的:(思路,javascript,前端,vue.js)