您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > javascript

JavaScript高手进阶:安全键盘

时间:2022-04-13 09:07:42  来源:  作者:修丹道的程序猿

为了安全考虑,很多有登录行为的网站,会对密码输入框进行保护。

本文介绍一种使用安全键盘的输入保护方式,可用于防键盘记录、防止自动点击。

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 = input.value.slice(0, -1);
            }
            if(el.innerHTML == "切换大/小写") {
                var els = document.getElementsByTagName("td");
                for(var i = 0, l = els.length; i < l; i++) {
                    var str = els[i].innerHTML;
                    if(/^[a-z]$/.test(str)) els[i].innerHTML = str.toUpperCase();
                    if(/^[A-Z]$/.test(str)) els[i].innerHTML = str.toLowerCase();
                }
            }
            //按下回车时隐藏安全键盘
            if(el.innerHTML == "ENTER") {
                hide_or_show();
            }
        }

        //显示或隐藏键盘
        function hide_or_show() {
            var el = document.getElementById("keyboard");
            if(el.offsetWidth > 0) el.style.display = "none";
            else {
                el.style.display = "block";
                random_numbers();
                random_letters();
            }
        }
        
        //随机字母键位
        function random_letters() {
            
            //字符集
            var all_keywords = [];
            for(k=65; k<91; k++){
                all_keywords.push(String.fromCharCode(k).toLowerCase());
            }
            
            //td元素,即各键位
            var els = document.getElementsByTagName("td");
            //遍历td元素
            for(i=0; i<els.length; i++) {
                //键位上显示的内容,即各字母
                var str = els[i].innerHTML;

                //随机字母
                var rnd_key = parseInt( all_keywords.length * Math.random() );
                
                if(els[i].id == "safe"){
                    els[i].innerHTML = all_keywords[rnd_key];
                    
                    //使用后删除
                    delete all_keywords[rnd_key];
                    all_keywords.splice(rnd_key,1);
                }
            }
            
        }

        //随机数字键位
        function random_numbers() {

            //随机排序数字
            var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].sort(function() {
                return Math.random() > 0.5 ? 1 : -1;
            });
            
            //取得所有键位
            var els = document.getElementsByTagName("td");
            for(var i = 0, j = 0, l = els.length; i < l; i++) {

                //键位上的字符
                var str = els[i].innerHTML;
                //用正则表达式判断是不是数字键位,并赋新的随机值
                if(/^d$/.test(str)) els[i].innerHTML = arr[j++];
            }
        }
    </script>
</body>
</html>


Tags:JavaScript   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,不构成投资建议。投资者据此操作,风险自担。如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除。
▌相关推荐
JavaScript的异步编程常见模式
在JavaScript中,异步编程是一种处理长时间运行操作(如网络请求或I/O操作)的常见方式。它允许程序在等待这些操作完成时继续执行其他任务,从而提高应用程序的响应性和性能。JavaS...【详细内容】
2024-04-12  Search: JavaScript  点击:(9)  评论:(0)  加入收藏
17 个你需要知道的 JavaScript 优化技巧
你可能一直在使用JavaScript搞开发,但很多时候你可能对它提供的最新功能并不感冒,尽管这些功能在无需编写额外代码的情况下就可以解决你的问题。作为前端开发人员,我们必须了解...【详细内容】
2024-04-03  Search: JavaScript  点击:(7)  评论:(0)  加入收藏
你不可不知的 15 个 JavaScript 小贴士
在掌握如何编写JavaScript代码之后,那么就进阶到实践&mdash;&mdash;如何真正地解决问题。我们需要更改JS代码使其更简单、更易于阅读,因为这样的程序更易于团队成员之间紧密协...【详细内容】
2024-03-21  Search: JavaScript  点击:(29)  评论:(0)  加入收藏
构建一个通用灵活的JavaScript插件系统?看完你也会!
在软件开发中,插件系统为应用程序提供了巨大的灵活性和可扩展性。它们允许开发者在不修改核心代码的情况下扩展和定制应用程序的功能。本文将详细介绍如何构建一个灵活的Java...【详细内容】
2024-03-20  Search: JavaScript  点击:(23)  评论:(0)  加入收藏
对JavaScript代码压缩有什么好处?
对JavaScript代码进行压缩主要带来以下好处: 减小文件大小:通过移除代码中的空白符、换行符、注释,以及缩短变量名等方式,可以显著减小JavaScript文件的大小。这有助于减少网页...【详细内容】
2024-03-13  Search: JavaScript  点击:(8)  评论:(0)  加入收藏
跨端轻量JavaScript引擎的实现与探索
一、JavaScript 1.JavaScript语言JavaScript是ECMAScript的实现,由ECMA 39(欧洲计算机制造商协会39号技术委员会)负责制定ECMAScript标准。ECMAScript发展史: 2.JavaScript...【详细内容】
2024-03-12  Search: JavaScript  点击:(7)  评论:(0)  加入收藏
面向AI工程的五大JavaScript工具
令许多人惊讶的是,一向在Web开发领域中大放异彩的JavaScript在开发使用大语言模型(LLM)的应用程序方面同样大有价值。我们在本文中将介绍面向AI工程的五大工具,并为希望将LLM...【详细内容】
2024-02-06  Search: JavaScript  点击:(58)  评论:(0)  加入收藏
18个JavaScript技巧:编写简洁高效的代码
本文翻译自 18 JavaScript Tips : You Should Know for Clean and Efficient Code,作者:Shefali, 略有删改。在这篇文章中,我将分享18个JavaScript技巧,以及一些你应该知道的示例...【详细内容】
2024-01-30  Search: JavaScript  点击:(79)  评论:(0)  加入收藏
使用 JavaScript 清理我的 200GB iCloud,有了一个意外发现!
本文作者在综合成本因素之下,决定用 Java 脚本来清理一下自己的 iCloud,结果却有了一个意外发现,即在 iCloud 中上传同一个视频和删除此视频之后,iCloud 的空间并不一致,这到底是...【详细内容】
2024-01-11  Search: JavaScript  点击:(111)  评论:(0)  加入收藏
JavaScript前端框架2024年展望
Angular、Next.js、React和Solid的维护者和创作者们展望2024年,分享了他们计划中的改进。译自2024 Predictions by JavaScript Frontend Framework Maintainers,作者 Loraine...【详细内容】
2024-01-05  Search: JavaScript  点击:(97)  评论:(0)  加入收藏
▌简易百科推荐
JavaScript的异步编程常见模式
在JavaScript中,异步编程是一种处理长时间运行操作(如网络请求或I/O操作)的常见方式。它允许程序在等待这些操作完成时继续执行其他任务,从而提高应用程序的响应性和性能。JavaS...【详细内容】
2024-04-12  靳国梁    Tags:JavaScript   点击:(9)  评论:(0)  加入收藏
17 个你需要知道的 JavaScript 优化技巧
你可能一直在使用JavaScript搞开发,但很多时候你可能对它提供的最新功能并不感冒,尽管这些功能在无需编写额外代码的情况下就可以解决你的问题。作为前端开发人员,我们必须了解...【详细内容】
2024-04-03  前端新世界  微信公众号  Tags:JavaScript   点击:(7)  评论:(0)  加入收藏
你不可不知的 15 个 JavaScript 小贴士
在掌握如何编写JavaScript代码之后,那么就进阶到实践&mdash;&mdash;如何真正地解决问题。我们需要更改JS代码使其更简单、更易于阅读,因为这样的程序更易于团队成员之间紧密协...【详细内容】
2024-03-21  前端新世界  微信公众号  Tags:JavaScript   点击:(29)  评论:(0)  加入收藏
又出新JS运行时了!JS运行时大盘点
Node.js是基于Google V8引擎的JavaScript运行时,以非阻塞I/O和事件驱动架构为特色,实现全栈开发。它跨平台且拥有丰富的生态系统,但也面临安全性、TypeScript支持和性能等挑战...【详细内容】
2024-03-21  前端充电宝  微信公众号  Tags:JS   点击:(29)  评论:(0)  加入收藏
构建一个通用灵活的JavaScript插件系统?看完你也会!
在软件开发中,插件系统为应用程序提供了巨大的灵活性和可扩展性。它们允许开发者在不修改核心代码的情况下扩展和定制应用程序的功能。本文将详细介绍如何构建一个灵活的Java...【详细内容】
2024-03-20  前端历险记  微信公众号  Tags:JavaScript   点击:(23)  评论:(0)  加入收藏
对JavaScript代码压缩有什么好处?
对JavaScript代码进行压缩主要带来以下好处: 减小文件大小:通过移除代码中的空白符、换行符、注释,以及缩短变量名等方式,可以显著减小JavaScript文件的大小。这有助于减少网页...【详细内容】
2024-03-13  WangLiwen    Tags:JavaScript   点击:(8)  评论:(0)  加入收藏
跨端轻量JavaScript引擎的实现与探索
一、JavaScript 1.JavaScript语言JavaScript是ECMAScript的实现,由ECMA 39(欧洲计算机制造商协会39号技术委员会)负责制定ECMAScript标准。ECMAScript发展史: 2.JavaScript...【详细内容】
2024-03-12  京东云开发者    Tags:JavaScript   点击:(7)  评论:(0)  加入收藏
面向AI工程的五大JavaScript工具
令许多人惊讶的是,一向在Web开发领域中大放异彩的JavaScript在开发使用大语言模型(LLM)的应用程序方面同样大有价值。我们在本文中将介绍面向AI工程的五大工具,并为希望将LLM...【详细内容】
2024-02-06    51CTO  Tags:JavaScript   点击:(58)  评论:(0)  加入收藏
JS小知识,使用这6个小技巧,避免过多的使用 if 语句
最近在重构我的代码时,我注意到早期的代码使用了太多的 if 语句,达到了我以前从未见过的程度。这就是为什么我认为分享这些可以帮助我们避免使用过多 if 语句的简单技巧很重要...【详细内容】
2024-01-30  前端达人  今日头条  Tags:JS   点击:(62)  评论:(0)  加入收藏
18个JavaScript技巧:编写简洁高效的代码
本文翻译自 18 JavaScript Tips : You Should Know for Clean and Efficient Code,作者:Shefali, 略有删改。在这篇文章中,我将分享18个JavaScript技巧,以及一些你应该知道的示例...【详细内容】
2024-01-30  南城大前端  微信公众号  Tags:JavaScript   点击:(79)  评论:(0)  加入收藏
站内最新
站内热门
站内头条