html结构层面的防爬虫干扰基本无效。只要内容以明文形式出现在或内联中，就等于直接送给爬虫；结构混淆仅能拦住正则硬匹配，对现代解析器毫无意义。
HTML结构层面的防爬虫干扰是否有效？
基本无效。只要内容以明文形式出现在 或内联 <script></script> 中，就等于直接送给爬虫。结构混淆（比如把 <div class="price">99.9</div> 改成 <span id="a1"><em>9</em><i>9</i><u>.9</u></span>）只能拦住正则硬匹配，对现代解析器（如 BeautifulSoup、Cheerio、Playwright 的 DOM API）毫无意义。
常见错误现象：
- 用随机 class 名 + 多层嵌套 wrapper，以为能“打乱结构”，结果爬虫用 XPath
//span[@id="a1"]//text()一键提取 - 把关键字段藏在注释里：
<!-- price: 99.9 -->，但BeautifulSoup默认解析注释，response.text里直接可见 - 用 CSS display:none 隐藏敏感字段，但源码仍在，
requests.get()拿到的就是完整 HTML
动态内容混淆必须绕过 JS 执行吗？
不绕过 JS 执行，混淆就形同虚设。很多网站用 JS 把加密字符串拼成真实文本（例如 document.getElementById("p").innerText = atob("OTkuOQ==")），但这只是障眼法——Puppeteer、Playwright、甚至带 JS 渲染能力的 Scrapy-Splash 都能等 DOM 渲染完再取值。
真正起作用的混淆，得让爬虫即使执行了 JS，也拿不到干净数据：
- 用 Unicode 同形字替换数字/字母：把
99.9写成全角９９．９，或混入零宽字符（\u200b），OCR 和人工识别都易出错，但需测试字体兼容性 - 字段拆分 + 伪元素拼接：
<span data-val="9"></span><span data-val="9"></span><span data-val="."></span><span data-val="9"></span>，再用::before拼接，getComputedStyle()可读，但基础 XPath 提取失败 - 关键字段由服务端返回加密 token，前端 JS 调用
decrypt(token, key)，而key来自另一接口或计算生成（如时间戳哈希），不硬编码在 JS 中
哪些 HTML 特性容易被误用为“防爬”却实际暴露更多？
<meta name="robots" content="noindex"> 和 robots.txt 是重灾区。它们不阻止请求到达服务器，只影响搜索引擎索引行为。爬虫根本不在乎你写没写这个标签。
典型误用场景：
- 在商品页加
<meta name="robots" content="noindex">，以为价格不会被采集——但爬虫curl https://site.com/product/123照样拿到全部 HTML -
robots.txt写Disallow: /api/，结果日志里全是User-Agent: Mozilla/5.0 (compatible; DataBot/1.0)在高频调用/api/price?id=123 - 用
<picture></picture>+ 多个<source srcset="..."></source>包裹价格图，指望 OCR 失败——但 Tesseract 对等宽字体识别率超 95%，且 Playwright 可截 canvas 后直传 OCR 服务
真正该投入精力的混淆点在哪？
不是藏在 HTML 结构里，而是控制“谁能在什么时候看到什么”。所有混淆手段若脱离服务端校验，都是纸糊的墙。
实操优先级建议：
- 敏感字段（如手机号、订单号）**绝不渲染在初始 HTML 中**，改用带鉴权的
fetch("/api/field?token=xxx")，token 有效期 ≤ 60 秒 - 前端 JS 中禁止出现任何密钥、解密算法常量、API 路径模板（如
const API_BASE = "/v2/"）——这些都会被grep -r扫出来 - 对同一用户，不同请求返回的字段混淆方式应动态变化（比如这次用 Unicode 替换，下次用 CSS 伪元素，再下次用 JS 计算偏移），避免模式固化
- 混淆逻辑本身要轻量：解密函数体积
最易被忽略的一点：混淆后的字段如果还要被用户复制粘贴（比如电话号码），就得考虑全角/零宽字符在 document.execCommand('copy') 或 Clipboard.writeText() 中是否被正确还原——很多混淆方案在这里翻车。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
