HTML 中直接写死的内容（如文本、数字、URL）会被爬虫秒抓，无需执行 JS；curl + BeautifulSoup 或正则即可批量提取邮箱、价格等敏感信息。
直接写死在 HTML 里的内容，爬虫三秒就抓完
只要文本、数字、URL 出现在 <body> 或 <script> 标签内（包括内联 JSON、data- 属性、HTML 注释），就等于白送给爬虫。用 curl + BeautifulSoup 或正则就能批量提取邮箱、价格、商品 ID、API 路径——根本不需要执行 JS。
常见错误现象：
- 把订单号写成
<span id="order-id">20260613ABC123</span>，结果被re.findall(r'order-id.*?>(\w+) 一键扫光 - 在
<script>里塞const API_BASE = "https://api.example.com"，爬虫grep -r "api/" dist/直接定位接口 - 用
display: none隐藏电话号码，但document.querySelectorAll('[style*="none"]')仍能拿到 DOM
CSS 伪元素拼接只防正则，不防 getComputedStyle()
用 ::before 和 ::after 把数字拆开渲染（比如把 13812345678 拆成 138 + 123 + 45678），确实能绕过基础正则匹配，但对真爬虫无效。
使用场景有限：
立即学习“前端免费学习笔记（深入）”；
- 适合对抗低配爬虫或 SEO 爬取（搜索引擎不解析伪元素内容）
- 不能用于敏感字段如用户 ID、token、手机号——
window.getComputedStyle(el, '::before').content可直接还原 - 全角数字、Unicode 同形字（如
１２３）需测试字体兼容性，部分终端粘贴后变乱码
JS 动态加载不是保险箱，反而暴露更多线索
把价格、列表数据改用 fetch('/api/product?id=123') 加载，看似安全，实则把请求路径、参数结构、甚至鉴权方式全摊在 JS 源码里。
容易踩的坑：
-
fetch的 URL 若含固定路径（如/api/v1/orders），会被静态扫描工具直接发现 - 密钥、token 写在 JS 里（哪怕 base64 编码）＝公开广播；现代反编译工具几秒就能还原
- 没做 Referer / User-Agent 校验的服务端接口，Puppeteer 直接模拟登录后就能复用 session cookie 批量调用
- 前端拼接的完整下载链接（如
`/export?token=${token}&id=${id}`）会被爬虫截获并重放
真正有效的防线只有一条：服务端校验 + 动态生成
HTML 结构混淆、JS 加密、CSS 隐藏，全是障眼法。爬虫能拿到你所有前端代码，但拿不到数据库查询条件、风控规则、用户会话上下文。
关键实操点：
- 敏感字段（如
user_id）不在响应体中明文返回，改用短期 token（如u_abc123_xxx），服务端解密后查库 - 接口必须校验
Authorizationheader 或有效 session cookie，拒绝无 referer、高频、低停留的请求 - 导出类操作走服务端生成一次性链接（
/download/<uuid></uuid>），链接 5 分钟失效且仅限单次访问 - robots.txt 仅用于屏蔽搜索引擎，别写
Disallow: /api/——这等于告诉攻击者“这里有钱”
复杂点在于：你得接受“前端永远不可信”，所有判断逻辑必须落在服务端。混淆只是提高采集成本，不是设防。
