JavaScript高手进阶：安全键盘

JavaScript高手进阶：安全键盘

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

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

效果展示

如下图，该输入框带有一个虚拟键盘。

之所以称其为“安全键盘”，是因为两点：

其一、通过点击虚拟键盘上的按键进行输入，而不需要按下真实键盘上的键位，这样就可以防止很多系统中的后台软件记录按键、窃取密码；

其二、虚拟键盘上的键位，是打乱的，并且是实时随机的，每次页面刷新、每次输入都是不同的键位。如此，可以防止自动化工具或脚本发起的自动点击输入。

功能原理

首先，对指定的输入框，不接受常规按键，而是使用通过虚拟键盘输入。其次，虚拟键盘上的键位，每次都要随机生成。

源码解析

UI部分，在页面使用div、table模拟一个键盘，如下图：

核心功能是随机键位的产生，在本例中，使用了两种方法随机生成键位，如数字部分，使用sort方法：

字母部分，使用random方法：

对于输入内容，是直接给input输入框赋值：

代码保护

为防止功能逻辑泄露，可对JavaScript代码进行保护，比如使用JShaman（JS萨满）混淆加密上面的safe_keyword函数代码。

加密后，代码成为：

这是加密了一个函数的代码。当然也可以对整体JS代码全部加密，保护效果会更好。

完整源码

以下给出完整源码，包含UI、css风格、JS源码，保存为html即可测试使用。