乐趣区

关于前端:揭秘前端滑块验证技术

jiezi

大家好，明天咱们聊一下古代利用中常见的一种交互验证形式：滑块验证。滑块验证也被称为拼图验证码，是一种用于验证用户是否为人类而不是机器人的常见办法。用户须要实现验证后能力持续往下操作，而机器人通常很难模仿这种人类行为。也因为这样，滑块验证曾经成为了网站注册、登录、商品防爬以及其余交互过程中的一种重要安全措施。

简略思路

滑块验证的外围思路是要求用户实现一个工作来验证其非机器人的身份。大多数利用通常包含将一个滑块拖动到正确的地位，使其与一个缺口图像对齐。用户须要通过鼠标或手指触摸滑动来实现。在这个过程中，利用会检测用户的行为数据，并且判断是否是机器人操作。

筹备工具

筹备两张图片, 一张是背景图，一张是从背景图上截的一块：

实现步骤

上面咱们实现一个简略的滑块验证示例，通过简略的 HTML、CSS 和 JavaScript 来实现一个残缺的拼图验证码。

步骤 1：HTML 构造

创立 HTML 构造，包含一个背景图和一个滑块，以及一个蕴含缺口的小图块。代码非常简单：

<div class="slider-container">
  <div class="slider-background">
    <div class="gap-fixed"></div> <!-- 固定缺口地位 -->
    <div class="slider">
        <div class="gap"></div> <!-- 缺口图搁置在滑块外部 -->
    </div>
    <div class="slider-trabecula"></div>
  </div>
</div>

步骤 2：CSS 款式

咱们须要为 HTML 元素增加款式，包含背景图、滑块、缺口等。款式能够通过 CSS 来定义，以下是一些根本款式的示例：

/* 款式 */
.slider-container {
    width: 500px; /* 背景图宽度 */
    height: 300px; /* 背景图高度 */
    margin: 20px auto;
    position: relative;
}

.slider-background {
    width: 100%;
    background: url('https://files.mdnice.com/user/1107/739c3c4b-0082-4719-a5fd-f17506e9ea01.png'); /* 背景图 URL */
    background-size: 100% 100%; /* 背景图铺满 */
    border-radius: 5px;
    height: 300px;
    position: relative;
    overflow-x: hidden;
}

.slider {
  width: 80px; /* 滑块宽度 */
  height: 50px;
  background-color: #3498db;
  border-radius: 5px;
  position: absolute;
  cursor: pointer;
  user-select: none; /* 禁止文本选中 */
  bottom: 10px; /* 滑块位于底部 */
  z-index: 2;
  transition: transform 0.2s ease; /* 增加平滑动画成果 */
}
.slider-trabecula {
  bottom: 10px;
  width: 100%;
  height: 50px;
  position: absolute;
  z-index: 1;
  background: rgb(204 204 204 / 50%);
}

.gap {
  width: 75px; /* 缺口图的宽度 */
  height: 50px; /* 缺口图的高度 */
  background-image: url('https://files.mdnice.com/user/1107/b835a241-5a0d-40ac-9b95-23f7e283dc03.png'); /* 缺口图的 URL */
  background-size: 100% 100%;
  position: absolute;
  top: -112px;
  box-shadow: 0px 0px 5px 1px #ccc;
}
.gap-fixed {
  width: 75px; /* 缺口图的宽度 */
  height: 50px; /* 缺口图的高度 */
  position: absolute;
  bottom: 122px;
  left: 358px;
  box-shadow: 0px 0px 5px 1px #ff0000;
}

步骤 3：JavaScript 交互

最初一步也是最重要的局部 JS 交互。咱们须要解决滑块的拖动、验证逻辑以及用户与滑块的交互。这里展现外围局部：

 // 模仿横轴滑动地位
const mockPositionX = 360;
  // JavaScript
  const slider = document.querySelector('.slider');
  let isDragging = false;
  let startPositionX = 0;

  slider.addEventListener('mousedown', (e) => {
      isDragging = true;
      startPositionX = e.clientX;
  });

  document.addEventListener('mousemove', (e) => {if (!isDragging) return;

      let offsetX = e.clientX - startPositionX;
      slider.style.transform = `translateX(${offsetX}px)`;
  });

  document.addEventListener('mouseup', () => {if (!isDragging) return;

      const transformX = Math.abs(parseInt(slider.style.transform.slice(11)));
      if (transformX < mockPositionX + 10 && transformX > mockPositionX - 10) {
          // 验证通过
          document.querySelector('.slider-trabecula').style.background='rgb(12 160 18 / 50%)';
          // 敞开滑块
          // 此处能够触发后续操作，如登录、列表加载等
      } else {
         // 验证失败
        document.querySelector('.slider-trabecula').style.background='rgb(249 2 2 / 50%)';
        setTimeout(() => {document.querySelector('.slider-trabecula').style.background='rgb(204 204 204 / 50%)';
          slider.style.transform = 'translateX(0)';
        }, 1500);
      }
      isDragging = false;
  });

这样咱们就实现了一个简略的滑块验证码了，来看下成果：

当然在理论利用中，咱们可能须要增加更简单的验证逻辑，以确保安全性。业内有一些罕用的计划和最佳实际，以下是一些业内罕用的计划，我在后续的文章中具体探讨，能够关注我及时理解后续。

滑块随机性

为了减少滑块验证的难度，滑块的地位和缺口的地位应该是随机的，不能是固定的。用户在每次验证时都须要滑动不同地位的滑块，进而避免攻击者依据固定的地位进行攻打。

旋转缺口

有些滑块验证计划会在缺口图像上增加旋转变换，使缺口不仅须要程度滑动，还须要旋转以匹配背景图。这减少了攻打的难度，因为攻击者须要模仿用户旋转滑块。

用户行为剖析

监督用户的行为模式，例如鼠标挪动、点击速度和拖动门路等。通过剖析这些行为能够更好地区分人类用户和机器人。例如，机器人通常会以直线挪动滑块，而用户的挪动门路可能会更加曲线和随机。

服务端验证

这个很重要了，前端进行验证永远是不牢靠的，须要在后端进行二次验证。前端验证能够提供用户敌对的反馈，但最终的验证应该由后端来实现，避免攻击者绕过前端验证，采纳后端验证能够确保只有通过验证的申请能力被解决。

容错机制

容许用户有肯定的容错空间，即便滑块没有完满对齐，也能够通过验证。这能够缩小误报。容错机制能够通过在验证时容许肯定范畴的误差来实现，可参考示例代码，容错 10 像素 transformX < mockPositionX + 10 && transformX > mockPositionX - 10。

监控

定期监控滑块验证的性能和安全性，依据具体情况进行调整。分析攻击罕用的模式并采取相应的反制措施。继续的监控能够帮忙咱们及时发现和应答新的威逼。

总结

这些计划能够依据具体的需要和威逼模型进行定制。滑块验证作为一种反机器人的工具，也会一直倒退和演进，以适应一直变动的威逼。心愿本文提供的思路和实现步骤可能帮忙大家更好地了解和利用滑块验证技术，喜爱点个关注吧。

退出移动版