用Greasymonkey实现密码自动填充

最新推荐文章于 2023-06-06 14:51:55 发布
VIP文章 最新推荐文章于 2023-06-06 14:51:55 发布
阅读量5.9k 收藏 2
点赞数 5
分类专栏： 杂七杂八
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rcom10002/article/details/49824879
版权

为什么要实现密码自动填充?

密码多了记不住怎么办？每次录入太麻烦怎么办？

自己动手丰衣足食！根据应用场景不同，高度定制密码自动填充策略。在这里我将介绍如何使用Firefox的Greasemonkey插件完成这个任务。

Greasemonkey

Greasemonkey，简称GM，中文俗称为“油猴子”，是Mozilla Firefox的一个附加组件。它让用户安装一些脚本使大部分HTML为主的网页于用户端直接改变得更方便易用。随着Greasemonkey脚本常驻于浏览器，每次随着目的网页打开而自动做修改，使得运行脚本的用户印象深刻地享受其固定便利性。

上面的解释来自于度娘。正是Greasemonkey这个可以随着网页打开而执行JavaScript的功能，给了我们执行密码自动填充策略的机会。

用户脚本

执行策略的机会已经有了，接下来就是如何规划了。策略的执行主要还得依靠Greasemonkey，因为它可以让我们执行属于我们自己的用户脚本，而且是可以在网页加载的时候执行。所以基本思路就是恰好在页面加载完成的时候立即用我们自己的JavaScript程序为网页中的密码框填充密码。

具体的操作流程如下：
通过导航菜单Tools/Greasemonkey/Manage User Scripts打开Greasemonkey插件。
在主画面的上面点击New User Script...，填写好Name和Namespace，再点击OK按钮进行确认。这时新的用户脚本就创建好了，其中的内容应该与下面的例子差不多。

// ==UserScript==
// @name        autoPasswd
// @namespace   KNIGHTRCOM
// @version     1
// @grant       none
// ==/UserScript==

快速测试

接下来我们可以快速测试一下，录入下面的语句：

alert('test');

脚本保存之后，请随意访问一个网站，这时你会发现无论访问什么网站，总是会弹出一个消息对话框，其中的文本内容便是上门代码中的测试字符串test。如果你的情形与现在描述的一样，那么恭喜你啦，中奖了哦！

自动化程序

测试成功后要做的就是实现自动化程序，用它来完成密码自动填充。这里需要编写JavaScript程序了，先是要定位网页中的密码输入框元素，然后再填写事先配置好的密码。我们先实现一个简单的，运行成功后可以进一步重构，请参考下面的代码：

// ==UserScript==
// @name        autoPasswd
// @namespace   KNIGHTRCOM
// @version     1
// @grant       none
// @include     /^https?:\/\/localhost:900\d\/.*$/
// ==/UserScript==

try {
if (/^https?:\/\/localhost:900\d\/.*$/.test(window.location)) {
    var inputs = document.body.getElementsByTagName('input');
    for (var i in inputs) {
        var input = inputs[i];
        if (input.name == 'j_username') {
            input.value = 'admin';
        } else if (input.name == 'j_password') {
            input.value = 'nimda';
        }
    }
}
} catch (e) { console.error(e); }

这就是我们的第一个工作版本的程序。在此请让我对代码稍作一下解释。最上方的注释里的@include后面跟随的是JavaScript语法支持的正则表达式，这表示只有满足该表达式样式的网站URL才可以执行我们这段程序。例子中的注释里只有一行@include，而实际上你可以根据需要增加更多的@include，如果你放弃使用它的话，那就跟我们在快速测试里实现的效果一样，无论访问哪个网站，脚本程序都会无条件执行。

@include所处于的注释块被称为metadata，是配置脚本相关信息的地方，详情请见：http://wiki.greasespot.net/Metadata_Block

接下来是程序代码部分，第一行用于检测当前URL地址是否满足执行条件，这里可能会引起一些歧义，既然@include已经做了类似的排他处理，为什么还需要多此一举的重复检查呢？这种做法的真实原因其实是为了对不同的URL地址定制不同的密码填充策略。@include只是为脚本执行规划了一个白名单，而符合白名单样式的每一个网站都可能有他们自己的密码填充策略，所以我们需要用不同的样式作为匹配条件来分别实现具体的程序代码。稍后从后面的完整代码中可以更好的体会到这个好处。

代码再往下一些，我们获取了整个网页中所有的输入框控件，并循环遍历这些控件找出符合条件的用户名和密码输入框，然后分别进行赋值操作。至此，自动化脚本程序已经全部完成。不过为了防止一些意外发生，我在程序一开始就买了保险，try且catch。

重构 —— 分离数据与行为

现在程序基本上已经可以按照设定那样开始工作了，但为了可以让它看起来更清晰更合理，我们需要对它做进一步重构，基本思想就是把数据从行为中分离出来。

下面让我们看看经过重构之后的第一个程序版本：

// ==UserScript==
// @name        autoPasswd
// @namespace   KNIGHTRCOM
// @version     1
// @include     /^https?://localhost:900[0-9]/.*$/
// @include     /^http://epub.ituring.com.cn/Account/Login.*$/
// @include     /^https?://.*/(hmc/hybris|hac)([?/].*)?$/
// @grant       none
// ==/UserScript==

var globalConfig = {
    'stocks': [
            {
                targetUrlRegex: new RegExp("^http://epub.ituring.com.cn/Account/Login.*$"),
                attributeName: 'id',
                usernameKey: 'UserName',
                usernameVal: 'xxxxxxxxx',
                passwordKey: 'Password',
                passwordVal: 'xxxxxxxxx'
            },
            {
                targetUrlRegex: new RegExp("^https?://localhost:900[0-9]/(hac)?.*$"),
                attributeName: 'name',
                usernameKey: 'j_username',
                usernameVal: 'xxxxxxxxx',
                passwordKey: 'j_password',
                passwordVal: 'xxxxxxxxx'
            },
            {
                targetUrlRegex: new RegExp("^https?://localhost:900[0-9]/hmc/hybris.*$"),
                attributeName: 'id',
                usernameKey: 'Main_user',
                usernameVal: 'xxxxxxxxx',
                passwordKey: 'Main_password',
                passwordVal: 'xxxxxxxxx'
            },
            {
                targetUrlRegex: new RegExp("^https?://(admin-)?prod-.*/(hmc/hybris|hac)/?.*$"),
                attributeName: 'id',
                usernameKey: 'UserName',
                usernameVal: 'xxxxxxxxx',
                passwordKey: 'Password',
                passwordVal: 'xxxxxxxxx'
            },
            {
                targetUrlRegex: new RegExp("^https?://(admin-)?preprod-.*/(hmc/hybris|hac)/?.*$"),
                attributeName: 'id',
                usernameKey: 'UserName',
                usernameVal: 'xxxxxxxxx',
                passwordKey: 'Password',
                passwordVal: 'xxxxxxxxx'
            },
            {
                targetUrlRegex: new RegExp("^https?://(admin-)?con-.*/(hmc/hybris|hac)/?.*$"),
                attributeName: 'id',
                usernameKey: 'UserName',
                usernameVal: 'xxxxxxxxx',
                passwordKey: 'Password',
                passwordVal: 'xxxxxxxxx'
            },
            {
                targetUrlRegex: new RegExp("^https?://(admin-)?qas-.*/(hmc/hybris|hac)/?.*$"),
                attributeName: 'id',
                usernameKey: 'UserName',
                usernameVal: 'xxxxxxxxx',
                passwordKey: 'Password',
                passwordVal: 'xxxxxxxxx'
            },
            {
                targetUrlRegex: new RegExp("^https?://(admin-)?dev-.*/(hmc/hybris|hac)/?.*$"),
                attributeName: 'id',
                usernameKey: 'UserName',
                usernameVal: 'xxxxxxxxx',
                passwordKey: 'Password',
                passwordVal: 'xxxxxxxxx'
            },
        ]
};

function autoit() {
   
    try {
        var stocks = globalConfig.stocks;
        if (!stocks.length) {
            return;
        }

        for (var idx in stocks) {
            if (!stocks[idx].targetUrlRegex.test(window.location)) {
                continue;
            }
            var inputs = document.body.getElementsByTagName('input');
            for (var i in inputs) {
                var input = inputs[i];
                if (input[stocks[idx].attributeName] == stocks[idx].usernameKey) {
                    input.value = stocks[idx].usernameVal;
                } else if (input[stocks[idx].attributeName] == stocks[idx].passwordKey) {
                    input.value = stocks[idx].passwordVal;
                }
            }
        }
    } catch (e) {
        alert(e.message);
    }
}

setTimeout(autoit, 100);

从代码中我们可以看出，所有的配置信息都已经完全从行为逻辑中分离出来了，以配置信息形式存在，并且经过重构之后的行为逻辑较之未重构之前的代码更为灵活通用。另外还有一点要提的是，我们在前面曾经解释过为什么在已经设置了@include网站URL的情况下，仍要对程序中的网址做二次校验，观察重构后的代码可以发现，实际校验的网址和@include中配置的网址并不相同，我们可以说程序中的网址更为详细，是@include网址样式的子集，是一种更为细致的控制。

现在数据和行为逻辑已经分离了，但看起来感觉好像还差点什么似的。

  • 密码竟然是明文的，太儿戏了吧？！
  • 配置看起来有些繁琐，是否还有优化的空间呢？

好吧，既然还有问题，那就让我们继续开启下一个任务吧！

信息加密与简化配置

明文密码当然要加密，但我并不对自己实现加密功能有信心，那怎么办，总不能等着天上掉馅饼吧？还真别说，馅饼年年有，今年特别多！开源喽 —— SJCL库，详情请见：https://github.com/bitwiseshiftleft/sjcl/wiki。

The Stanford Javascript Crypto Library is a project by the Stanford Computer Security Lab to build a secure, powerful, fast, small, easy-to-use, cross-browser library for cryptography in Javascript.

下面是代码加密解密的示例代码，我们可以把这段逻辑直接引入密码自动填充功能里。

var sjcl = require('./sjcl.js')

var ciphertext = sjcl.encrypt("any_encrypt_key_string", "Hello World!")
var plaintext = sjcl.decrypt("any_encrypt_key_string", ciphertext)

console.log(ciphertext)
console.log(plaintext)

程序输出结果：

{
  "iv":"mfzPs58R3vonO0tLZyyDTg==","v":1,"iter":1000,"ks":128,"ts":64,"mode":"ccm","adata":"","cipher":"aes","salt":"gOLZzYQ6sHI=","ct":"yhiREfrAFIu99e1WEVPG7VCKQUA="}
Hello World!

下面是二次重构后的代码，一方面引入了SJCL库，为密码实现了加密，另一方面重构了数据配置，使得配置更简单。整体结构一共有四部分组成，分别为SJCL库引用、配置信息、配置结构定义和自动化处理。

  1. SJCL库加载 —— 为了实现脚本的快速执行，这里直接把SJCL库的源码粘贴进来，这样就节省了从网络中加载SJCL库的时间。

  2. 信息配置 —— 经过再次重构之后的配置内容与初次重构里的差不多，只是密码设置需要稍作调整。这里采用的密码看起来就是一个字符串类型的JSON数据，这种数据是经过加密处理得出的，具体加密操作请参考上面的例子。

  3. 配置结构定义 —— 新的结构可以让我们只关注配置的内容，无需考虑配置结构，以及密码解密的细节。

  4. 自动化处理 —— 和第一次重构时一样，没有任何变化。

  5. 其他要点 —— ENCRYPTION_KEY和setTimeout

    • ENCRYPTION_KEY：这个是密码加密和解密时默认使用的密匙，如果有必要的话，你可以使用你自己的专属密匙来对密码进行加密和解密。如果使用了自定义密匙，在做内容配置的时候就需要为函数pwdbox额外再多传入一个密匙参数，这个参数已经在pwdbox函数中预留出来了，只是在现有的例子中没有使用罢了。

    • setTimeout：为了防止与其他一些自动化程序冲突，这里使用setTimeout来实现延时处理。另外还请注意一下setTimeout语句上面的注释内容alert(ENCRYPTION_KEY);，打开它可以方便我们调试，因为使用Greasemonkey不方便的是，当脚本发生了什么语法错误导致程序无法运行，程序不会有任何表现，所以在这里我用一个alert来作为程序能过正确通过语法检查的一个信号。

// ==UserScript==
// @name        autoPasswd
// @namespace   KNIGHTRCOM
// @version     1
// @include     /^https?://localhost:900[0-9]/.*$/
// @include     /^http://epub.ituring.com.cn/Account/Login.*$/
// @include     /^https?://.*/(hmc/hybris|hac)([?/].*)?$/
// @grant       none
// ==/UserScript==

"use strict";var sjcl={cipher:{},hash:{},keyexchange:{},mode:{},misc:{},codec:{},exception:{corrupt:function(a){
   this.toString=function(){
   return"CORRUPT: "+this.message};this.message=a},invalid:function(a){
   this.toString=function(){
   return"INVALID: "+this.message};this.message=a},bug:function(a){
   this.toString=function(){
   return"BUG: "+this.message};this.message=a},notReady:function(a){
   this.toString=function(){
   return"NOT READY: "+this.message};this.message=a}}};
"undefined"!==typeof module&&module.exports&&(module.exports=sjcl);"function"===typeof define&&define([],function(){
   return sjcl});
sjcl.cipher.aes=function(a){
   this.s[0][0][0]||this.O();var b,c,d,e,g=this.s[0][4],f=this.s[1];b=a.length;var h=1;if(4!==b&&6!==b&&8!==b)throw new sjcl.exception.invalid("invalid aes key size");this.b=[d=a.slice(0),e=[]];for(a=b;a<4*b+28;a++){c=d[a-1];if(0===a%b||8===b&&4===a%b)c=g[c>>>24]<<24^g[c>>16&255]<<16^g[c>>8&255]<<8^g[c&255],0===a%b&&(c=c<<8^c>>>24^h<<24,h=h<<1^283*(h>>7));d[a]=d[a-b]^c}for(b=0;a;b++,a--)c=d[b&3?a:a-4],e[b]=4>=a||4>b?c:f[0][g[c>>>24]]^f[1][g[c>>16&255]]^f[2][g[c>>8&255]]^f[3][g[c&
255]]};
sjcl.cipher.aes.prototype={encrypt:function(a){
   return u(this,a,0)},decrypt:function(a){
   return u(this,a,1)},s:[[[],[],[],[],[]],[[],[],[],[],[]]],O:function(){
   var a=this.s[0],b=this.s[1],c=a[4],d=b[4],e,g,f,h=[],l=[],k,m,n,p;for(e=0;0x100>e;e++)l[(h[e]=e<<1^283*(e>>7))^e]=e;for(g=f=0;!c[g];g^=k||1,f=l[f]||1)for(n=f^f<<1^f<<2^f<<3^f<<4,n=n>>8^n&255^99,c[g]=n,d[n]=g,m=h[e=h[k=h[g]]],p=0x1010101*m^0x10001*e^0x101*k^0x1010100*g,m=0x101*h[n]^0x1010100*n,e=0;4>e;e++)a[e][g]=m=m<<24^m>>>8,b[e][n]=p=p<<24^p>>>8;for(e=
0;5>e;e++)a[e]=a[e].slice(
最低0.47元/天 解锁文章
rcom10002
关注
  • 5
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
GreasyMonkey脚本学习笔记
Snowzhao的博客
12-24 1920
Hello world // ==UserScript== // @name Pig // @namespace Violentmonkey Scripts // @match *://*/* // @grant none // @version 1.0 // @author Snow Zhao // @description say Hello world! // ==/UserScript== alert("Hello world!");
为SFTP/SSH/SCP访问设置Public Key认证
热门推荐
KNIGHTRCOM(rcom10002的专栏)
02-11 2万+
Public Key认证是什么 这是一种认证方法，类似于常见的用户名密码认证方法。不同的是需要在客户端机器上保留一个很长很长的加密key，而在服务器端需要做出相应的配置。当客户端想要访问服务器时，服务器则会检查自身配置并根据客户端所提供的用户名来识别客户端。说白了就是实现了无密码访问，并同时兼有安全保障措施。 认证过程简要说明 Public key对数据进行加密而且只能用于加密，Priv
解决浏览器会自动填充密码的问题
08-30
本篇文章主要介绍了解决浏览器会自动填充密码问题的方法。具有很好的参考价值。下面跟着小编一起来看下吧
C++实现自动输入用户名密码
09-13
对于经常要输入用户名和密码，而又不能保存的人群来说，这是一个很好的工具，只要按一个快捷键就能完成用户名和密码的输入。本人从事运维工作，根据自己的工作岗位，突发奇想而开发。这工具减轻了重复输入用户名和密码的工作。而且用户名和密码存储在本地是ascii码，一般人群难以翻译。
Mybatis-Plus自动填充的实现示例
08-25
主要介绍了Mybatis-Plus自动填充的实现示例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
jquery实现邮箱自动填充提示功能
10-23
主要介绍了jquery实现邮箱自动填充提示功能，为了提高用户的体验，很多网站都会实现邮箱输入的自动提示功能，对如何实现自动提示功能感兴趣的小伙伴们可以参考一下
Laravel框架使用Seeder实现自动填充数据功能
10-18
主要介绍了Laravel框架使用Seeder实现自动填充数据功能,结合实例形式分析了Laravel基于Seeder类实现自动填充数据的相关操作技巧与注意事项,需要的朋友可以参考下
vue 解决浏览器chrome、Firefox等自动填充账号密码的问题（type=‘password‘）
qq_40572419的博客
04-06 2755
vue 解决浏览器chrome、Firefox等自动填充账号密码的问题（type='password'）
浏览器自动填充和密码(谷歌和edge)
最新发布
前端技术
06-06 1517
*第二步：**选择”自动填充和密码“ - ”密码管理器“**第二步：**选择”个人资料“ - ”密码“着的三个点，打开菜单栏选择“设置“着的三个点，打开菜单栏选择“设置“**第一步：**点击浏览器右上角。**第一步：**点击浏览器右上角。**第三步：**选中如下两个。**第三步：**选中如下三个。
编写一个油猴脚本
qq_31314583的博客
08-02 857
某些傻逼网站没法记住密码，总有人装怪怕不安全呗。还装怪说你的密码强度太低。
油猴验证码自动填写（包括用户名和密码)+Django
hayratjanmmmm的博客
02-16 1463
油猴验证码自动填写（包括用户名和密码)+Django。
Android使用AutoCompleteTextView实现自动填充功能的案例
08-26
今天小编就为大家分享一篇关于Android使用AutoCompleteTextView实现自动填充功能的案例，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
jQuery 禁止表单用户名、密码自动填充功能
10-19
主要介绍了jQuery 禁止表单用户名、密码自动填充功能,需要的朋友可以参考下
新手必装的谷歌插件
小康小白的博客
05-20 952
我是小康小白，一个平平无奇的Java小白。热爱有趣的文字，生活和远方。 1.最应当被介绍的就是—Tampermonkey 这一款插件绝对是相当nice的。 它长这样 这款插件在火狐中同样也是存在的，不过叫油猴子； 这款插件提供了极其丰富的脚本，功能五花八门； 脚本可以自己写，也可以在脚本网站上面下载（写脚本大概需要HTML+Javascript+jQuery方面的知识，有能力的同志可以尝试一下( •̀ ω •́ )y） 点开长这样 Greasy Fork脚本网站https://greasyfork.
酷安电脑版_2020年终版《安卓全套日用APP解决方案》
weixin_39647977的博客
11-08 5627
　　全新版本安卓全套日用APP解决方案，本方案中100％ 应用Target API≥26，其中70％ 以上Target API≥28，10％ Target API 为30。80％应用是64位。不了解Target API，64位的请阅读酷安看看号置顶。后续我也会发到知乎。2021全新版本 来自 独舞绝伦 - 酷安网​——————————————前言————————————　　①Android11系统...
java | 使用Cipher类实现AES所有常用加密模式
橘生淮南
12-28 3533
java | 使用Cipher类实现AES所有常用加密模式
python自动化测试实战下载_python+selenium自动化测试实战（邮箱登录为例）
weixin_39837139的博客
11-24 277
web自动化的前提：1.环境要求：python和pycharm2.安装好环境需要后还需要cmd 输入pip install selenium 引入selenium web自动化测试库3.google浏览器为例还需要下载和浏览器为同一版本的驱动程序放入和 python.exe文件同一目录下以126邮箱为例如何进行自动化测试呢？在此之前我们先屡一下思路，手工测试如何进行打开浏览器输入网址找到登录页...
Tampermonkey(油猴)脚本编写快速入门
蚩尤后裔-汪茂雄
01-11 1万+
是一款免费的浏览器扩展和最为流行的用户脚本管理器，相当于一个管理插件的插件，它适用于ChromeSafariOpera Next, 和Firefox。虽然有些受支持的浏览器拥有原生的用户脚本支持，但 Tampermonkey 将在您的用户脚本管理方面提供更多的便利，它提供了诸如便捷脚本安装、自动更新检查、标签中的脚本运行状况速览、内置的编辑器等众多功能， 同时Tampermonkey还有可能正常运行原本并不兼容的脚本。，安装非常简单，与安装普通的插件无异。
油猴Tampermonkey使用与编写一个定时任务
weixin_49707375的博客
01-06 2767
油猴Tampermonkey安装与使用，以及如何写一个定时发布任务
用代码禁用edge自动填充密码
05-24
您可以使用以下 JavaScript 代码禁用 Edge 浏览器的自动填充密码功能： ``` var inputs = document.querySelectorAll('input[type="password"]'); Array.prototype.forEach.call(inputs, function(input) { input.setAttribute('autocomplete', 'off'); }); ``` 这将遍历文档中所有类型为密码的输入元素，并将自动完成属性设置为“关闭”，从而禁用 Edge 浏览器的自动填充密码功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值