关闭

滑动验证码原理实现

时间: 2018-11-24阅读: 5371标签: 验证

滑动验证码在很多网站逐步流行起来,一方面对用户体验来说,比较新颖,操作简单,另一方面相对图形验证码来说,安全性并没有很大的降低。当然到目前为止,没有绝对的安全验证,只是不断增加攻击者的绕过成本。

总的来说:滑动验证码是根据用户在滑动滑块的响应时间,拖拽速度,时间,位置,轨迹,重试次数等来评估风险。其交互时序图,可以如下概括:



滑动验证码的意义  

常见验证码是需要输入图中字符的,是因为机器识别字符比较困难,以此来防止机器自动的行为。但是滑动验证码只需要鼠标滑一下就可以了,用机器来模拟这个过程轻而易举,那滑动验证码的意义在哪里?

  1. 滑动验证码可以显著优化用户体验,这在互联网时代是非常重要的。
  2. 滑动验证码对机器的判断,不只是完成拼图,前端用户看不见的是——验证码后台针对用户产生的行为轨迹数据进行机器学习建模,结合访问频率、地理位置、历史记录等多个维度信息,快速、准确的返回人机判定结果,故而机器识别+模拟不易通过。
  3. 滑动验证码也不是万无一失,但对滑动行为的模拟需要比较强的破解能力,毕竟还是大幅提升了攻击成本,而且技术也会在攻防转换中不断进步。


滑动验证码核心流程分析

1.服务端随机生成抠图和带有抠图阴影的背景图片,服务端保存随机抠图位置坐标;

2.前端实现滑动交互,将抠图拼在抠图阴影之上,获取到用户滑动距离值;

3.前端将用户滑动距离值传入服务端,服务端校验误差是否在容许范围内;

备注说明:单纯校验用户滑动距离是最基本的校验,处于更高安全考虑,可以考虑用户滑动整个轨迹、用户在当前页面上的行为等,可以将其细化复杂地步,可以根据实际情况设计。亦或借助用户行为数据分析模型,最终的目标都是增加非法的模拟和绕过的难度。


滑动验证码分析与论证

A.分析

滑动图形验证码由抠块和带有抠块阴影的原图两部分组成,但是里面包含了两个重要特性保证被暴力破解的难度:

1.抠块的形状随机;

2.抠块所在原图的位置随机;

如此就可以在有限的图集中制造出随机的、无规律可寻的抠图和原图的配对。

B.产生随机形状

1.确定抠图轮廓

大家都知道图片是有像素组成,每个像素点对应一种颜色,颜色可以用RGB形式表示,外加一个透明度,由此可以抽象下模型如下:

把一张图理解成一个平面图形,左上角为原点,向右x轴,向下y轴,每个坐标值对应该位置像素点的颜色,由此就可以把一张图转换成一个二维数组。基于这个考虑,轮廓也用二维数组来表示,轮廓内元素值为1,轮廓外元素值对应0。

2.轮廓形状确定

有坐标系、有矩形、有圆形,由此用数学中解析几何思想,用圆的函数方程和矩形的边线的函数,具体如下:

(x-a)?+(y-b)?=r?中,其中三个参数a、b、r,即圆心坐标为(a,b),半径r。这些将抠图放在上文所述的坐标系上很容易就图算出来具体的值。


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/1410

你知道如何使用Node.js做邮箱验证吗?

相信大家都知道登录操作都会有一个接收验证码的过程,我之前一直对这个非常感兴趣,经常问同学手机验证码是怎么搞的,但是现在我们不用手机也照样可以实现这个功能。

javascript如何验证是否是图片?

在支持FileReader的浏览器中,可以使用indexOf方法检索文件类型是否为image/开头验证是否是图片。在不支持FileReader的浏览器中使用lastIndexOf与substring方法获取文件后缀判断是否图片

javascript如何判断数字是否为浮点数?

JavaScript中可以使用正则表达式来判断是否是浮点数,判断前我们可以使用正则表达式来判断是否是数字。

网页如何实现拼图滑块的验证码_纯js的实现

滑动解锁应该是有两张图片,一张正常的,一张上面有解锁区域的(后端给),然后前端只用把用户释放鼠标后,滑动模块在图片上的xy轴传给后端,后端做成功与否的判断。如果只是纯前端js验证,不具备高安全性。

Validate表单验证插件之常用参数介绍

Validate常用的一些参数和方法:errorElement,errorClass,errorPlacement,errorLabelContainer,errorContainer,wrapper,success,debug

canvas实现随机验证码

canvas生成背景图和文字 设置字体样式和大小,String的fromCharCode(code码)生成大小写字母和数字 str.toLowerCase()转小写,随机抽取不重复的6位数字组成验证码字符串

javascript如何判断数组是否相等?

在javascript中,不能直接用\\\"==“或“===”判断两个数组是否相等。那么如何判断数组是否相等?我们先来看看直接用\\\"==“或“===”来判断两个数组是否相等,会怎么样?

javascript如何检查是否是浮点数?

JavaScript中可以使用正则表达式来判断是否浮点数。首先是判断是不是数字isNaN(),JavaScript中判断浮点数的正则表达式:在程序中的使用方法

javascript如何判断对象是不是为空?

JavaScript 中的所有事物都是对象:字符串、数值、数组、函数等。JavaScript 提供多个内建对象,比如 String、Date、Array 等等。 对象只是带有属性和方法的特殊数据类型。

Js如何判断是否有小数点?

javascript判断是否有小数点的方法:1、可以使用正则表达式(/[\\\\.]/)判断是否有小数点。2、先将数字转换为数组,然后使用indexOf()方法判断数组中是否有小数点。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!