一、概要
基于 JS+
CSS,采用服务端控制客户端输入逻辑的 Web 版安全输入
组件,采用这种机制,可大幅度提高手机、平板系统浏览器中输入密码的安全性。
组件特点:
1、用户输入的密码信息在客户端中不会有任何残留,可有效防止恶意程序通过接口,内存查看等方式获取用户密码;
2、采用 RSA 加密算法对输入内容进行加密,避免恶意程序对通讯链路中的数据进行拦截分析;
3、可自适应现有主流屏幕分辨率。
二、实现流程
1、 页面初始化,请求服务端根据规则生成相应的html(密码控件)并返回给前端
2、 用户使用返回的html(密码控件),输入相应的密码
3、 前端将输入的密码通过js RSA算法加密并提交到服务端
4、 服务端根据规则解密后并进行业务逻辑的后续处理
三、实现细节
1、 密码键盘分为数字键盘、字母键盘(含大小写)和全键盘
2、 如果是数字键盘:生成随机安全随机数 0
~ 9,根据 SecureRandom.nextInt()方法
3、 如果是字母键盘:生成随机26个英文字母,根据chars(97 + i)
4、 如果是全键盘:则是2 、3点的组合
5、 创建一个NumberPass
WordImageMaker类,用于将数字按照设定的规则转换成图片 ImageInfo
类
6、 创建一个AlphabetPasswordImageMaker类,用于将字母(含大小写)按照设定的规则转换成图片 ImageInfo 类
7、 创建一个HTMLMaker类,用于将生成的图片转换成DIV
8、 将DIV中对应的KeyIdnex保存在Http
session中,用于后续比较
9、 将生成的DIV通过约定的方式返回给前端