简单分享一下前端如何防爬虫

岛风风
8 阅读17分钟

前端防爬虫：当然你要做SEO，也还是要看hh

在数据驱动的时代，网站数据既是核心资产，也成为爬虫攻击的主要目标。据统计，头部互联网企业日均拦截爬虫请求量占总请求量的 35% 以上，恶意爬虫不仅会消耗服务器资源、拖慢页面响应速度，还可能导致核心数据泄露，给企业带来巨大损失。作为用户请求的 “第一道关卡”，前端防爬虫虽然不能完全杜绝攻击，但能有效提高爬虫门槛、过滤低质量爬虫，为后端防护争取宝贵时间。本文将从基础手段到进阶技术，全面解析前端防爬虫的实现思路与最佳实践。

一、前端防爬虫的核心逻辑：识别 “人机差异”

爬虫与正常用户的本质区别在于行为模式和环境特征：正常用户通过浏览器交互，行为具有随机性和连续性；而爬虫通常由程序控制，请求规律固定、缺乏 “人类行为特征”。前端防爬虫的核心逻辑，就是通过技术手段捕捉这些差异，对可疑请求进行拦截或限制。

从防护强度来看，前端防爬虫可分为三个层级：

  • 基础层：通过简单验证（如验证码、UA 检测）过滤初级爬虫；
  • 进阶层：通过动态渲染、参数加密、行为分析等手段对抗中高级爬虫；
  • 协同层：与后端配合，通过 Token 验证、IP 黑名单、请求频率限制等形成 “前后端联防”。

以下将逐层拆解具体实现方案，结合代码示例与应用场景，帮助开发者快速落地。

二、基础防护：快速过滤低质量爬虫

基础防护手段的特点是实现简单、性能消耗低，适合作为网站的 “第一道防线”，主要针对无差别爬取的初级爬虫（如基于requests库的简单脚本）。

1. User-Agent（UA）验证：识别请求来源

UA 是浏览器（或爬虫）向服务器发送请求时携带的 “身份标识”，正常浏览器的 UA 包含浏览器版本、操作系统等信息（如Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36），而初级爬虫往往使用默认 UA（如python-requests/2.31.0）或空白 UA。

实现方案：

  • 前端在发送请求前校验 UA 格式，若不符合常见浏览器 UA 规则，直接阻止请求；
  • 后端配合校验，将异常 UA 加入临时黑名单，限制后续请求。
// 前端UA验证示例
function checkUA() {
  const userAgent = navigator.userAgent;
  // 匹配主流浏览器UA特征（Chrome、Firefox、Safari、Edge）
  const validUA = /(Chrome|Firefox|Safari|Edge)/\d+/.test(userAgent);
  if (!validUA) {
    // 记录异常日志并跳转“验证页面”
    console.warn("异常UA请求:", userAgent);
    window.location.href = "/verify.html"; // 引导进行人机验证
    return false;
  }
  return true;
}
// 发起请求前触发验证
if (checkUA()) {
  fetch("/api/data", { headers: { "User-Agent": navigator.userAgent } });
}

注意事项：UA 可通过爬虫脚本伪造（如requests.get(url, headers={"User-Agent": "Chrome/118.0.0.0"})），因此需配合其他手段使用，不可作为唯一验证依据。

2. 验证码：强制人机交互

验证码通过 “人类易识别、机器难破解” 的任务（如识别图形、拖动滑块），强制验证请求发起者是否为人类，是拦截自动化爬虫的有效手段。

主流验证码类型及前端实现：

  • 图形验证码：前端请求后端生成带干扰线、扭曲文字的图片，用户输入正确内容后才允许继续操作；
  • 滑块验证码：通过canvas绘制滑块与背景图，监听用户拖动行为（如速度、轨迹），判断是否为机器操作；
  • 无感验证：基于用户行为（如鼠标移动轨迹、页面停留时间）自动完成验证，无需用户手动操作，体验更优。

最佳实践：

  • 避免使用简单的 “文字识别” 验证码（易被 OCR 破解），优先选择滑块、点选等交互型验证码；
  • 验证码需定期刷新，且每次请求的验证码内容不重复；
  • 对连续验证失败的 IP，限制验证码获取频率（如 1 分钟内最多尝试 3 次）。

3. Cookie 与 Session 验证：追踪用户状态

正常用户访问网站时，浏览器会自动携带 Cookie（包含 SessionID 等信息），而部分爬虫会忽略 Cookie 或使用无效 Cookie。通过验证 Cookie 的有效性，可过滤未经过正常页面跳转的爬虫请求。

实现方案：

  1. 用户访问首页时，后端生成带有加密信息的 Cookie（如sessionId=xxx），并返回给前端；
  1. 前端发起业务请求（如获取列表数据）时，自动携带该 Cookie；
  1. 后端校验 Cookie 的有效性（如是否存在、是否过期、是否与 Session 匹配），无效则拒绝响应。
// 前端无需额外代码（浏览器自动携带Cookie），但需确保请求不屏蔽Cookie
fetch("/api/data", {
  credentials: "include" // 关键：允许跨域请求携带Cookie（若存在跨域场景）
});

进阶优化：前端可通过document.cookie读取特定 Cookie 字段，若不存在则主动跳转到首页（强制触发 Cookie 生成），避免直接访问接口。

三、进阶防护：对抗中高级爬虫

中高级爬虫（如基于Puppeteer、Selenium的自动化工具）能模拟浏览器环境、伪造 UA、通过简单验证码，仅靠基础防护难以拦截。此时需要通过动态化、加密化、行为分析等手段，增加爬虫的破解成本。

1. 前端参数加密：让请求 “不可读”

爬虫的核心目标是解析请求参数和响应数据，若前端对关键参数（如请求 ID、时间戳、用户 ID）进行加密，可使爬虫无法直接构造有效请求。

加密思路：

  • 选择非对称加密（如 RSA）或对称加密（如 AES）算法，对参数进行加密；
  • 加密密钥通过动态方式生成（如从后端接口获取，且定期更换），避免硬编码在前端代码中；
  • 请求时携带加密后的参数，后端解密后再处理业务逻辑。

AES 加密参数示例（使用crypto-js库）：

<!-- 引入加密库 -->
<script src="https://cdn.jsdelivr.net/npm/crypto-js@4.2.0/crypto-js.min.js"></script>
<script>
// 1. 从后端获取动态密钥（每次页面加载时请求，避免硬编码）
let aesKey = "";
fetch("/api/getKey")
  .then(res => res.text())
  .then(key => {
    aesKey = key; // 假设后端返回AES密钥（实际项目中需对密钥传输进行加密）
  });
// 2. AES加密函数
function encryptParams(params) {
  const jsonParams = JSON.stringify(params);
  // 加密（ECB模式，PKCS7填充）
  const encrypted = CryptoJS.AES.encrypt(
    jsonParams,
    CryptoJS.enc.Utf8.parse(aesKey),
    { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 }
  );
  return encrypted.toString(); // 返回Base64格式的加密字符串
}
// 3. 发起请求时加密参数
function fetchData() {
  const rawParams = {
    page: 1,
    limit: 20,
    timestamp: Date.now(), // 加入时间戳，避免请求缓存和重复提交
    userId: "123456"
  };
  const encryptedParams = encryptParams(rawParams);
  
  fetch("/api/list", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ data: encryptedParams }) // 仅传递加密后的参数
  })
  .then(res => res.json())
  .then(encryptedRes => {
    // 解密响应数据（若响应也加密）
    const decryptedRes = CryptoJS.AES.decrypt(
      encryptedRes.data,
      CryptoJS.enc.Utf8.parse(aesKey),
      { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 }
    ).toString(CryptoJS.enc.Utf8);
    const resData = JSON.parse(decryptedRes);
    console.log("业务数据:", resData);
  });
}
</script>

关键注意事项：

  • 密钥不可硬编码在前端代码中（易被爬虫通过 “查看源码” 获取），需通过后端接口动态返回，且每次请求的密钥可不同；
  • 加密算法可定期升级（如从 AES-128 改为 AES-256），增加爬虫破解难度；
  • 除参数加密外，可对请求头中的关键字段（如Referer、X-Requested-With）进行校验，防止爬虫伪造请求来源。

2. 动态渲染：让数据 “不可爬”

传统爬虫通过解析 HTML 源码即可获取数据，而动态渲染通过JavaScript 在客户端生成 DOM（如 Vue、React 的客户端渲染），使爬虫无法直接从静态 HTML 中提取数据。若爬虫未执行页面 JS，将只能获取到空的 “壳页面”。

实现方案：

  • 核心数据通过 AJAX/axios 异步请求获取，且请求参数需加密（如上文所述）；
  • 使用v-if、v-for等指令动态生成页面内容，避免数据写死在 HTML 中；
  • 对关键 DOM 元素（如数据列表），通过 JS 动态添加class或id，避免固定选择器被爬虫识别。

进阶技巧：

  • 结合 “服务端渲染（SSR）+ 客户端 hydration”，既保证首屏加载速度（利于 SEO），又实现数据动态渲染；
  • 对敏感数据（如价格、联系方式），通过canvas绘制在页面上（而非直接写在 DOM 中），使爬虫无法通过解析 DOM 获取。

3. 行为分析：识别 “机器行为”

正常用户的行为具有随机性（如鼠标移动、页面滚动、点击间隔），而爬虫的行为往往是 “机械性” 的（如瞬间完成点击、无滚动直接请求数据）。通过前端埋点收集用户行为数据，分析行为特征，可精准识别爬虫。​

核心分析维度：​

  • 鼠标 / 触摸行为：是否有连续的鼠标移动轨迹（而非瞬间跳转）、点击位置是否在合理区域（如按钮中心 vs 页面边缘）；​
  • 页面交互：是否有页面滚动（如滚动到页面底部才加载更多数据）、是否触发了mouseover等 hover 事件；​
  • 时间特征：页面停留时间是否过短（如小于 2 秒即发起核心请求）、请求间隔是否完全一致（如固定 1 秒发起一次请求）。

实现方案：通过前端埋点收集用户行为数据，对关键行为特征进行量化分析，生成 “人机评分”，评分低于阈值时触发二次验证（如验证码）。

行为数据收集与验证示例：

// 1. 收集行为数据
const behaviorData = {
  mouseTrajectory: [], // 鼠标轨迹坐标
  scrollDepth: 0, // 页面滚动深度（0-100%）
  clickCount: 0, // 点击次数
  stayTime: 0, // 页面停留时间（秒）
  requestDelay: 0 // 页面加载到发起请求的间隔（秒）
};
// 监听鼠标移动，收集轨迹
document.addEventListener('mousemove', (e) => {
  // 限制收集频率（每100ms收集一次，避免性能消耗）
  if (!behaviorData.lastMouseTime || Date.now() - behaviorData.lastMouseTime > 100) {
    behaviorData.mouseTrajectory.push({
      x: e.clientX,
      y: e.clientY,
      time: Date.now()
    });
    behaviorData.lastMouseTime = Date.now();
  }
});
// 监听页面滚动，记录最大滚动深度
window.addEventListener('scroll', () => {
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  const windowHeight = window.innerHeight;
  const documentHeight = document.documentElement.scrollHeight;
  const depth = Math.round((scrollTop / (documentHeight - windowHeight)) * 100);
  behaviorData.scrollDepth = Math.max(behaviorData.scrollDepth, depth);
});
// 监听页面点击
document.addEventListener('click', () => {
  behaviorData.clickCount++;
});
// 记录页面停留时间（页面加载完成时开始计时）
let startTime = Date.now();
window.addEventListener('beforeunload', () => {
  behaviorData.stayTime = Math.round((Date.now() - startTime) / 1000);
});
// 2. 行为数据验证（发起核心请求前执行）
function verifyBehavior() {
  let score = 100; // 初始满分100分
  const now = Date.now();
  behaviorData.requestDelay = Math.round((now - startTime) / 1000);
  // 规则1：页面停留时间过短（<2秒），扣30分
  if (behaviorData.requestDelay < 2) score -= 30;
  // 规则2：未滚动页面（滚动深度<10%），扣20分
  if (behaviorData.scrollDepth < 10) score -= 20;
  // 规则3：鼠标轨迹过短（<5个坐标点），扣25分
  if (behaviorData.mouseTrajectory.length < 5) score -= 25;
  // 规则4：无任何点击（点击次数=0），扣15分
  if (behaviorData.clickCount === 0) score -= 15;
  // 规则5：鼠标轨迹为直线（无波动），扣10分
  if (isStraightTrajectory(behaviorData.mouseTrajectory)) score -= 10;
  console.log("人机评分:", score);
  // 评分低于60分，触发二次验证
  return score >= 60;
}
// 辅助函数：判断鼠标轨迹是否为直线
function isStraightTrajectory(trajectory) {
  if (trajectory.length < 3) return false;
  // 计算轨迹的x、y坐标波动值
  const xValues = trajectory.map(p => p.x);
  const yValues = trajectory.map(p => p.y);
  const xDiff = Math.max(...xValues) - Math.min(...xValues);
  const yDiff = Math.max(...yValues) - Math.min(...yValues);
  // 波动值过小，判定为直线轨迹（机器行为）
  return xDiff < 10 && yDiff < 10;
}
// 发起核心请求前执行行为验证
async function fetchCoreData() {
  if (!verifyBehavior()) {
    // 触发滑块验证码二次验证
    const isVerified = await showSliderCaptcha();
    if (!isVerified) {
      alert("验证失败，无法获取数据");
      return;
    }
  }
  // 验证通过，发起请求（参数已加密）
  const encryptedParams = encryptParams({ action: "getCoreData" });
  const res = await fetch("/api/core", {
    method: "POST",
    body: JSON.stringify({ data: encryptedParams })
  });
  const data = await decryptResponse(res);
  console.log("核心数据:", data);
}

最佳实践：

  • 行为规则需结合业务场景调整（如资讯类网站可放宽 “点击次数” 要求，电商类网站需严格校验 “商品点击 - 加购” 的连续行为）；
  • 避免过度校验影响正常用户体验（如对移动端用户，需适配触摸行为，而非仅依赖鼠标轨迹）；
  • 行为数据可通过 “前端预处理 + 后端二次分析” 结合，前端快速过滤明显机器行为，后端通过大数据模型优化识别精度。

四、协同层防护：前后端联防筑牢防线

前端防护存在天然局限性（如代码可被破解、逻辑可被模拟），必须与后端配合形成 “联防体系”，才能最大化防护效果。核心思路是前端负责 “初步筛选”，后端负责 “精准拦截” ，通过数据互通实现全方位防护。

1. Token 动态验证：防止请求伪造

基于 “前端生成临时 Token + 后端校验有效性” 的逻辑，确保请求来自经过正常流程的前端页面，而非爬虫直接构造。

实现流程：

  1. 页面加载时，前端通过随机算法（如 UUID）生成临时 Token（tempToken），并存储在内存中（避免 localStorage 被爬虫读取）；
  1. 前端发起请求时，将 tempToken 与加密后的业务参数一同发送给后端；
  1. 后端接收请求后，先校验 tempToken 是否存在于 “有效 Token 池”（前端需提前通过无敏感信息的接口将 tempToken 上报给后端）；
  1. 校验通过后，再解密业务参数并处理逻辑；校验失败则直接返回 403 错误。

代码示例：

// 前端生成并上报临时Token
const tempToken = uuidv4(); // 使用uuid库生成唯一Token
// 上报Token（无敏感信息，可公开接口）
fetch("/api/reportToken", {
  method: "POST",
  body: JSON.stringify({ tempToken, timestamp: Date.now() })
});
// 发起业务请求时携带Token
function fetchWithToken(params) {
  const encryptedParams = encryptParams(params);
  fetch("/api/business", {
    method: "POST",
    headers: { "X-Temp-Token": tempToken }, // 放在请求头中
    body: JSON.stringify({ data: encryptedParams })
  })
  .then(res => {
    if (res.status === 403) {
      alert("请求无效，请刷新页面重试");
      window.location.reload(); // 重新生成Token
    }
    return res.json();
  });
}

后端核心逻辑（以 Node.js 为例）：

// 后端维护有效Token池（可使用Redis，设置10分钟过期时间）
const redis = require("redis");
const client = redis.createClient();
// 1. 接收前端上报的Token并存储
app.post("/api/reportToken", async (req, res) => {
  const { tempToken, timestamp } = req.body;
  // 校验时间戳（防止过期Token被复用，误差允许±30秒）
  if (Math.abs(Date.now() - timestamp) > 30 * 1000) {
    return res.sendStatus(400);
  }
  // 存储Token，设置10分钟过期
  await client.setEx(`token:${tempToken}`, 600, "valid");
  res.sendStatus(200);
});
// 2. 业务接口校验Token
app.post("/api/business", async (req, res) => {
  const tempToken = req.headers["x-temp-token"];
  // 校验Token是否存在
  const isTokenValid = await client.exists(`token:${tempToken}`);
  if (!isTokenValid) {
    return res.sendStatus(403);
  }
  // Token校验通过，解密参数并处理业务
  const { data } = req.body;
  const decryptedParams = decrypt(data); // 后端解密逻辑
  const result = await handleBusiness(decryptedParams);
  res.json({ result });
});

2. IP 黑名单与频率限制：拦截恶意请求

针对爬虫常用的 “高频请求”“固定 IP 批量爬取” 等特征，后端通过 IP 维度的限制，从源头拦截恶意行为。

核心手段：

  • 频率限制：使用 Redis 记录每个 IP 的请求次数，如 “1 分钟内最多允许 60 次请求”，超过则临时封禁（如 10 分钟）；
  • 黑名单机制：对连续触发频率限制、多次验证失败的 IP，加入长期黑名单（如 24 小时），并记录日志用于后续分析；
  • 动态阈值：基于用户等级调整限制（如登录用户可放宽至 1 分钟 100 次请求，未登录用户限制为 30 次）。

后端频率限制示例（Node.js + Express）：

// 频率限制中间件
function rateLimitMiddleware(req, res, next) {
  const ip = req.ip; // 获取请求IP
  const key = `rate:${ip}`;
  
  client.incr(key, (err, count) => {
    if (err) return next(err);
    // 第一次请求，设置1分钟过期
    if (count === 1) {
      client.expire(key, 60);
    }
    // 1分钟内超过60次请求，返回429（Too Many Requests）
    if (count > 60) {
      return res.status(429).json({ message: "请求过于频繁，请稍后重试" });
    }
    next();
  });
}
// 应用到所有业务接口
app.use("/api/*", rateLimitMiddleware);

3. 日志分析与异常监控：主动发现风险

通过前后端联动记录请求日志，结合监控系统实时分析异常行为，实现 “被动防御” 到 “主动预警” 的转变。

日志收集维度：

  • 前端：记录异常 UA、验证失败次数、行为评分低于阈值的请求，并通过埋点接口上报；
  • 后端：记录请求 IP、请求频率、Token 校验失败、参数解密失败等日志，标记 “可疑请求”。

监控与预警：

  • 使用 ELK（Elasticsearch + Logstash + Kibana）或 Grafana 搭建日志分析平台，可视化展示请求趋势；
  • 设置预警规则（如 “某 IP 10 分钟内验证失败超过 10 次”“某接口参数解密失败率突增 50%”），触发时通过邮件、短信通知运维人员；
  • 定期分析日志，提炼新的爬虫特征（如新型 UA、异常请求头），迭代防护策略。

五、攻防对抗与策略迭代：持续升级防护能力

爬虫技术与反爬技术始终处于 “道高一尺，魔高一丈” 的对抗中，不存在 “一劳永逸” 的防护方案。需通过定期迭代、动态调整，持续提高爬虫的破解成本。

1. 常见爬虫绕过手段与应对

爬虫绕过手段应对策略
伪造 UA、Cookie、请求头前端增加请求头字段动态生成（如基于时间戳生成X-Sign），后端校验字段合法性
使用 Puppeteer 模拟浏览器前端检测navigator.webdriver（爬虫默认开启，正常浏览器为false），后端分析页面渲染时间（爬虫渲染耗时通常更长）
破解前端加密算法定期更换加密算法（如从 AES 改为 SM4 国密算法），密钥通过 “多接口分段获取”（如先请求接口 A 获取密钥前半段，再请求接口 B 获取后半段）
批量 IP 代理绕过频率限制结合用户行为（如设备指纹、登录状态）多维度限制，而非仅依赖 IP；使用 IP 代理库识别代理 IP 并加重限制

检测 Puppeteer 示例：

// 前端检测是否为自动化工具环境
function isAutomatedEnv() {
  // 1. 检测webdriver标志（Puppeteer默认开启）
  if (navigator.webdriver) return true;
  // 2. 检测浏览器特征（自动化环境中部分API行为异常）
  const isHeadless = /HeadlessChrome/.test(navigator.userAgent);
  // 3. 检测窗口大小（爬虫常使用默认固定尺寸）
  const isFixedSize = window.innerWidth === 800 && window.innerHeight === 600;
  return isHeadless || isFixedSize;
}
if (isAutomatedEnv()) {
  // 返回虚假数据或引导至无效页面
  console.warn("检测到自动化环境，拒绝提供服务");
  window.location.href = "/empty.html";
}

2. 防护策略迭代原则

  • 最小影响原则：迭代时优先选择对用户体验影响小的方案（如后台升级加密算法，而非增加验证码步骤）；
  • 灰度发布原则：新防护策略先在小比例用户（如 10%）中测试，观察是否出现误拦截、性能问题，再全面推广；
  • 成本平衡原则：避免过度防护（如为拦截低频爬虫投入大量研发资源），根据数据价值制定防护等级（核心数据如用户信息、交易数据需最高等级防护，公开资讯可适当放宽）。

六、总结与展望

前端防爬虫的核心目标不是 “完全杜绝爬虫”，而是通过合理的技术手段，让爬虫的破解成本高于其获取数据的价值。从基础的 UA 验证、验证码，到进阶的参数加密、行为分析，再到前后端协同的 Token 验证、频率限制，每一层防护都在为网站数据安全增加 “护城河”。

现在， AI 的发展实在是太快了，各类爬虫不仅仅只是简单的OCR识别，甚至还可以诸如通过模拟人类行为轨迹，来欺骗我们的反爬手段，反爬技术也需向 “智能化” 升级：

  • 前端可引入轻量级 AI 模型（如 TensorFlow.js），实时分析用户行为特征，提高人机识别精度；
  • 后端结合大数据与机器学习，构建动态防护模型（如根据爬虫攻击趋势自动调整频率限制阈值、更新加密算法）；
  • 跨端协同防护（如结合 App 端设备指纹、小程序端开放平台接口），形成多场景一体化的反爬体系。

最后，需牢记 “防护与体验的平衡”—— 过度复杂的验证会让正常用户却步，合理的防护策略应是 “隐形的盾牌”，在不影响用户体验的前提下，默默守护网站的核心资产。

avatar
文章
阅读
粉丝