js教程

利用JS插件识别抖音图片验证的几种方法

我的站长站 2023-02-03 人阅读

经常刷网页版的抖音,但隔一段时间就会出现验证码,有滑块和文字点选。今天尝试开发一个自动完成验证的插件,但遇到了跨域图片不能直接获得base64数据的问题。

准备插件工具:https://pan.baidu.com/s/1IiSvK8DuftEqeaXI9fZIyg?pwd=j1DM+ 提取码:j1dm

工具使用说明:

post方式向http://127.0.0.1:2000提交数据
{type:"ocrCode",img:图形base64}      识别文字字母等
{type:"detection",img:图形base64}         识别点选文字范围
{type:"slide",targetImg:滑块base64,backgroundImg:背景base64}        识别滑块
{type:"clickImage",key:"窗口关键字",img:按钮base64}         点击图形按钮
{type:"passKey",key:按键}                   模拟键盘按键
{type:"activityWindow",window:"要激活的窗口标题关键字",key:按键【可选】}          激活窗口并按键
{type:"click"}               点击鼠标
{type:"clickPoint",x:X坐标,y:Y坐标}        指定坐标点击鼠标
{type:"move",x:X坐标,y:Y坐标}               移动鼠标
{type:"moveAndClick",x:X坐标,y:Y坐标}                       移动鼠标到指定坐标再点击
{type:"write",text:"要输入的内容"}           模拟键盘输入文字

第一种:通常获取图片数据直接用canvas drawImage简单直接快速。
但在部分网站中是禁止使用canvas的,所以我就用
第二种:  使用 XMLHttpRequest异步(注意只能异步)读取blob数据转base64。
但如果图片是跨域的,第一、二种都会失效
第三种(支持跨域): 在浏览器插件的background.js中使用 XMLHttpRequest读取图片然后传给inject_script.js 。也可以用于其它数据的读取。
以下代码示例,过抖音验证(文字点选类识别率较低,需要训练模型然后更新到识别程序中才能完善)。

//识别验证码
function ocrFormApi(_data) {
    var _code = "本地未开启P娃儿猫验证码识别工具的web服务。";
    try {
        console.log("提交后台识别中...");
        $.ajax({
            type: "POST",
            url: "http://127.0.0.1:2000/",
            timeout: 2 * 1000,
            async: false,
            data: _data,
            success: function (data) {
                _code = data;
            },
            error: function (_d) {
                _code = "识别错误";
            }
        });
    } catch (e) {
 
    }
    return _code;
}
//滑块操作(滑块元素ID,要滑动的距离)
function mockVerify(_imgId, _distance) {
    var btn = document.querySelector("#" + _imgId);
    var mousedown = document.createEvent('MouseEvents');
    var rect = btn.getBoundingClientRect();
    var x = rect.x;
    var y = rect.y;
    mousedown.initMouseEvent('mousedown', true, true, window, 0,
        x, y, x, y, false, false, false, false, 0, null);
    btn.dispatchEvent(mousedown);
 
    var dx = 0;
    var dy = 0;
    var interval = setInterval(function () {
        var mousemove = document.createEvent('MouseEvents');
        var _x = x + dx;
        var _y = y + dy;
        mousemove.initMouseEvent('mousemove', true, true, window, 0,
            _x, _y, _x, _y, false, false, false, false, 0, null);
        btn.dispatchEvent(mousemove);
        console.log("MOVE");
        btn.dispatchEvent(mousemove);
        if (_x - x >= _distance) {
            clearInterval(interval);
            var mouseup = document.createEvent('MouseEvents');
            mouseup.initMouseEvent('mouseup', true, true, window, 0,
                _x, _y, _x, _y, false, false, false, false, 0, null);
            btn.dispatchEvent(mouseup);
            console.log("END");
        }
        else {
            dx += Math.ceil(Math.random() * 50);
 
        }
    }, 60);
}
//传入图像元素通过canvas转换
function getImgBase64(_img) {
    var canvas = document.createElement("canvas");
    canvas.width = _img.naturalWidth;
    canvas.height = _img.naturalHeight;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(_img, 0, 0);
    return canvas.toDataURL("image/png").replace("data:image/png;base64,", "");
}
//传入图片地址(不能跨域),通过blob转换(只能异步)
function getImgBase64ByUrl(_url, _success) {
    var xhr = new XMLHttpRequest();
    xhr.responseType = "blob";
    xhr.open("POST", _url, true);
    xhr.onload = function (data, textStatus, request) {// 请求完成处理函数
        if (this.status === 200) {
            var _blob = this.response;// 获取返回值
            let _f = new FileReader();
            _f.onload = function (_e) {
                console.log(_e.target.result);
                _success(_e.target.result);
            }
            _f.readAsDataURL(_blob);
        } else {
            console.log(this.status);
        }
    };
    xhr.send();
}
function checkCodeOut() {
    if ($("#captcha-verify-image:visible").length) {
        //获取跨域图片数据(把  getImgBase64ByUrl 中的方法放到插件的background中,因为background没有跨域问题)
        window.sendMessage({ type: "getDataFromUrl", data: { url: $("#captcha-verify-image:visible").attr("src"), blob: 1, type: "GET" } }, function (_base64) {
            var _backgroundImg = _base64.replace("data:image/jpeg;base64,", "");
            //点选文字
            if ($("#verify-bar-code:visible").length) {
                window.sendMessage({ type: "getDataFromUrl", data: { url: $("#verify-bar-code:visible").attr("src"), blob: 1, type: "GET" } }, function (_base64) {
                    var _targetImg = _base64.replace("data:image/jpeg;base64,", "");
                    //识别出要求点选的文字
                    var _data = ocrFormApi({ type: "ocrCode", img: _targetImg });
                    //_data = JSON.parse(_data);
                    var _txt = _data.code;
                    //识别背景图上的文字及对应坐标
                    _data = ocrFormApi({ type: "detection", img: _backgroundImg });
                    console.log(_data)
                    _data = _data.code;
                    for (var _i = 0; _i < _txt.length; _i++) {
                        if (_data[_txt.charAt(_i)]) {
                            console.log("“" + _txt.charAt(_i) + "”字点击范围:", _data[_txt.charAt(_i)])
                        } else {
                            console.log("“" + _txt.charAt(_i) + "”字范围未能识别成功,请刷新。");
                            $(".secsdk_captcha_refresh--text").click();
                        }
                    }
                });
            }
            //滑块
            if ($(".captcha_verify_img_slide:visible").length) {
                window.sendMessage({ type: "getDataFromUrl", data: { url: $(".captcha_verify_img_slide:visible").attr("src"), blob: 1, type: "GET" } }, function (_base64) {
                    var _targetImg = _base64.replace("data:image/jpeg;base64,", "");
                    var _data = ocrFormApi("slide", { type: "slide", targetImg: _targetImg, backgroundImg: _backgroundImg });
                    console.log("滑块需要操作的数据:", _data);
                    $(".captcha_verify_img_slide:visible").attr("id", "52pj_slide");
                    mockVerify("52pj_slide", _data.x);
                });
            }
        });
        return;
    }
    setTimeout(checkCodeOut, 1000);
}
function init() {
    var _l = location.href;
    if (_l.indexOf("www.douyin.com") != -1) {
        checkCodeOut();
        return;
    }
    return;
}
if (typeof $ == 'undefined') {
    var s = document.createElement("script");
    s.onload = init;
    s.src = "https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js";
    document.getElementsByTagName("HEAD")[0].appendChild(s);
} else {
    init();
}


相关推荐
  • JS禁止
  • JS禁止复制+框选+F12+F5+debugr+右键等功能代码

    一整套常用的JS禁止用户操作代码,包含禁止用户复制、鼠标框选文本、禁止浏览器F12键、浏览器F5键、无限debugr、禁止鼠标右键等功能代码。对防止扒站、抄袭内容还是有一点作用,算是一种防护吧!写的很全,特意分享给网友们!//禁用右键 window.onconte...

    js教程 38 8个月前
  • js禁止微信QQ内置浏览器访问网站,防止域名红名

    我们可以使用JavaScript中的userAgent函数,来判断网站是否为QQ内置浏览器访问的方法,就可以轻松的防止域名被QQ微信红名提示。相比于写程序代码的方法,JS这种方法更简单,只需一段JS代码即可完成。判断是否为微信访问let is_weixin = (function () { l...

    js教程 69 9个月前
  • 利用JS插件识别抖音图片验证的几种方法

    经常刷网页版的抖音,但隔一段时间就会出现验证码,有滑块和文字点选。今天尝试开发一个自动完成验证的插件,但遇到了跨域图片不能直接获得base64数据的问题。准备插件工具:https://pan.baidu.com/s/1IiSvK8DuftEqeaXI9fZIyg?pwd=j1dm 提取码:j1dm工具使用...

    js教程 53 1年前
最新更新
  • js截取字符串教程

    slice()方法接受两个参数,起始索引和结束索引(可选)。它返回从起始索引到结束索引(不包括结束索引)之间的子字符...

    js教程 1周前
  • find findIndex indexOf索引选择器使用方法

    find使用方法find方法是ES6引入的一种数组方法,可以用来查找数组中符合条件的元素。语法是:array.find(callba...

    js教程 3周前
  • js复制网页内容教程

    Async Clipboard API方法HTML5新增的方法,无需引入第三方插件,直接就可以复制内容。低版本的浏览器可能会不兼...

    js教程 1个月前
  • js获取字符长度函数分享

    js获取字符长度函数function objLen(str) { if (str == null) return 0; if (typeof str != "string") { ...

    js教程 1个月前
  • 网站LED跑马灯效果广告代码

    网站可以看到很多的论坛网站都会用到这种网站LED跑马灯效果,这种效果实现也很简单,分享给大家。LED跑马灯效果...

    js教程 1个月前