JavaScript应用：前端MD5加密

最新推荐文章于 2024-06-24 16:52:56 发布

嵩華想睡觉

最新推荐文章于 2024-06-24 16:52:56 发布

阅读量1w

点赞数 17

分类专栏： JavaScript 文章标签：表单 MD5 前端加密 js

本文链接：https://blog.csdn.net/xfjssaw/article/details/116031168

版权

JavaScript 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

前端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>密码&emsp;：</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>密码&emsp;：</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>

效果如图：

嵩華想睡觉

关注

17
点赞
踩
35

收藏

觉得还不错? 一键收藏
5
评论
JavaScript应用：前端MD5加密

前端MD5加密在前端页面，我们经常会使用表单来提交我们的数据，而表单的两种提交方式get和post都具有一定的安全隐患。get请求的的参数直接在请求行显示，安全隐患较大；post请求方式虽然相对get来说较为安全，其请求参数在请求体，但也可以轻易的通过抓包来获取我们的参数值，得到用户账号、密码等信息。以用户密码为例，怎样可以让我们的密码在前端直接被加密呢？1.直接对用户输入进行MD5加密操作：在接收到用户输入的密码后，直接对用户的密码使用MD5算法进行加密。优点：对用户密码进行了加密，使得用户
复制链接

扫一扫