【学习笔记】前端MD5加密、后端MD5加密，实现登录页面的加密方法

最新推荐文章于 2024-05-13 00:17:31 发布

zzuli_huahua

最新推荐文章于 2024-05-13 00:17:31 发布

阅读量1.4w

点赞数 28

分类专栏：学习资料 html 文章标签： mysql java javascript

本文链接：https://blog.csdn.net/qq_43813351/article/details/118000458

版权

学习资料同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

html

4 篇文章 0 订阅

订阅专栏

前后端均实现MD5加密，post提交数据、网页隐藏真实的密码案例

对于网页来说安全是必不可少的一环，如果一个网页登录的密码没有经过加密传输，那么这个网站是及其不安全的，普通人就可以抓到包进行分析。所以在做登录界面的时候就要考虑安全了。

普遍来说使用MD5加密是相对安全的，那MD5加密算法是什么呢？

MD5信息摘要算法（英语：MD5 Message-Digest Algorithm），一种被广泛使用的密码散列函数，可以产生出一个128位（16字节）的散列值（hash value），用于确保信息传输完整一致。MD5由美国密码学家罗纳德·李维斯特（Ronald Linn Rivest）设计，于1992年公开，用以取代MD4算法。这套算法的程序在 RFC 1321 标准中被加以规范。1996年后该算法被证实存在弱点，可以被加以破解，对于需要高度安全性的数据，专家一般建议改用其他算法，如SHA-2。2004年，证实MD5算法无法防止碰撞（collision），因此不适用于安全性认证，如SSL公开密钥认证或是数字签名等用途。

可见，MD5并不是绝对安全的，通过碰撞还是可以碰出来的，比如说常见的密码123456，经过MD5加密后是：e10adc3949ba59abbe56e057f20f883e

不过只要在网上解密一下，就可以知道了，如下图所示

在这里插入图片描述

所以，是不是很不安全呢？其实不然，因为简单的数字加密，很容易被数据库储存起来。但如果是密码长一点或者字母混合数字就没这么容易被破解了

另外，还可以通过加盐（salt）的操作提高安全系数（使其不这么容易破解）

废话不多说，开始代码写起来......

1、先在HTML页面的head部分引入MD5文件

	<head>
		<script src="http://cdn.bootcss.com/blueimp-md5/1.1.0/js/md5.js"></script>
	</head>

2、然后写一个简单的登录页面，注：表单提交方式为post请求

<body class="text-center">
		<form class="form-signin" th:action="@{/user/login}" method="post">
			<input type="text" id="username" name ="username">
			<input type="password" id="password"  name="password">
			<input type="hidden" id="md5_password" name="md5_password" >
			<button  type="submit" onclick="pass()">登录</button>
		</form>

		<script>
			function pass(){
				let pwd = document.getElementById('password') // 获取 password 的属性值
				let md5pwd = document.getElementById('md5_password') // 获取 md5_password 的属性值
				// MD5加密
				// 修改 md5pwd 的属性值就是修改 md5_password的属性值,
				//另外，huahua表示加盐（salt）
				md5pwd.value = md5(pwd.value,huahua) 
			}
		</script>
	</body>

在表单中由三个input标签，id分别为 username、password、md5_password ，

其实真正要提交的是 username 和加密过的密码 md5_password

function pass() 的作用是将 password 转换为MD5格式的md5_password

md5pwd.value = md5(pwd.value+'huahua') //这段代码是加盐（salt）处理，“huahua”可以改为其他的

3、让我们来登录一下，看看效果，（前端页面为了思路清晰所以删除了一些样式，所有实际看到的可能不同下图，不过不影响整体）

按F12查看网络，可以看到提交的数据

在这里插入图片描述

在提交的数据中，可以看到用户名、密码、加密后的密码，可是这样实际密码也会被看到了，怎么办才可以不提交密码（不显示出来）呢？

我看了很多网上说的，其中有一种解决办法是，不写name属性。但是我不知为什么，有哪位大佬知道，可以在评论区分享一下，感谢分享，谢谢！

<!--去掉name属性-->
<input type="password" id="password">

去掉name属性后就是这个样子

在这里插入图片描述

提交完了，那后台是如何接收的呢？后端接收代码如下


package com.huahua.controller;

import com.huahua.mapper.UserMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.util.DigestUtils;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import javax.servlet.http.HttpSession;
/**
 * @author zzuli_huahua
 * @version 1.0
 * @date 2021/5/29 8:37
 */
@Controller
public class LoginController {

    @Autowired
    private UserMapper userMapper; //实现增删改业务操作的API

    @PostMapping("/user/login")
    public String login(@RequestParam("username") String username, //接收从index.html 传参过来 参数：username
                        @RequestParam("md5_password") String md5pwd, //接收的标识是前端的id字段
                        Model model, //回显数据
                        HttpSession session
    ){
        String salt_md5pwd=md5pwd+"zzuli"; //后端加盐操作

        String final_md5pwd= DigestUtils.md5DigestAsHex(salt_md5pwd.getBytes());// 最终的 MD5 密码
        //具体的业务
        if(userMapper.queryUser(username,final_md5pwd)!=null){  //如果查询结果不为空则用户、密码正确
            session.setAttribute("loginUser",username); //记录 session
            return "dashboard";//跳转登录成功页面

        }
        else {
            model.addAttribute("msg", "用户名或者密码错误！");
        }
        return "index";
    }

}

UserMapper接口类如下

package com.huahua.mapper;

import com.huahua.pojo.User;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Param;
import org.apache.ibatis.annotations.Select;
import org.springframework.stereotype.Repository;
import java.util.List;

/**
 * @author zzuli_huahua
 * @version 1.0
 * @date 2021/6/16 17:57
 */

@Mapper
@Repository
public interface UserMapper {

    // 查询用户、密码是否存在
    @Select("select * from user where userName=#{name} and passWord=#{passWord}")
    User queryUser(@Param("name") String name, @Param("passWord") String passWord); //返回user结果

    // 添加用户、密码
    @Insert("insert into user(userName, passWord) values(#{name}, #{passWord}) ")
    int addUser(@Param("name") String name, @Param("passWord") String passWord); //返回数据库受影响（执行）行数

}

为了清楚看到过程，在LoginController类中，我们来输出一下加密前、后的密码

System.out.println("前端传过来的MD5密码："+md5pwd);
System.out.println("后端加密的 MD5 密码："+final_md5pwd);

输出结果如下

在这里插入图片描述

可以看到，前端加盐的MD5密码，到了后端被再次加密，为什么要这样做呢？还不是为了要保护我们的数据安全性，这样，无论是看到前端的密码或者数据库的密码都无法推出原始密码

总结一下

用户名：huahua

原始密码：123456

MD5加密后（因易破解所以加盐）：e10adc3949ba59abbe56e057f20f883e

前端MD5+盐（salt=huahua）后：6dbfb0b06ac32a59e2a1b758bda3715c

后端MD5+盐（salt=zzuli）后：a7c857b66fc697c5770dbce62aef5471

最后，把后端加盐过的密码与数据库进行比较，存在即登录成功，否则失败。

好啦，内容没有多少，算是经验的一点点积累吧，不积跬步无以至千里，不积小流无以成江河。感谢观看、感谢评论、欢迎分享，点个赞在走吧，谢谢！

zzuli_huahua

关注

28
点赞
踩
100

收藏

觉得还不错? 一键收藏
8
评论
【学习笔记】前端MD5加密、后端MD5加密，实现登录页面的加密方法

前后端均实现MD5加密，post提交数据、网页隐藏真实的密码案例对于网页来说安全是必不可少的一环，如果一个网页登录的密码没有经过加密传输，那么这个网站是及其不安全的，普通人就可以抓到包进行分析。所以在做登录界面的时候就要考虑安全了。普遍来说使用MD5加密是相对安全的，那MD5加密算法是什么呢？MD5信息摘要算法（英语：MD5 Message-Digest Algorithm），一种被广泛使用的密码散列函数，可以产生出一个128位（16字节）的散列值（hash value），用于确保信息传输完整一致。
复制链接

扫一扫