前端登录密码加密传输
在HTTPS还没有普及的时候，前端采用HTTP协议，登录用户名和密码在不做任何控制的情况下是明文传输的，大量的网站都需要登录，大量的人使用同样的用户名和密码。
目的：防止登录密码名文传输（仅仅只是防止明文传输，加密效果取决于key，而key对于前台是透明的）
方式：前端页面用js加密前端登录密码，采用AES对称加密
一、前端JS加密库crypto-js
因为懒，所以直接引入整个加密库，可以根据所需要的加密算法分别引入，下载地址crypto-js
如果是分别引入，记得别忘记引入核心库core
二、前端页面代码
因为需要加密密码，所以把提交方式换成了ajax
AES加密的key为128bit，可以理解为16个字符。key由后端生成并送入前端。
<!DOCTYPE html>
<html lang="en"
xmlns:th="http://www.w3.org/1999/xhtml"
>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}">
<script src="../../static/js/jquery-3.3.1.min.js" th:src="@{/js/jquery-3.3.1.min.js}"></script>
<script src="../../static/js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>
<script src="../../static/js/crypto-js.js" th:src="@{/js/crypto-js.js}"></script>
<title>用户登录</title>
<style>
.bgColor {
background-color: rgba(243, 66, 111, 0.15)
}
.divBorder {
border: solid 1px rgba(12, 24, 255, 0.15);
padding: 10px;
margin-top: 10px;
border-radius: 10px;
text-align: center;
vertical-align: middle;
}
.h4font {
margin-top: 0px;
font-family: 微软雅黑;
font-weight: 500;
}
.center {
padding: 20% 0;
}
.verifyInput {
vertical-align: middle;
font-size: 14px;
font-weight: normal;
line-height: 1;
/*border:1px solid #999;*/
float: left;
width: 180px;
height: 30px;
}
.verifyImage {
vertical-align: middle;
float: right;
height: 30px;
}
</style>
</head>
<body>
<div class="container">
<div class="row center">
<div class="divBorder col-sm-offset-4 col-sm-4">
<h3 class="panel panel-heading h4font">
用户登录
</h3>
<h4 name="msg" th:text="${msg}"></h4>
<input type="hidden" name="key" th:value="${key}">
<!--<form class="form-horizontal" th:action="@{/login}" method="post">-->
<form class="form-horizontal" method="post">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user" aria-hidden="true"></i></span>
<input type="text" class="form-control" name="userName" placeholder="请输入用户名称"
th:value="${userName}"/>
</div>
<br>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input type="password" class="form-control" name="password" th:value="${password}"
placeholder="请输入密码"/>
</div>
<br/>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-font"></i></span>
<input type="text" class="verifyInput" name="verifyCode" placeholder="验证码"/>
<img class="verifyImage" alt="验证码" onclick="this.src='/getVerifyCode?d='+new Date()*1"
src="/getVerifyCode">
</div>
<br>
<input type="button" name="btnLogin" class="btn btn-lg btn-block btn-info" value="登 录">
</form>
</div>
</div>
</div>
<script th:inline="javascript">
$(function () {
$('input[name="btnLogin"]').click(function () {
var $key = $('input[name="key"]').val();
var $userName = $('input[name="userName"]').val();
var $password = $('input[name="password"]').val();
var $verifyCode = $('input[name="verifyCode"]').val();
// console.log($userName + ", " + $password + ", " + $verifyCode + ", " + $key);
if ($userName == "" || $password == "" || $verifyCode == "") {
alert("用户名、密码、验证码不能为空！");
return false;
}
var key = CryptoJS.enc.Utf8.parse($key);
console.log("key:" + key + ",$key:" + $key);
var password = CryptoJS.enc.Utf8.parse($password);
var encrypted = CryptoJS.AES.encrypt(password, key, {mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7});
var encryptedPwd = encrypted.toString();
// console.log("encrypted:" + encrypted);
// console.log("encryptedPwd:" + encryptedPwd);
var decrypt = CryptoJS.AES.decrypt(encryptedPwd, key, {
mode: CryptoJS.mode.ECB,
padding: CryptoJS.pad.Pkcs7
});
var testDecryptStr = CryptoJS.enc.Utf8.stringify(decrypt).toString();
// console.log("decrypt:" + decrypt);
// console.log("testDecryptStr:" + testDecryptStr);
$.ajax({
type: "post",
url: "/login",
data: {userName: $userName, password: encryptedPwd, verifyCode: $verifyCode,key: $key},
dataType: "json",
success: function (result) {
// console.log(result);
if(result.success)
{
window.location.href=result.url;
}
else
{
$('h4[name="msg"]').html(result.msg);
alert(result.msg);
}
// window.location.replace(result.url);
// $('#container').load(result.url);
},
error: function (result) {
// console.log(result);
alert(result.responseText);
}
});
})
})
</script>
</body>
</html>
三、后端解密代码
后端PKCS5Padding补码方式和前端的CryptoJS.pad.Pkcs7效果一致
public class AesUtils {
private static final String ALGORITHMSTR = "AES/ECB/PKCS5Padding";
public static String encrypt(String content, String key) {
try {
byte[] raw = key.getBytes(); //获得密码的字节数组
SecretKeySpec skey = new SecretKeySpec(raw, "AES"); //根据密码生成AES密钥
Cipher cipher = Cipher.getInstance(ALGORITHMSTR); //根据指定算法ALGORITHM自成密码器
cipher.init(Cipher.ENCRYPT_MODE, skey); //初始化密码器，第一个参数为加密(ENCRYPT_MODE)或者解密(DECRYPT_MODE)操作，第二个参数为生成的AES密钥
byte [] byte_content = content.getBytes("utf-8"); //获取加密内容的字节数组(设置为utf-8)不然内容中如果有中文和英文混合中文就会解密为乱码
byte [] encode_content = cipher.doFinal(byte_content); //密码器加密数据
return Base64.encodeBase64String(encode_content); //将加密后的数据转换为字符串返回
} catch (Exception e) {
e.printStackTrace();
return null;
}
}
public static String decrypt(String encryptStr, String decryptKey) {
try {
byte[] raw = decryptKey.getBytes(); //获得密码的字节数组
SecretKeySpec skey = new SecretKeySpec(raw, "AES"); //根据密码生成AES密钥
Cipher cipher = Cipher.getInstance(ALGORITHMSTR); //根据指定算法ALGORITHM自成密码器
cipher.init(Cipher.DECRYPT_MODE, skey); //初始化密码器，第一个参数为加密(ENCRYPT_MODE)或者解密(DECRYPT_MODE)操作，第二个参数为生成的AES密钥
byte [] encode_content = Base64.decodeBase64(encryptStr); //把密文字符串转回密文字节数组
byte [] byte_content = cipher.doFinal(encode_content); //密码器解密数据
return new String(byte_content,"utf-8"); //将解密后的数据转换为字符串返回
} catch (Exception e) {
e.printStackTrace();
return null;
}
}
}
四、controller贴一把
@Controller
public class HomeController {
@Resource
private LoginService loginService;
@Resource
DefaultKaptcha defaultKaptcha;
@Resource
LogService logService;
private long verifyTTL = 60;//验证码过期时间60秒
private String create16String()
{
return RandomUtils.generateString(16);
}
@RequestMapping({"/", "/index"})
public String index() {
return "index";
}
/**
* 2、生成验证码
*
* @param request
* @param response
* @throws Exception
*/
@RequestMapping("/getVerifyCode")
public void defaultKaptcha(HttpServletRequest request, HttpServletResponse response)
throws Exception {
略...
}
@RequestMapping(value = "/login", method = RequestMethod.GET)
public String toLogin(Map<String, Object> map, HttpServletRequest request) {
String key = create16String();
map.put("key",key);
return "/user/login";
}
@RequestMapping(value = "/login", method = RequestMethod.POST)
@ResponseBody
public Object login(HttpServletRequest request) throws Exception {
System.out.println("login()");
Map<String, Object> map = new HashMap<>();
String userName = request.getParameter("userName");
String encryptedPassword = request.getParameter("password");
String key = request.getParameter("key");
String verifyCode = request.getParameter("verifyCode");
String rightCode = (String) request.getSession().getAttribute("verifyCode");
Long verifyCodeTTL = (Long) request.getSession().getAttribute("verifyCodeTTL");
String password = AesUtils.decrypt(encryptedPassword,key);
Long currentMillis = System.currentTimeMillis();
if (rightCode == null || verifyCodeTTL == null) {
map.put("msg", "请刷新图片，输入验证码！");
map.put("userName", userName);
map.put("success",false);
map.put("url","/user/login");
return map;
}
Long expiredTime = (currentMillis - verifyCodeTTL) / 1000;
if (expiredTime > this.verifyTTL) {
map.put("msg", "验证码过期，请刷新图片重新输入！");
map.put("userName", userName);
map.put("success",false);
map.put("url","/user/login");
return map;
}
if (!verifyCode.equalsIgnoreCase(rightCode)) {
map.put("msg", "验证码错误，请刷新图片重新输入！");
map.put("userName", userName);
map.put("success",false);
map.put("url","/user/login");
return map;
// return "/user/login";
}
LoginResult loginResult = loginService.login(userName, password);
if (loginResult.isLogin()) {
map.put("userName", userName);
SysLog sysLog = LogFactory.createSysLog("登录","登录成功");
logService.writeLog(sysLog);
map.put("success",true);
map.put("url","/index");
return map;
// return "/index";
} else {
map.put("msg", loginResult.getResult());
map.put("userName", userName);
map.put("success",false);
map.put("url","/user/login");
return map;
// return "/user/login";
}
}
}
