表单防爬需融合CSS隐藏蜜罐、动态混淆action与按钮、删除autocomplete="off"改用语义值、CSRF token结构变异及严格服务端校验，单一前端手段无效。
表单字段如何用隐藏陷阱干扰爬虫自动填充
直接把 input 设为 display: none 或 visibility: hidden 是常见但低效的做法——现代爬虫（如 Playwright）能识别并跳过这类元素，甚至主动触发其事件。真正有效的蜜罐是让字段“看起来合法但行为异常”。
- 添加一个
type="text"字段，name命名为email或phone，但用 CSS 覆盖其位置（如position: absolute; left: -9999px;），同时监听input事件：一旦有值写入，立即封禁该 IP 或返回错误响应 - 在表单中插入带
required属性的虚假字段，但通过 JS 动态移除其required—— 爬虫静态解析时会认为必填，而真实用户因 JS 执行后无此约束，可正常提交 - 避免使用
aria-hidden="true"或tabindex="-1"单独标记，这些容易被规则引擎过滤；要组合 DOM 位置、样式、JS 控制三者，形成“人能绕过、机器难统一处理”的差异
form action 和 submit 按钮的动态混淆策略
action 地址硬编码在 HTML 中等于给爬虫递钥匙。同样，submit 按钮若只靠 type="submit" 触发，极易被自动化脚本定位和点击。
- 不要在
<form>标签里写死action，改用 JS 在提交前动态拼接 URL，且拼接逻辑包含时间戳、随机 salt、或从上个页面 hidden input 中读取的 token - 把真正触发提交的逻辑绑定在非
button[type="submit"]元素上，比如一个<div class="submit-btn">，用addEventListener('click', ...)控制；同时移除所有form的默认提交行为（event.preventDefault()） - 对按钮文本做 Unicode 同形字替换（例如用全角冒号「：」代替英文冒号「:」），不破坏渲染，但会让基于 OCR 或固定字符串匹配的爬虫漏判
为什么用 autocomplete="off" 反而暴露了表单敏感性
这个属性本意是禁用浏览器自动填充，但实际成了爬虫识别“这是登录/支付类高价值表单”的强信号。Google Chrome 早在 2023 年就明确忽略该属性对 password 字段的控制，而爬虫工具会优先扫描含该属性的页面。
- 删掉
autocomplete="off"，改用语义化值如autocomplete="new-password"（注册页）或autocomplete="one-time-code"（验证码），既满足规范又降低关键词命中率 - 对真正需要防自动填充的字段（如银行卡号），用
inputmode="numeric"+pattern="[0-9]*"替代，不显式声明用途，但限制输入行为 - 服务端必须校验：哪怕前端做了所有混淆，只要
POST请求体里出现card_number=123456789这种字段名，就该拒绝——字段名本身不能成为信任依据
CSRF token 与表单结构变异的协同设计
单独放一个 <input type="hidden" name="csrf_token" value="xxx"> 已成爬虫识别入口的固定模式。更有效的是把 token 融进结构本身，而非作为附加字段。
立即学习“前端免费学习笔记（深入）”；
- 每次渲染表单时，随机变更
name属性名（如本次是_t_8a2f，下次是_token_zx91），服务端通过 session 关联映射，不依赖固定 key - 把 token 拆成两部分：一部分放在
data-属性里（如<form data-t1="abc">），另一部分放在 JS 变量中，提交前由前端拼接；爬虫若只解析 HTML，拿不到完整值 - 禁止在 JS 文件里明文写 token 生成逻辑，尤其避免
Math.random().toString(36)这类可复现方式；token 应由服务端生成并注入到页面上下文（如window.__CSRF = "..."），且设置__CSRF为不可枚举属性
