免费书画网站怎么做的,如何开发一个app建设一个网站,济南做网站哪里好,wordpress禁止谷歌字体大小去年发过一篇文章#xff0c;《使用前端技术破解掘金滑块验证码》#xff0c;我很佩服掘金官方的气度#xff0c;不但允许我发布这篇文章#xff0c;还同步发到了官方公众号。最近发现掘金的滑块验证码升级了#xff0c;也许是我那篇文章起到了一些作用#xff0c;逼迫官…去年发过一篇文章《使用前端技术破解掘金滑块验证码》我很佩服掘金官方的气度不但允许我发布这篇文章还同步发到了官方公众号。最近发现掘金的滑块验证码升级了也许是我那篇文章起到了一些作用逼迫官方加强了安全性这是一个非常好的现象。 不过这并不是终点我们还是可以继续破解。验证码的安全性是在用户体验和安全性之间的一个平衡如果安全性太高用户体验就会变差如果用户体验太好安全性就会变差。掘金的滑块验证码是一个很好的例子它的安全性和用户体验之间的平衡做得非常好并且我们破解的难度体验也非常好。 本次升级的内容
掘金的滑块验证码升级了主要有以下几个方面的改进
首先验证码不再是掘金自己的验证码了而是使用了字节的校验服务可以看到弹窗是一个 iframe并且域名是 bytedance.com。 我们都知道掘金被字节收购了可以猜测验证码的升级是字节跳动的团队做的。 验证码的图形不再是拼图而是随机的不同形状比如爱心、六角星、圆环、月亮、盾牌等。增加了干扰缺口主要是大小或旋转这种操作。
下面看一下改版后的滑块验证码 我在文章的评论区看到了一些关于这次升级或相关的讨论 本文将继续破解这次升级后的滑块验证码看看这次升级对破解的难度有多大影响如果你还没有了解过如何破解滑块验证码请先看我之前的文章。
iframe
这次升级整个滑块都掉用的是外部链接使用 iframe 呈现那么在 puppeteer 中如何处理呢
await page.waitForSelector(iframe);
const elementHandle await page.$(iframe);
const frame await elementHandle.contentFrame();实际上我们只需要等待 iframe 加载完成然后获取 iframe 的内容即可。
Frame 对象和 Page 对象有很多相似的方法比如 frame.$、frame.evaluate 等我们可以直接使用这些方法来操作 iframe 中的元素。
验证码的识别
上一篇文章采用比较简单的判断方式当时缺口处有明显的白边所以只需要找到这个白边即可。 但是本次升级后缺口不再是白边而是阴影的效果并且缺口的形状也不再是拼图大概率都是曲线的边所以再判断缺口的方式就不再适用了。
现在我们可以采用一种新的方式通过对比滑块图片和缺口区域的像素值相似程度来判断缺口位置。
首先还是二值化处理将图片转换为黑白两色 可以看到左侧缺口和右侧缺口非常相似只是做了一点旋转作为干扰。
再看一下iframe 中还有一个很重要的东西就是校验的图片 它是一个 png 图片所以我们可以把它也转换成二值化简单的方式就是将透明色转换为白色非透明色转换为黑色如果想提高识别精度可以与背景图一样通过灰度、二值化的转换方式。
// 获取缺口图像
const captchaVerifyImage document.querySelector(#captcha-verify_img_slide,
) as HTMLImageElement;
// 创建一个画布将 image 转换成canvas
const captchaCanvas document.createElement(canvas);
captchaCanvas.width captchaVerifyImage.width;
captchaCanvas.height captchaVerifyImage.height;
const captchaCtx captchaCanvas.getContext(2d);
captchaCtx.drawImage(captchaVerifyImage,0,0,captchaVerifyImage.width,captchaVerifyImage.height,
);
const captchaImageData captchaCtx.getImageData(0,0,captchaVerifyImage.width,captchaVerifyImage.height,
);
// 将像素数据转换为二维数组同样处理灰度、二值化将像素点转换为0黑色或1白色
const captchaData: number[][] [];
for (let h 0; h captchaVerifyImage.height; h) {captchaData.push([]);for (let w 0; w captchaVerifyImage.width; w) {const index (h * captchaVerifyImage.width w) * 4;const r captchaImageData.data[index] * 0.2126;const g captchaImageData.data[index 1] * 0.7152;const b captchaImageData.data[index 2] * 0.0722;if (r g b 30) {captchaData[h].push(0);} else {captchaData[h].push(1);}}
}为了对比图形的相似度二值化后的数据我们页采用二维数组的方式存储这样可以方便的对比两个图形的相似度。
如果想观测二值化后的真是效果可以把二位数组转换为颜色并覆盖到原图上
// 通过 captchaData 0 黑色 或 1 白色 的值绘制到 canvas 上查看效果
for (let h 0; h captchaVerifyImage.height; h) {for (let w 0; w captchaVerifyImage.width; w) {captchaCtx.fillStyle captchaData[h][w] 1 ? rgba(0,0,0,0) : black;captchaCtx.fillRect(w, h, 1, 1);}
}
captchaVerifyImage.src captchaCanvas.toDataURL();数据拿到后我们可以开始对比两个图形的相似度这里就采用非常简单的对比方式从左向右逐个像素点对比横向每个图形的像素一致的点数量纪录下来然后取最大值这个最大值就是缺口的位置。
这里我们先优化一下要对比的数据我们只需要对比缺口的顶部到底部这段的数据截取这一段可以减少对比的性能消耗。 // 获取captchaVerifyImage 相对于 .verify-image 的偏移量
const captchaVerifyImageBox captchaVerifyImage.getBoundingClientRect();
const captchaVerifyImageTop captchaVerifyImageBox.top;
// 获取缺口图像的位置
const imageBox image.getBoundingClientRect();
const imageTop imageBox.top;
// 计算缺口图像的位置top 向上取整bottom 向下取整
const top Math.floor(captchaVerifyImageTop - imageTop);
// data 截取从 top 列到 top image.height 列的数据
const sliceData data.slice(top, top image.height);然后循环对比两个图形的像素点计算相似度
// 循环对比 captchaData 和 sliceData从左到右每次增加一列返回校验相同的数量
const equalPoints [];
// 从左到右每次增加一列
for (let leftIndex 0; leftIndex sliceData[0].length; leftIndex) {let equalPoint 0;// 新数组 sliceData 截取 leftIndex - leftIndex captchaVerifyImage.width 列的数据const compareSliceData sliceData.map((item) item.slice(leftIndex, leftIndex captchaVerifyImage.width),);// 循环判断 captchaData 和 compareSliceData 相同值的数量for (let h 0; h captchaData.length; h) {for (let w 0; w captchaData[h].length; w) {if (captchaData[h][w] compareSliceData[h][w]) {equalPoint;}}}equalPoints.push(equalPoint);
}
// 找到最大的相同数量大概率为缺口位置
return equalPoints.indexOf(Math.max(...equalPoints));对比时像素较多不容易直接看到效果这里写一个简单的二位数组对比方便各位理解
[[0, 1, 0],[1, 0, 1],[0, 1, 0],
]
[[0, 0, 0, 1, 0, 0],[0, 0, 1, 0, 1, 0],[0, 0, 0, 1, 0, 0],
]循环对比那么第3列开始匹配的数量可以达到9所以返回 3这样就是滑块要移动的位置。
干扰缺口其实对我们这个识别方式没什么影响最多可能会增加一些失败的概率我个人测试了一下识别成功率有 95% 左右。
总结
这次升级后掘金的滑块验证码的安全性有了一定的提升还是可以继续破解的只是难度有所增加。最后再奉劝大家不要滥用这个技能这只是为了学习和研究不要用于非法用途。如果各位蹲局子可不关我事啊。 ️
