江苏龙网

  1. 主页 > 生活百科 > >

JavaScript高手进阶：安全键盘

JavaScript

【JavaScript高手进阶：安全键盘】为了安全考虑 ， 很多有登录行为的网站 ， 会对密码输入框进行保护 。
本文介绍一种使用安全键盘的输入保护方式 ， 可用于防键盘记录、防止自动点击 。

JavaScript高手进阶：安全键盘

文章插图
 
效果展示如下图 ， 该输入框带有一个虚拟键盘 。
JavaScript高手进阶：安全键盘

文章插图
 
之所以称其为“安全键盘” ， 是因为两点：
其一、通过点击虚拟键盘上的按键进行输入 ， 而不需要按下真实键盘上的键位 ， 这样就可以防止很多系统中的后台软件记录按键、窃取密码；
其二、虚拟键盘上的键位 ， 是打乱的 ， 并且是实时随机的 ， 每次页面刷新、每次输入都是不同的键位 。如此 ， 可以防止自动化工具或脚本发起的自动点击输入 。
功能原理首先 ， 对指定的输入框 ， 不接受常规按键 ， 而是使用通过虚拟键盘输入 。其次 ， 虚拟键盘上的键位 ， 每次都要随机生成 。
源码解析UI部分 ， 在页面使用div、table模拟一个键盘 ， 如下图：
JavaScript高手进阶：安全键盘

文章插图
 
核心功能是随机键位的产生 ， 在本例中 ， 使用了两种方法随机生成键位 ， 如数字部分 ， 使用sort方法：
JavaScript高手进阶：安全键盘

文章插图
 
字母部分 ， 使用random方法：
JavaScript高手进阶：安全键盘

文章插图
 
对于输入内容 ， 是直接给input输入框赋值：
JavaScript高手进阶：安全键盘

文章插图
 
代码保护为防止功能逻辑泄露 ， 可对JAVAScript代码进行保护 ， 比如使用JShaman（JS萨满）混淆加密上面的safe_keyword函数代码 。
JavaScript高手进阶：安全键盘

文章插图
 
加密后 ， 代码成为：
JavaScript高手进阶：安全键盘

文章插图
 
这是加密了一个函数的代码 。当然也可以对整体JS代码全部加密 ， 保护效果会更好 。
完整源码以下给出完整源码 ， 包含UI、css风格、JS源码 ， 保存为html即可测试使用 。
<html><head><style>th,td {border: 1px solid #ccc;padding: 2px 0;text-align: center;cursor: pointer}div {border: 1px solid #ccc;float: left;padding: 1px;display: none;}</style></head><body><h3>安全键盘输入</h3><input id="input" readonly="readonly" style="width:475px; height: 80px;"onclick="hide_or_show();"/><br><div id="keyboard"><table cellspacing="1" width="480" onclick="safe_keyword()"><tr><td>~</td><td>!</td><td>@</td><td>#</td><td>$</td><td>%</td><td>^</td><td>&</td><td>*</td><td>(</td><td>)</td><td>_</td><td>+</td><td>|</td><td rowspan="2" width="120">退格</td></tr><tr><td>`</td><td class="num">1</td><td class="num">2</td><td class="num">3</td><td class="num">4</td><td class="num">5</td><td class="num">6</td><td class="num">7</td><td class="num">8</td><td class="num">9</td><td class="num">0</td><td>-</td><td>=</td><td></td></tr><tr><td id="safe">q</td><td id="safe">w</td><td id="safe">e</td><td id="safe">r</td><td id="safe">t</td><td id="safe">y</td><td id="safe">u</td><td id="safe">i</td><td id="safe">o</td><td id="safe">p</td><td>{</td><td>}</td><td>[</td><td>]</td><td colspan="2">切换大/小写</td></tr><tr><td id="safe">a</td><td id="safe">s</td><td id="safe">d</td><td id="safe">f</td><td id="safe">g</td><td id="safe">h</td><td id="safe">j</td><td id="safe">k</td><td id="safe">l</td><td>:</td><td>"</td><td>;</td><td>'</td><td colspan="3" rowspan="3">ENTER</td></tr><tr><td id="safe">z</td><td id="safe">x</td><td id="safe">c</td><td id="safe">v</td><td id="safe">b</td><td id="safe">n</td><td id="safe">m</td><td></td><td>></td><td>?</td><td>,</td><td>.</td><td>/</td></tr></table></div><script>var htmlCode = {"&": "&",'"': ""","<": "<",">": ">",}//安全输入function safe_keyword() {//输入框var input = document.getElementById("input");var e = window.event || test.caller.arguments[0];var el = e.target || e.srcElement;if(el.tagName.toLowerCase() == "td" && el.rowSpan <= 1 && el.colSpan <= 1) {var str = el.innerHTML;str = htmlCode[str] || str;input.value += str;}if(el.innerHTML == "退格") {input.value = https://www.isolves.com/it/cxkf/yy/js/2022-04-13/input.value.slice(0, -1);}if(el.innerHTML == "切换大/小写") {var els = document.getElementsByTagName("td");for(var i = 0, l = els.length; i


推荐阅读


上一篇：蒲公英泡水喝能提高性功能吗,孕妇可以喝菊花茶吗

下一篇：玫瑰月季茶的功效与作用,玫瑰花茶的功效与禁忌有哪些