前端MD5加密
在前端页面，我们经常会使用表单来提交我们的数据，而表单的两种提交方式get和post都具有一定的安全隐患。get请求的的参数直接在请求行显示，安全隐患较大；post请求方式虽然相对get来说较为安全，其请求参数在请求体，但也可以轻易的通过抓包来获取我们的参数值，得到用户账号、密码等信息。以用户密码为例，怎样可以让我们的密码在前端直接被加密呢？
1.直接对用户输入进行MD5加密
- 操作：在接收到用户输入的密码后，直接对用户的密码使用MD5算法进行加密。
- 优点：对用户密码进行了加密，使得用户密码不会以明文显示，在后端抓包时直接看不到密码。
- 缺点：直接改变了用户的输入，使得提交时密码密码长度变化，降低用户体验感；并且在原有密码框上做更改也容易暴露用户密码。
- 注意：MD5算法使用需要引入MD5工具类。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户登录页面</title>
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<form action="#" method="post" onsubmit="encryption()">
<span>用户名：</span><input type="text" id="user" name="username"/><br/>
<span>密码 ：</span><input type="password" id="pwd" name="password"/><br/>
<button type="submit">提交</button>
</form>
<script>
function encryption(){
pwd.value = md5(pwd.value);
}
</script>
</body>
</html>
2.使用隐藏表单+MD5加密
- 操作：设置一个隐藏密码框，在接收到用户输入的密码后，对用户的密码使用MD5算法进行加密后赋值给隐藏表单，使用隐藏表单进行提交。
- 特点：对用户密码进行了加密，使得用户密码不会以明文显示，在后端抓包时直接看不到密码，提交时前端界面用户密码长度不会变化，增加用户体验。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户登录页面</title>
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<form action="#" method="post" onsubmit="return encryption()">
<span>用户名：</span><input type="text" id="user" name="username"/><br/>
<span>密码 ：</span><input type="password" id="pwd"/><br/>
<input type="password" id="md5pwd" name="password" hidden/><br/>
<button type="submit">提交</button>
</form>
<script>
function encryption(){
md5pwd.value = md5(pwd.value);
}
</script>
</body>
</html>
- 效果如图：
转载：https://blog.csdn.net/xfjssaw/article/details/116031168
查看评论