正方教务系统登录页修复

立音喵
立音喵
2017年01月31日



哼,我看着正方教务系统不爽很久了,特别是那个登录页,输入框不齐,验证码飘在输入框中间,看着无比的难受。 ZF Loginpage Fix 2 然后,某次正方系统更新之后,浏览器的自动填充也遇到了问题 ZF Loginpage Fix 3 而我呢,又是一个密码管理器的重度使用者(每个网站都使用不同的密码,密码强度平均 100%),这就逼着我去修复这个令人不爽的自动填充问题。

所以,这时候我们就要打开 Chrome 按下 F12 启动开发者工具,来检查这个网页的各种元素和请求。 当我看到正方教务系统登录页的 DOM 之后... ZF Loginpage Fix 4

喵喵喵?正方的前端用 dd 列表标签做分割?说好的 div 呢? ZF Loginpage Fix 5

然后就是这段,也不对齐,也不去除注释的 Javascript 代码,仔细一看....... 为什么会有两个密码输入框..... ZF Loginpage Fix 6 注:图中 style 内的 base64 编码的图片是密码管理器插入的,与正方系统无关

而且还调用了上面那段混乱的 Javascript 代码的 updatesava 函数..... 然后 updatesava 函数的作用就是把两个输入框的 display 样式设置为 none 或者 inline。完全意义不明啊! 这也是自动密码填充问题的罪魁祸首,于是我将 type 不为 password 的输入框删掉,再次尝试填充,成功了! 然后,我按了下 Tab 键想切换到验证码输入框中,这时! ZF Loginpage Fix 7 密码框不见了! 这是个大问题啊,我立刻想到这是那段 js 代码惹的祸,于是

update=function(){return;};

覆盖掉 update 函数的实现,让它失去作用。由于默认的真实密码是被隐藏的,所以要加一句

$('#TextBox2').css('display','');

让输入框可见。 这时候我打开了 Tempermonkey 这是一个用户脚本管理插件,他可以在目标页自动插入对应的 .user.js 用户脚本。 先新建一个脚本,并设置下可用范围 ZF Loginpage Fix 8

然后,由于正方系统没有使用 jQuery 所以,我需要增加一个 jquery 的引用 ZF Loginpage Fix 9

然后就可以在函数体内增加自动注入的脚本(详见下方安装脚本)

反正已经搞定了自动填充,那就把剩下的看着不爽的问题也解决下吧~ 首先就是,文本框不一样长啊!(摔 强迫症感觉很不爽啊! 于是,现在!立刻!马上!加入了如下代码

$('#TextBox2').css('width','');

这样,密码框就和用户名框一样长了。 剩下的就是更正验证码区的问题了,其实这个地方的主要问题就是! 谁写的 style !给我站出来!会不会用对齐!会不会用相对布局!会不会用绝对布局! 在验证码框的顶层元素上加相对布局,再给验证码图标放个绝对布局,你怎么不上天呢! 经过了15分钟的修正后验证码的位置恢复了正常

ZF Loginpage Fix 10

因为要做成脚本嘛,所以也再在页面底部加些脚本加载信息,提示用户正方教务的登录页做的多么的到需要让用户自己写脚本来矫正这些问题!

最终效果

ZF Loginpage Fix 1

左边是修复之前/右边是修复之后

不多说了,脚本在下方,安装了 Tempermonkey 用户脚本管理器之后,点击下面的安装按钮就会弹出脚本安装页了~ 不用担心有任何的风险,代码全部未加密、未混淆,你可以自己修改它。他也不会向任何服务器发送你的信息,正方教务系统也不会知道你正在使用这个脚本,放心大胆的去使用吧!

安装 正方教务系统登录页修复脚本


2017/3/4 更新 增加了验证码识别


2017/6/12 更新 验证码请求方式变更,暂时取消验证码识别


评论区
Made with ♥ by LiYin
Yin Theme V2