赞
踩
合格的开发者首先要保证用户信息的安全性。通常涉及的就是用户密码、口令等隐秘性信息,可能有部分人会将安全工作交给后台,但在信息从前端传至后台的过程中早已可以被截获。接下来将关于前端提交表单时的MD5加密内容。
MD5的典型应用是对一段信息(Message)产生信息摘要(Message-Digest),以防止被篡改。js目前是没有相关文件可直接引用的,但网上有现成的MD5加密js文件,可以直接下载保存,需要时引用。
这里推荐一份干货,可浏览学习:https://www.jianshu.com/p/83f81d1c0de7
要注意,常见的有16位加密和32位加密,都可行,相对而言16位加密破解更复杂些!
在需要的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加密后的用户信息,而不是原本的。
赞
踩
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。