关于网站使用隐藏域提交表单提高网站安全性的实现

提交表单 md5加密密码 表单优化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://blog-static.cnblogs.com/files/7qin/md5.js" ></script>
</head>
<body>

<!--
表单提交事件
onsubmi= 绑定一个提交检测的函数，true false
将这个结果返回给表单，使用onsubmit提交！
使用onsubmit提交可以再JavaScript中使用函数过滤表单内容
-->
<form method="post" onsubmit="return aaa()">
    <p>
        <span>用户名： </span><input type="text" id="username" name="username">
    </p>
    <p>
        <span>密码： </span><input type="password" id="input-password">
    </p>
    <input type="hidden" id="password" name="password"> <!--这里我们使用了隐藏域提交，上面额input-password仅仅是提供用户输入-->
    <!--绑定事件 onclick 被点击-->
   <button type="submit">提交</button>
</form>
<script>
function aaa() {
    var uname = document.getElementById('username');
    var input_pwd = document.getElementById('input-password');
    var md5pwd = document.getElementById('password');
    console.log(uname.value);
    //MD5算法
    md5pwd.value = hex_md5(input_pwd.value);
    console.log(pwd.value);
    //可以接受判断表单内容
    return true;
}
</script>
</body>
</html>

以上代码可以看出，在提交表单时我们不使用来提交表单数据，而在form标签中使用onsubmit属性来提交表单，这样我们就可以再表单提交时通过绑定一个函数来过滤表单内容，并且我们对表单进行了隐藏域的优化，使用户输入的密码框只承担传递值的作用，我们在提交表单时时使用隐藏域提交的，这既提高了网站的安全性，同时也在表单提交时防止密码框中内容的瞬间变长，避免导致网站实现细节的暴露。

posted @ 2020-04-05 00:21  MrKeen  阅读(469)  评论(0)  编辑  收藏  举报