java爬虫破解滑块验证码_计算缺口滑块图和完整滑块图者差距

2401_86372526

于 2024-09-07 21:35:15 发布

阅读量1.5k

点赞数 14

文章标签： java 爬虫 javascript

本文链接：https://blog.csdn.net/2401_86372526/article/details/142004825

版权

    #slider {
        position: relative;
        background-color: #e8e8e8;
        width: 300px;
        height: 34px;
        line-height: 34px;
        text-align: center;
    }

    #slider .handler {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 40px;
        height: 32px;
        border: 1px solid #ccc;
        cursor: move;
    }

    .handler_bg {
        background: #fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTEyNTVEMURGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTEyNTVEMUNGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2MTc5NzNmZS02OTQxLTQyOTYtYTIwNi02NDI2YTNkOWU5YmUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+YiRG4AAAALFJREFUeNpi/P//PwMlgImBQkA9A+bOnfsIiBOxKcInh+yCaCDuByoswaIOpxwjciACFegBqZ1AvBSIS5OTk/8TkmNEjwWgQiUgtQuIjwAxUF3yX3xyGIEIFLwHpKyAWB+I1xGSwxULIGf9A7mQkBwTlhBXAFLHgPgqEAcTkmNCU6AL9d8WII4HOvk3ITkWJAXWUMlOoGQHmsE45ViQ2KuBuASoYC4Wf+OUYxz6mQkgwAAN9mIrUReCXgAAAABJRU5ErkJggg==") no-repeat center;
    }

    .handler_ok_bg {
        background: #fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDlBRDI3NjVGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDlBRDI3NjRGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDphNWEzMWNhMC1hYmViLTQxNWEtYTEwZS04Y2U5NzRlN2Q4YTEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+k+sHwwAAASZJREFUeNpi/P//PwMyKD8uZw+kUoDYEYgloMIvgHg/EM/ptHx0EFk9I8wAoEZ+IDUPiIMY8IN1QJwENOgj3ACo5gNAbMBAHLgAxA4gQ5igAnNJ0MwAVTsX7IKyY7L2UNuJAf+AmAmJ78AEDTBiwGYg5gbifCSxFCZoaBMCy4A4GOjnH0D6DpK4IxNSVIHAfSDOAeLraJrjgJp/AwPbHMhejiQnwYRmUzNQ4VQgDQqXK0ia/0I17wJiPmQNTNBEAgMlQIWiQA2vgWw7QppBekGxsAjIiEUSBNnsBDWEAY9mEFgMMgBk00E0iZtA7AHEctDQ58MRuA6wlLgGFMoMpIG1QFeGwAIxGZo8GUhIysmwQGSAZgwHaEZhICIzOaBkJkqyM0CAAQDGx279Jf50AAAAAABJRU5ErkJggg==") no-repeat center;
    }

    #slider .drag_bg {
        background-color: #7ac23c;
        height: 34px;
        width: 0px;
    }

    #slider .drag_text {
        position: absolute;
        top: 0px;
        width: 300px;
        -moz-user-select: none;
        -webkit-user-select: none;
        user-select: none;
        -o-user-select: none;
        -ms-user-select: none;
    }

    .unselect {
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
    }

    .slide_ok {
        color: #fff;
    }
</style>

拖动滑块验证


### 分析


1.查看滑块按钮大小


![](https://img-blog.csdnimg.cn/1c53ae741bd843f19aab19122d2e74e3.png)


 2.查看滑块大小


![](https://img-blog.csdnimg.cn/0fea6d3964b54bdea4035eab9fdff992.png)


 从上面2张图得出拖动距离为(300-40)px


### 爬虫代码

public static void main(String[] args) throws Exception {
System.setProperty(“webdriver.chrome.driver”,“D:\demo\selenumDemo\src\main\resources\chromedriver.exe”);
WebDriver driver = new ChromeDriver();
try {
driver.get(“file:///C:/Users/Administrator/Desktop/index.html”);
WebElement Slider = driver.findElement(By.cssSelector(“.handler.handler_bg”));// 拿到滑块按钮
Thread.sleep(2000L);
// 实例化鼠标操作对象Actions
Actions action = new Actions(driver);
action.dragAndDropBy(Slider,260,0).perform();// 移动一定位置

    Thread.sleep(5000L);
} catch (InterruptedException e) {
    e.printStackTrace();
}finally{
    // driver.close();// 关闭页面
    driver.quit();// 释放资源
}

}


**注意：**有的网站拖完后可能验证成功，有的可能失败，失败的童鞋也不要慌张，因为被网站检测出你用的是爬虫操作的，我有妙计！接着往下看！


先分分析一波！1.使用驱动打开浏览器

public static void openChrome(){
System.setProperty(“webdriver.chrome.driver”,“D:\demo\selenumDemo\src\main\resources\chromedriver.exe”);
// 1.打开Chrome浏览器
chromeDriver = new ChromeDriver();
chromeDriver.get(“url…”);
}


2.然后 f12打开console控制台输入：window.navigator.webdriver


![](https://img-blog.csdnimg.cn/61cfd3b32a304fc2bfdbd3189f1c32ce.png)


 发现值是true，但是我们正常手动打开浏览器他却是false或者undefined，如下图


![](https://img-blog.csdnimg.cn/9e2cf1f3a22b40479214e1aa4158b4b5.png)


 


所以得出结论网站通过代码获取这个参数，返回值undefined或者false是正常浏览器，返回true说明用的是Selenium模拟浏览器，所以解决还是要从驱动浏览器解决，在启动Chromedriver之前，来隐藏它

public static void openChrome(){
// 隐藏 window.navigator.webdriver
ChromeOptions option = new ChromeOptions();
option.setExperimentalOption(“useAutomationExtension”, false);
option.setExperimentalOption(“excludeSwitches”, Lists.newArrayList(“enable-automation”));
option.addArguments(“–disable-blink-features=AutomationControlled”);//主要是这句是关键

System.setProperty(“webdriver.chrome.driver”,“D:\demo\selenumDemo\src\main\resources\chromedriver.exe”);
// 1.打开Chrome浏览器
chromeDriver = new ChromeDriver(option);
chromeDriver.get(“URL…”);
}


然后再次启动查看就变成了false




---


## 破解缺口滑块


缺口滑块如下图：


![](https://img-blog.csdnimg.cn/bac8418af71e4be08b45c67b018a6677.png)


###  分析


我拿某网站的滑块源代码来分析，如下图可以看出缺口滑块图是由canvas绘制的。


![](https://img-blog.csdnimg.cn/410d4e0815e54b918c6fc6cb33e5f6c8.png)


 1.我们要做的是找到缺口的X坐标，所以需要拿到完整图片和缺口图片进行计算，但是我们只能看见一张缺口图片，但是我们只要在canvas的css加一行代码style="display:none"![](https://img-blog.csdnimg.cn/6bc4f116314644e78f3e445a0d43d0b2.png)


 然后再看就出现了没有拼图阻挡的缺口图


 ![](https://img-blog.csdnimg.cn/c57155875a6a4a9aa5a716ceafcfee05.png)


 2.然后在下面的canvas 修改style="display:block"就可以看到完整图片如下下图![](https://img-blog.csdnimg.cn/20ec33b78f2e4114b28203a021cae172.png)


然后再看发现看到了完整的图


 ![](https://img-blog.csdnimg.cn/28e6166673ac4558a842f80234ddc106.png)


 3.然后使用selenium的截图方法,把原图和缺口图保存下来,然后再拿着像素对比可以算出按钮位置与缺口X坐标




---


### 爬虫代码

public class ElementLocate {
private static ChromeDriver chromeDriver;

public static void main(String[] args) throws InterruptedException, IOException {
openChrome();// 打开浏览器等操作
try {
chromeDriver.manage().window().maximize();// 浏览器最大化
// 等待滑块加载完毕
new WebDriverWait(chromeDriver, 5)
.until(ExpectedConditions.visibilityOfElementLocated(By.xpath(“//div[@aria-label=‘点击按钮进行验证’]”)));
// 点开滑块
chromeDriver.findElementByXPath(“//div[@aria-label=‘点击按钮进行验证’]”).click();// 点开验证框
operateSlider();// 操作滑块
} finally {
chromeDriver.quit();//测试完要停止不然卡成球
}
}

private static void openChrome() {
// 配置浏览器
ChromeOptions option = new ChromeOptions();
option.setExperimentalOption(“useAutomationExtension”, false);
option.setExperimentalOption(“excludeSwitches”, Lists.newArrayList(“enable-automation”));

最后

🍅 硬核资料：关注即可领取PPT模板、简历模板、行业经典书籍PDF。
🍅 技术互助：技术群大佬指点迷津，你的问题可能不是问题，求资源在群里喊一声。
🍅 面试题库：由技术群里的小伙伴们共同投稿，热乎的大厂面试真题，持续更新中。
🍅 知识体系：含编程语言、算法、大数据生态圈组件（Mysql、Hive、Spark、Flink）、数据仓库、Python、前端等等。

加入社区：https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0