input获取焦点原生js_纯JS与Electron攻破微信公众号自动登录到扫码功能

注意&＃xff0c;本文实现功能不涉及任何后端&＃xff0c;有后端搭伙的小伙伴可以不用看了哈。

微信

这两天解决公众号广告分发平台项目(基于Electron)的一些棘手问题&＃xff0c;其中之一就是微信公众号自动登录问题。

一个PC客户端&＃xff0c;内嵌了一个webview&＃xff0c;里面塞入的是微信公众号首页&＃xff0c;即登录页&＃xff1a;https://mp.weixin.qq.com/&＃xff0c;拿COOKIE&＃xff0c;Token什么的不在本文内&＃xff0c;较为敏感&＃xff0c;这里只说一下实现自动登录功能。

公众号首页

核心功能就两块&＃xff0c;webview的preload插入js文件&＃xff0c;js文件里面动态嵌入不同的账密。

Electron的webview允许开发者设计预插入一个js文件&＃xff0c;具体官网描述如下&＃xff1a;

preload

preload

指定一个脚本在访客页中其他脚本执行之前先加载。 该脚本的URL的协议必须是 file: asar:二者之一&＃xff0c;因为在访客页中&＃xff0c;它是通过“内部”的 require 去加载的

当访客页没有 node integration &＃xff0c;这个脚本仍然有能力去访问所有的 Node APIs, 但是当这个脚本执行执行完成之后&＃xff0c;通过Node 注入的全局对象(global objects)将会被删除。

注意: 在为 will-attach-webview 事件指定 webPreferences 时&＃xff0c;这个选项将作为 preloadURL 出现&＃xff0c;而不是 preload。

所以&＃xff0c;相对来说简单的想法就是在preload的js里面&＃xff0c;我们做一下输入框内容的填充即可。

道理是这么个道理&＃xff0c;但是实际操作起来会有一些问题&＃xff0c;我们代码一步一步来&＃xff0c;首先想到的是&＃xff0c;input.value &＃61; x这种操作。

下面是账号input相关信息&＃xff1a;

account

下面是密码input相关信息&＃xff1a;

pwd

那么就可以通过querySelector方式获取两个输入框了&＃xff1a;

// inputs.length &＃61;&＃61;&＃61; 2&＃xff0c;刚好两个&＃xff0c;不用担心其他的干扰了。let inputs &＃61; document.querySelectorAll(&＃39;.weui-desktop-form__input&＃39;)

再观察登录按钮下&＃xff1a;

login

嘛&＃xff0c;我个人是不喜欢使用a标签当提交按钮……

获取方式&＃xff1a;

let a &＃61; document.querySelector(&＃39;.btn_login&＃39;)

很简单吧。

于是就有如下提交代码&＃xff1a;

let inputs &＃61; document.querySelectorAll(&＃39;.weui-desktop-form__input&＃39;)// 随手放到数组里&＃xff0c;不要较真&＃xff0c;账密自己填写自己的let infos &＃61; [&＃39;account&＃39;, &＃39;password&＃39;]for(let i &＃61; 0; i { let a &＃61; document.querySelector(&＃39;.btn_login&＃39;) a.click() }, 0)}

按说&＃xff0c;逻辑没问题。但是&＃xff0c;实际使用公众号平台会返回告诉你&＃xff0c;没有输入账号(密码)。

只能抠下源码分析怎么回事了&＃xff0c;源码所在位置(随机数你看到的与我未必一样)&＃xff1a;

源码

右侧复制下来&＃xff0c;然后本地编辑器新建js&＃xff0c;并且格式化后就可以看到比较清晰的源码&＃xff0c;虽然命名被压缩后比较奇葩&＃xff0c;如下&＃xff1a;

源码格式化后

检索相关关键词(比如“你还没有输入帐号&＃xff01;”)&＃xff0c;或者login(查多了就知道了)&＃xff0c;就可以找到相关的逻辑所在。

通过第一行的define&＃xff0c;第一时间想到的是seajs&＃xff0c;后来发现就是seajs&＃xff0c;无他。

再看到里面的&＃xff0c;computed&＃xff0c;watch&＃xff0c;mounted之类的&＃xff0c;也可以联想到是Vue&＃xff0c;所以应当是seajs与Vue混合开发的公众号首页。

到这里&＃xff0c;就相对清晰了&＃xff0c;获取不到账密原因在于我们直接设置value的方式&＃xff0c;并不能触发Vue实例的data修改&＃xff0c;如下&＃xff1a;

核心data值

此时&＃xff0c;就该想到Vue的事件机制(不需要懂源码&＃xff0c;用过就差不多)&＃xff0c;简单来说&＃xff0c;就是事件函数驱动data变化&＃xff0c;而不是外部手动修改DOM可以触发。

所以&＃xff0c;增加一句话就可以混淆Vue的data机制&＃xff0c;从而解决data值不响应变化的问题&＃xff1a;

input.dispatchEvent(new Event(&＃39;input&＃39;))

没错&＃xff0c;神奇的Event函数&＃xff0c;通过new对象的方式&＃xff0c;让相应标签实例主动触发相关事件。

这里注意下&＃xff0c;不是所有都是input事件&＃xff0c;这个根据标签不同而不同&＃xff0c;我们这里要解决的是微信公众号登录的问题&＃xff0c;所以是输入框input标签&＃xff0c;那么自然就是input事件(oninput)了。

完整处理代码如下&＃xff0c;请注意与上方的对比&＃xff1a;

let inputs &＃61; document.querySelectorAll(&＃39;.weui-desktop-form__input&＃39;)// 随手放到数组里&＃xff0c;不要较真&＃xff0c;账密自己填写自己的let infos &＃61; [&＃39;account&＃39;, &＃39;password&＃39;]for(let i &＃61; 0; i { let a &＃61; document.querySelector(&＃39;.btn_login&＃39;) a.click() }, 0)}

这样&＃xff0c;a的click事件就生效了&＃xff0c;至此&＃xff0c;完成登录这个事情。

上面解决了模拟登录问题&＃xff0c;但是仅仅是模拟&＃xff0c;因为账密是写死的&＃xff0c;别忘了&＃xff0c;我们现在在Electron的一个webview组件里面。

现在要考虑的是&＃xff0c;如何给webview组件带入不同的账密。

1. fs写入新的js&＃xff0c;里面插入账密&＃xff0c;再读取
2. 通过其他webview文件信息插入

先说第一种&＃xff0c;这个是有点node基础的小伙伴都会首先想到的&＃xff0c;没错&＃xff0c;我尝试了&＃xff0c;然后&＃xff0c;挂了。

原因很简单&＃xff0c;沙盒内的文件路径与你启动前配置的文件路径不同&＃xff0c;导致代码上写的读取路径(readFileSync)与写入路径(writeFileSync)不同&＃xff0c;能写不能读&＃xff0c;WTF……这里使用Sync原因很简单&＃xff0c;异步处理相对麻烦&＃xff0c;调试用同步&＃xff0c;高效快速。

于是我们pass第一种方案&＃xff0c;如果你成功了&＃xff0c;务必告诉我下。

然后是第二种&＃xff1a;

这里先说明下&＃xff0c;个人觉得第二种有点侥幸&＃xff0c;因为公众号后端验证没有严格到把ua(userAgent)也算进去&＃xff0c;所以我找到这个方案。

首先查询了webview能够带入进去的所有属性&＃xff0c;很幸运&＃xff0c;有个ua&＃xff0c;官网介绍如下&＃xff1a;

官网ua

useragent

在访客页被导航(navigated)之前&＃xff0c;为它设置 user agent&＃xff0c;一旦这个页面加载之后&＃xff0c;使用 setUserAgent 方法去改变这个页面的 user agent。

事实上&＃xff0c;还有别的(主要受webview限制&＃xff0c;即Electron限制)&＃xff0c;但是懒得找了&＃xff0c;差不多意思就行。

可能已经有小伙伴想到方案了&＃xff0c;所以我就不墨迹了&＃xff0c;直接上代码处理&＃xff0c;先是写入&＃xff1a;

// 你也可以写成标签&＃xff0c;这里为了灵活而已webview.setAttribute(&＃39;useragent&＃39;, "[&＃39;account&＃39;, &＃39;password&＃39;]")

然后读取并赋值&＃xff1a;

let infos &＃61; JSON.parse(navigator.userAgent)

由于ua我们写成了字符串的数组&＃xff0c;所以这里自然可以解开成数组实例。

那么后面就简单了&＃xff0c;不再赘述&＃xff0c;直接看完整的核心代码即可&＃xff0c;注意对比差异&＃xff1a;

let inputs &＃61; document.querySelectorAll(&＃39;.weui-desktop-form__input&＃39;)// 从ua获取传入的值let infos &＃61; JSON.parse(navigator.userAgent)for(let i &＃61; 0; i { let a &＃61; document.querySelector(&＃39;.btn_login&＃39;) a.click() }, 0)}

至此&＃xff0c;我们就解决了纯前端模拟微信页面登录&＃xff0c;并动态不同账号登录的问题了。

效果如下&＃xff1a;

autologin

感谢大家的阅读&＃xff0c;欢迎交流。