双 11 秒杀按钮的动态状态机防护：防范自动化脚本篡改 DOM 触发已禁用的提交事件-育师

双 11 倒计时最后三秒，秒杀按钮往往还处于倒计时的“置灰禁用”状态。但对于熟悉前端机制的黑产外挂或者羊毛党脚本来说，这种纯 UI 层的拦截几乎形同虚设。

黑产常用的油猴脚本或自动化插件，最经典的一招就是打开控制台执行：

const btn = document.querySelector('#buy-now-btn'); btn.disabled = false; btn.classList.remove('btn-disabled'); btn.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));

如果在代码实现里，开发者仅仅依赖 DOM 上的btn.disabled属性或者全局暴露的window.isSeckillActive变量来判断是否允许发券下单，那么外挂就能在零点到达前的 200 毫秒提前偷跑请求，甚至在点击处于冷却中时通过狂发dispatchEvent实施短时间千次并发轰炸。

要彻底终结这种篡改漏洞，必须在前端实现DOM 与状态机的绝对物理隔离：DOM 只作为纯粹的只读展示投影，核心提交权由闭包隔离的**不可逆动态状态机（Dynamic FSM）**接管，并配合MutationObserver反篡改哨兵与event.isTrusted物理行为鉴权。

攻击面剖析与防御漏洞

很多前端团队的防刷逻辑存在三大典型漏洞：

依赖 DOM 状态作为业务判断依据：代码里写着if (btn.hasAttribute('disabled')) return;。攻击者在 DevTools 里双击直接删掉disabled属性，校验当场告破。
忽视合成事件欺骗（Synthetic Events）：JavaScript 的dispatchEvent()允许任意构造模拟事件。如果接口不校验event.isTrusted标志，脚本可以轻松伪造物理点击。
状态机无并发锁死：异步请求发出后，若按钮未进入物理死锁状态，微秒级的并发点击可能瞬间穿透未更新的布尔值标志，造成重复提交。

针对这三大脆弱裂隙，我们在前端建立起了一条双轨并行、层层设伏的防御纵深：
当黑产脚本试图通过 DevTools 控制台强行篡改 DOM 属性时，底层的MutationObserver哨兵会即刻捕获这一非法异动，瞬间引爆自毁降级并将指纹标记推入蜜罐；面对模拟点击，事件守卫则死死守住isTrusted原生标记与生物微动作特征，静默丢弃一切人造合成事件。只有完全通过物理层校验的真实交互，才能叩响闭包深处私有状态机的大门——状态机在原子操作中判定当前是否为READY，若是则毫秒级翻转至COMMITTING锁死状态，并随单次时间戳防重放签名一同推向核心交易网关，拒止任何并发重入。

核心架构设计：三位一体防护网

闭包隔离状态机（Isolated FSM）：状态机的状态枚举只保存在 TypeScript 编译后的模块私有作用域或WeakMap中，外部控制台无法通过任何window属性或 DOM 节点实例访问到。
DOM 篡改哨兵（DOM Tripwire）：使用原生的MutationObserver严密监控按钮节点的disabled、style、class以及父级容器。只要检测到未经状态机授权的 DOM 属性变更，立即断定环境遭到非法篡改，进入熔断蜜罐模式。
真实用户物理动作校验（Biometric Validation）：严格检查event.isTrusted === true；同时记录pointerdown到pointerup的时间差。真实人类点击屏幕的接触时长通常在 50ms 到 220ms 之间，而脚本模拟通常是 0ms 或固定常数，直接予以剔除。

完整实操代码：SecKillButtonProtector

下面是可直接投入大促秒杀生产环境的防护器实现：

export type SeckillState = 'STANDBY' | 'READY' | 'COMMITTING' | 'COOLDOWN' | 'COMPROMISED'; export interface ClickBiometrics { downTimestamp: number; upTimestamp: number; screenX: number; screenY: number; } export class SeckillButtonProtector { private buttonEl: HTMLButtonElement; private currentState: SeckillState = 'STANDBY'; private observer: MutationObserver | null = null; private isInternalDOMMutation = false; // 物理动作生物特征暂存 private lastBiometrics: ClickBiometrics | null = null; private readonly cooldownDurationMs = 1500; // 冷却锁定 1.5 秒 constructor(buttonElement: HTMLButtonElement) { this.buttonEl = buttonElement; this.initMutationTripwire(); this.bindPhysicalEvents(); this.syncDOMView(); } /** * 启动 DOM 属性反篡改哨兵 */ private initMutationTripwire(): void { this.observer = new MutationObserver((mutations) => { // 若变更是由我们自身状态机发起的，合法放行 if (this.isInternalDOMMutation) return; for (const mutation of mutations) { if ( mutation.type === 'attributes' && ['disabled', 'class', 'style'].includes(mutation.attributeName || '') ) { console.warn('检测到未授权的 DOM 节点强制篡改，触发自毁与安全熔断'); this.currentState = 'COMPROMISED'; this.destroyAndRouteToHoneypot(); break; } } }); this.observer.observe(this.buttonEl, { attributes: true, attributeFilter: ['disabled', 'class', 'style'] }); } /** * 内部同步 DOM 状态，修改前设置内部标志避免被哨兵误杀 */ private syncDOMView(): void { this.isInternalDOMMutation = true; try { if (this.currentState === 'READY') { this.buttonEl.removeAttribute('disabled'); this.buttonEl.classList.remove('btn-locked'); this.buttonEl.innerText = '立即秒杀'; } else { this.buttonEl.setAttribute('disabled', 'true'); this.buttonEl.classList.add('btn-locked'); if (this.currentState === 'STANDBY') this.buttonEl.innerText = '倒计时中...'; if (this.currentState === 'COMMITTING') this.buttonEl.innerText = '抢购中...'; if (this.currentState === 'COOLDOWN') this.buttonEl.innerText = '请稍候...'; } } finally { // 异步重置标志，确保覆盖微任务中的属性回执 queueMicrotask(() => { this.isInternalDOMMutation = false; }); } } /** * 绑定物理点击生物特征提取 */ private bindPhysicalEvents(): void { this.buttonEl.addEventListener('pointerdown', (e: PointerEvent) => { // 严禁合成事件 if (!e.isTrusted) return; this.lastBiometrics = { downTimestamp: performance.now(), upTimestamp: 0, screenX: e.screenX, screenY: e.screenY }; }); this.buttonEl.addEventListener('pointerup', (e: PointerEvent) => { if (!e.isTrusted || !this.lastBiometrics) return; this.lastBiometrics.upTimestamp = performance.now(); }); } /** * 由外部受信任的高精度时钟服务激活秒杀（例如经过时间同步的毫秒定时器到达零点） */ public activateReadyState(): void { if (this.currentState === 'STANDBY') { this.currentState = 'READY'; this.syncDOMView(); } } /** * 真正的点击拦截与提交核心卫语句 */ public async executeSubmit( e: MouseEvent, onSubmitAction: () => Promise<void> ): Promise<boolean> { // 1. 拦截自动化脚本合成事件 if (!e.isTrusted) { console.warn('拦截非真实物理设备触发的合成事件 (isTrusted === false)'); return false; } // 2. 检查物理微动作接触时长（防脚本无触控时长点按） if (this.lastBiometrics) { const pressDuration = this.lastBiometrics.upTimestamp - this.lastBiometrics.downTimestamp; if (pressDuration < 12) { console.warn(`异常高频物理点按，持续时间过短 (${pressDuration.toFixed(1)}ms)，疑似模拟器外挂`); return false; } } // 3. 严格核验内部闭包状态机 if (this.currentState !== 'READY') { console.warn(`当前状态机锁定 (${this.currentState})，拒绝处理提交`); return false; } // 4. 原子锁定状态，绝不允许二次并发穿透 this.currentState = 'COMMITTING'; this.syncDOMView(); try { await onSubmitAction(); return true; } finally { // 进入防连击平滑冷却状态 this.currentState = 'COOLDOWN'; this.syncDOMView(); window.setTimeout(() => { if (this.currentState === 'COOLDOWN') { this.currentState = 'READY'; this.syncDOMView(); } }, this.cooldownDurationMs); } } private destroyAndRouteToHoneypot(): void { this.observer?.disconnect(); // 篡改发生时，将按钮彻底破坏或替换为蜜罐陷阱 this.buttonEl.onclick = () => { fetch('/api/security/honeypot/report', { method: 'POST' }); }; this.buttonEl.disabled = true; this.buttonEl.innerText = '系统异常，已风控'; } }

蜜罐引流与自愈反制

当MutationObserver捕获到恶意脚本暴力删除disabled时，系统不直接弹窗揭穿，而是进入“静默对抗”：

立即将按钮后续触发的所有网络请求重定向至风控蜜罐路由（Honeypot Endpoint），该接口返回格式完全仿真的“排队中，请等待”伪造报文，诱使黑产脚本持续空转挂起；
在前端本地生成一个不可清除的受污染标记，后续关键下单链路强制要求弹出滑块或短信人机验证；
将篡改行为的上下文栈（Stack Trace）与当前页面 DOM 快照打包压缩，通过navigator.sendBeacon悄悄上报给安全团队作为黑产特征沉淀。

在刀光剑影的双 11 战场上，永远不要相信浏览器里的 DOM 节点。把业务逻辑深锁在内存状态机里，让 DOM 仅作为无法操纵核心命脉的影子，才是让黑产脚本寸步难行的硬核法则。

生产避坑：自动化脚本通过 PointerEvent 伪造触控生物特征

黑产外挂也在不断演化。现在的某些高级抓取框架不仅能够伪造isTrusted: true（通过浏览器底层无头补丁），甚至能在内存中合成带有pressure（压力）和pointerType: "touch"的完美 PointerEvent。

对抗这种高仿脚本的关键在于**“多阶物理动力学交叉验证”**：

轨迹平滑度与加速度方差分析：真人点击屏幕前，指尖在视口上方必然存在微弱的逼近微抖动（Jitter），接触时长在 80ms 至 250ms 之间服从正态分布，而脚本合成的点击接触时长通常是极其精准的固定数值（如恰好 50.0ms）且前后 500ms 内零移动轨迹；
结合 Web Worker 离屏熵增采集：利用 Worker 线程高频检测事件触发时的主线程任务微抖动，当且仅当生物微动态与系统调度特征交叉熵大于安全阈值时，状态机才发放提交准入 Token。