简单的一点就是图形或声音验证码来识别,复杂一点就是通过用户鼠标移动的轨迹和时间点数据交给后端ai人工智能来判断是否是真人操作鼠标点击,想cloudflare的5秒盾就是采用这个技术,通过大量真人点击鼠标轨迹数据和机器模拟鼠标轨迹来训练模型,最终模型能够识别哪个是真人操作,哪个是机器所为。
以下是一个基础的示例,展示了如何在一定程度上检测鼠标轨迹:
// 定义一个对象来存储鼠标事件信息 const mouseTrack = { positions: [], // 存储鼠标位置 times: [], // 存储鼠标移动的时间点 isHuman: false // 标志是否为真人操作 }; // 鼠标移动事件监听器 document.addEventListener('mousemove', (e) => { // 存储鼠标位置和当前时间 mouseTrack.positions.push({ x: e.clientX, y: e.clientY }); mouseTrack.times.push(Date.now()); // 可以在这里添加更复杂的判断逻辑,例如分析速度变化、轨迹模式等 }); // 鼠标点击事件监听器 document.addEventListener('click', () => { // 检查鼠标移动的数据,判断是否为真人 if (mouseTrack.positions.length > 0 && mouseTrack.times.length > 0) { // 例如,检查鼠标移动路径的长度 const distance = calculateTotalDistance(mouseTrack.positions); // 检查时间间隔 const timeElapsed = Date.now() - mouseTrack.times[0]; // 设置一些基础的判断条件 if (distance > 100 && timeElapsed > 1000) { // 如果鼠标移动了一定的距离,并且有一定的时间间隔,可能是真人,一般将数据发送给后端ai模型判断,如果验证成功添加tokens令牌到cookie中,以后每次请求都携带token令牌。 mouseTrack.isHuman = true; } } // 清除记录的轨迹数据 mouseTrack.positions = []; mouseTrack.times = []; // 根据判断结果进行相应的处理 if (mouseTrack.isHuman) { console.log('Detected a human visitor!'); } }); // 用于计算鼠标移动总距离的函数 function calculateTotalDistance(positions) { let totalDistance = 0; for (let i = 1; i < positions.length; i++) { const dx = positions[i].x - positions[i - 1].x; const dy = positions[i].y - positions[i - 1].y; totalDistance += Math.sqrt(dx * dx + dy * dy); } return totalDistance; }在这个示例中,我们监听了mousemove和click事件,记录了鼠标移动的位置和时间点。在点击事件中,我们会检查存储的鼠标轨迹数据,并设置了一些简单的条件来估算用户操作是否为真人。这个代码只提供了基本的逻辑,实际应用时可能需要更复杂的分析方法,例如检查鼠标移动的加速度、停顿、方向变化等,以便更真实地模仿人类用户的行为模式,并据此进行判断。
网友回复