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

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

MD5加密简介

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

MD5加密使用

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

<script src="js/md5.js"></script>

然后在需要的位置直接引用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加密后的用户信息,而不是原本的。

你可能感兴趣的:(前端笔记)