大家可能在填写完用户名或者密码时因为某种原因未登录而离开,这时大家可能因为密码框的星号而麻痹大意:以为密码不会被窥视,而放心离开。但是有一种软件可以直接查看星号隐藏下的密码原文,这就带来些安全隐患。不过本脚本可以让你的表单的密码区躲开密码星号查看软件的查看。
原理:生成一个ID为随机的隐藏Input,通过onkeyup事件实时捕获按键,并且复制到这个隐藏的Input里,同时将原密码区的值以“*”号替换掉。发送表单时,将隐藏Input的密码原文复制到原密码区并且销毁这个ID随机的隐藏Input。
本文由胖子初发表于经典论坛 ,原帖地址:
http://bbs.blueidea.com/viewthread.php?tid=2789399
下面注解如果在描述上有什么不妥欢迎提出
/* 基于表单防止星号查看器的脚本 作者:oror@Blueidea 邮箱:pcn88#hotmail.com 网站:wangye.org */ var aKey=new Array(); //用于保存随机隐藏Input的ID值 var aPrt=new Array(); //用于保存所有受保护Input的name值 var szFrm; //用于保存表单名 frmProt={ /* 获得ID对应对象 szID:[字符串]对象ID属性 */ $:function (szID){ return document.getElementById(szID); }, /* 获得表单域对象 szFrmName:[字符串]表单的name值 */ $v:function (szFrmName){ return document.forms[szFrmName]; }, /* 获得表单域的Input标签对象 szName:[字符串]标签的name值 szFrmName:[字符串]表单的name值 */ $f:function (szName,szFrmName){ return frmProt.$v(szFrmName).elements[szName]; }, /* 绑定事件 obj:[OBJECT]对象 evn:[字符串]事件名称 f:函数 */ fAttach:function (obj,evn,f){ if(!obj)return ; if(obj.attachEvent){ obj.attachEvent("on"+evn,f); } if(obj.addEventListener){ obj.addEventListener(evn,f,false); } }, /* 获得随机数字 dwIn:[数字]随机范围 */ fRand:function (dwIn){ return Math.floor(Math.random()*dwIn); }, /* 获得随机字母与数字组合 dwLen:[数字]返回值长度 */ fRandom:function (dwLen){ var dwDx,szResult="",szTmp; var aMySd=new Array(); //建立数组用于保存随机字符,这里分成3组 aMySd[0]="abcdefghijklmnopqrstuvwxyz"; //第一组[0]:小写字母 aMySd[1]="0987654321"; //第二组[1]:数字 aMySd[2]=aMySd[0].toUpperCase(); //第三组[2]:大写字母 for(var i=0;i<dwLen;i++){ //依长度循环 dwDx=frmProt.fRand(3); //获得一个随机数,范围0~2 szTmp=aMySd[dwDx]; //取出一组 szResult+=szTmp.substr(frmProt.fRand(szTmp.length),1); //随机取出这一组中某个字符 } return szResult; }, /* 建立标签函数 szTarget:[字符串]父标签。生成的新标签将置于其中 szType:[字符串]要生成的标签类型 aProp:[数组]属性设置,如 Array("type=text","size=20") */ fCreateTarget:function (szTarget,szType,aProp){ var aTmp; var objLocation=frmProt.$v(szTarget); //获得父标签对象 var objPreCreate=document.createElement(szType); //初始标签 for(var i=0;i<aProp.length;i++){ //设置属性循环开始 aTmp=aProp[i].split("="); //按=号分开 if(aTmp.length<2){ //注意为避免设置错误,这里做个判断 alert("错误的属性值设定"); return ; } objPreCreate.setAttribute(aTmp[0],aTmp[1]); //设置属性 } objLocation.appendChild(objPreCreate); //建立这个标签 }, /* 销毁标签 szTarget:[字符串]要销毁标签的父标签 szID:[字符串]要销毁标签ID */ fRemoveTarget:function (szTarget,szID){ var objLocation=frmProt.$v(szTarget); //获得父标签对象 objLocation.removeChild(frmProt.$(szID)); }, /* 创建隐藏Input标签 szBase:[字符串]父标签。生成的Input标签将置于其中 szName:[字符串]Input标签的name属性 */ fCreateHidden:function (szBase,szName){ var aHide=new Array("type=hidden","id="+szName,"value="); //设置属性 frmProt.fCreateTarget(szBase,"input",aHide); //调用fCreateTarget创建 }, /*获得event事件,主要为了兼容FireFox浏览器*/ fGetEvent:function (){ var objCaller=frmProt.fGetEvent.caller; var objEvent,objResult=null; while(objCaller!=null) { objEvent=objCaller.arguments[0]; if(objEvent)objResult=objEvent; objCaller=objCaller.caller; } return objResult; }, /* 获得按键 */ fGetKey:function (){ var e=frmProt.fGetEvent(); var dwKey=window.event?e.keyCode:e.which; return dwKey; }, /* 入口函数 szFrmName:[字符串]表单名 szProtName:[字符串]要保护的Input名,格式 "password|password2" 多个请用"|"分开 */ Init:function (szFrmName,szProtName){ aPrt=szProtName.split("|"); //将受保护Input名分组 var dwGetLen=aPrt.length; //获得分组长度 var objPas; if(dwGetLen<1)return ; //如果长度为0则中止 for(var i=0;i<dwGetLen;i++){ //循环 aKey[i]=frmProt.fRandom(frmProt.fRand(64)+1); //随机英文和数字,长度范围1~63 frmProt.fCreateHidden(szFrmName,aKey[i]); //创建隐藏Input表单 objPas=frmProt.$f(aPrt[i],szFrmName); //获得受保护Input对象 if(objPas==null)return ; //获取失败,则中止 objPas.value=""; frmProt.fAttach(objPas,"keyup",frmProt.fTask); //绑定onkeyup事件到受保护Input } frmProt.fAttach(frmProt.$v(szFrmName),"submit",frmProt.fSub); //绑定onsubmit到form表单 szFrm=szFrmName; //将传入的表单名赋给全局变量 }, //提交表单触发函数:将隐藏Input的内容复制到受保护Input里,销毁隐藏Input fSub:function (){ for(var i=0;i<aPrt.length;i++){ frmProt.$f(aPrt[i],szFrm).value=frmProt.$(aKey[i]).value; //将隐藏Input的内容复制到受保护Input里 frmProt.fRemoveTarget(szFrm,aKey[i]); //销毁隐藏Input } return true; }, //Input实时保护函数 fTask:function (){ var dwKeyCode,szPrt,szOrg,szTemp,dwSta,szA,szB,objMouse; dwKeyCode=frmProt.fGetKey(); if(dwKeyCode!=37&&dwKeyCode!=39){ //判断并且过滤掉光标左右移动按键,否则光标会受selection.createRange影响 for(var i=0;i<aPrt.length;i++){ if(!frmProt.$(aKey[i])){ //判断一下隐藏Input是否存在。 alert("隐藏域已经销毁,请重新加载本页!"); return ; } szPrt=frmProt.$f(aPrt[i],szFrm).value; //得到受保护Input的Value值 szOrg=frmProt.$(aKey[i]).value; //得到隐藏Input的Value值 if(szPrt!=""){ //如果不为空 dwSta=szOrg.length-szPrt.length; if(dwSta==1){ //这里主要判断删除字符 if(document.all){ //IE objMouse=document.selection.createRange(); //作用:定位光标 objMouse.setEndPoint("StartToStart",frmProt.$f(aPrt[i],szFrm).createTextRange()); dwSta=objMouse.text.length; //获得光标的位置 }else { //FireFox objMouse=frmProt.$f(aPrt[i],szFrm).selectionStart; dwSta=objMouse; } szA=szOrg.substr(0,dwSta); //从第一个字符截取到光标位置长度的字符串。 szB=szOrg.substr(dwSta+1,szOrg.length); //从光标位置并且跳掉一个字符截取到整个字符串长度的字符,这里实现删除字符。 frmProt.$(aKey[i]).value=szA+szB; //组成新的字符串并拷贝到隐藏的Input }else if(dwSta>1){ //这里由于无法对于连续删除按键进行判断,于是发现用户这样操作,则重置表单 frmProt.$(aKey[i]).value=""; frmProt.$f(aPrt[i],szFrm).value=""; }else { szTemp=szPrt.replace(/\*/g,""); //替换掉所有*获得插入字符 dwSta=szPrt.indexOf(szTemp); //判断最新插入字符的位置 szA=szOrg.substr(0,dwSta); //从第一个字符截取到这个插入字符的位置 szB=szOrg.substr(dwSta,szPrt.length); //从这个插入字符位置截取到字符串最后 frmProt.$(aKey[i]).value=szA+szTemp+szB; //组成新的字符串并拷贝到隐藏的Input frmProt.$f(aPrt[i],szFrm).value=szPrt.replace(/./ig,"*"); //替换掉受保护Input的值为* } }else { frmProt.$(aKey[i]).value=""; //如果受保护Input值为空,清空隐藏Input的值 } } } } }
调用方式
window.onload=function(){ frmProt.Init("表单名","要保护的密码区域,多个请用'|'分隔"); }
测试接收的ASP
Dim szFrm For Each szFrm In Request.Form Response.Write szFrm & "=" & Request.Form(szFrm) & "<br />" Next本文固定链接: https://www.weisay.com/blog/menu-password-view-js.html | 威言威语
我看了你说的那个google上的,可是我还是不会修改,能不能麻烦博主说的详细一些啊!谢谢了…
这个代码的显示效果很不错,怎么在PJBlog显示这种效果啊?