关于HTML表单用户信息进行MD5加密

以你之姓@ 2023-06-29 05:52 26阅读 0赞

合格的开发者首先要保证用户信息的安全性。通常涉及的就是用户密码、口令等隐秘性信息，可能有部分人会将安全工作交给后台，但在信息从前端传至后台的过程中早已可以被截获。接下来将关于前端提交表单时的MD5加密内容。

## MD5加密简介 ##

MD5的典型应用是对一段信息（Message）产生信息摘要（Message-Digest），以防止被篡改。js目前是没有相关文件可直接引用的，但网上有现成的MD5加密js文件，可以直接下载保存，需要时引用。  
这里推荐一份干货，可浏览学习：https://www.jianshu.com/p/83f81d1c0de7  
要注意，常见的有16位加密和32位加密，都可行，相对而言16位加密破解更复杂些！

## MD5加密使用 ##

在需要的html或jsp文件内先引用md5.js

然后在需要的位置直接引用md5.js文件内的加密方法str.MD5()。默认为16位加密，需要32位加密可以str.MD5(32)。

md5_pwd.value = input_pwd.value.MD5();

## 技巧和常见问题 ##

这是我在做项目一开始时写的代码，是一个简单的表单提交雏形，想对用户输入的密码进行MD5加密。

<form id="login" method="post" onsubmit="return checkForm()">
        <input type="text" id="username" name="username">
        <input type="password" id="password" name="password">
        <button type="submit">提交</button>
    </form>
    
    <script>
    function checkForm() { 
        var pwd = document.getElementById('password');
        pwd.value = pwd.value.MD5();// 把密码变为MD5
        return true;
    }
    </script>

是不是感觉没什么毛病，步骤也没错？有兴趣的兄弟可以copy我这段代码尝试运行，就会发现当按了“提交”后，“password”文本框用户所输入的密码变多了变长了！这是因为密码经过MD5加密后直接显示成16/32位。  
这时候就要充分利用起< input type=“hidden”>了！hidden是一个隐藏的input，可以用它作为“中间商”。将password的MD5加密文赋予password并提交，这样既不影响正常显示，也不影响提交安全性。

<form id="login" method="post" onsubmit="return checkForm()">
        <input type="text" id="username" name="username">
        <input type="password" id="password">
        <input type="hidden" id="password_md5" name="password">
        <button type="submit">Submit</button>
    </form>
    
    <script>
    function checkForm() { 
        var pwd = document.getElementById('password');
        var pwd_md5 = document.getElementById('password_md5');
        pwd_md5.value = pwd.value.MD5();// 把用户输入的明文变为MD5
        return true;
    }
    </script>

这里要注意，我把name="password"赋予了hidden，却没有给password！这是个小细节，基础告诉我们，表单提交时只提交有name的value值，而现在我们要提交的是md5加密后的用户信息，而不是原本的。