记一次脚本升级

2017年10月下旬,伟大的二次元同性交友网站更新了他们的直播页面,在前几天反复收到脚本更新的反馈请求,于是抽了两天时间仔细研究了一下 BiliBili 的新直播间页面。

  • api.live.bilibili.com和live.bilibili.com混用

在新的页面上,所有的数据接口全部转向了api.live.bilibili.com,使用jsonp的方法跨域请求,尤其是宝箱验证码的部分,也是这样一个跨域的图片,由于跨子域的图片会污染canvas导致无法识别,所以这否决了在当前页面中进行验证码识别的方案,只能另外寻找识别方法。

基于iframe的跨子域通信的方法,可以将验证码识别单独放在一个iframe中,脚本另外绑定该网址,在该网址中进行验证码识别,在需要识别验证码的时候,主页面打开iframe,脚本完成识别后立即回调主页面的验证函数,即可做到处理图片跨域的问题。

这里也很想吐槽 标准 ,明明iframe都可以跨子域相互通信,那么禁止图片跨子域的意义不大啊……如果可以使用脚本的话,不过这对网站方来说还是有一定意义的。

  • vue.js使用的双向绑定技术无法识别JS操作value的结果

在vue.js的双绑中,是没法识别到JS对input元素的操作的,因此在验证码识别完成后,提交之时还是会显示验证码为空,原因在于v-model中的值没有能够正确改变。

网上对与该问题只找到一个处理办法,使用.focus函数先使input取得焦点,实际测试的时候还是发现并不能做到100%解决这个问题,其他方案大多数是建议操作input时同样适用vue.js内部的方法。

该问题困扰了我很长时间,最后依然无法解决,只能另外写一套计时程序,仿照其API与后台进行通讯,也就是目前的做法。于是又不得不写了一套消息提示函数和ajax函数。最后使用iframe进行回调。

整个处理的流程就是在第一次载入以后读取目前的宝箱状态,然后将原有的宝箱隐藏,用自己的一套计时函数替代原有的函数,最后按照流程嵌套,即可完成最终的识别和验证过程

有一个比较坑的就是在验证完成之后,需要请求另一个API来刷新服务器的宝箱状态,这个我觉得是多余的,但是不得不加上去。否则服务器不会为下一个宝箱计时。

最后将脚本整合在同一个脚本中,完成一些扫尾工作,就算是完成这一次升级了。