JS修改Ticketmaster登录输入失效，求教防自动化输入实现方案

核心原因：受控组件 + 可信事件验证 #

Ticketmaster的登录页面采用了现代前端框架的受控组件机制，同时叠加了输入事件可信度校验，这是直接修改DOM值无效的根本原因：

1. 受控组件逻辑：React、Vue这类框架中，输入框的显示值完全由组件内部状态（state/prop）控制，而非DOM原生的value属性。你直接通过document.querySelector(...).value = ...修改DOM值时，框架内部状态并未同步更新。当组件因焦点切换、表单提交等触发重新渲染时，会用内部状态的原始值覆盖DOM修改结果，导致输入框被清空。
2. 可信事件校验：浏览器会给用户手动触发的事件（如键盘输入、点击）标记event.isTrusted = true，代码手动dispatchEvent触发的事件则为false。网站的自定义逻辑会校验这个属性，忽略非可信事件的状态更新请求——这就是你触发change事件后，焦点切换值就消失的原因：事件不被信任，状态没更新，渲染时DOM被重置。

Ticketmaster的具体实现思路 #

除基础受控组件外，他们还可能叠加了额外防自动化检测：

• 监听底层输入事件（input/keydown而非change），确保输入操作匹配真实用户行为
• 校验事件链：比如输入前是否有focus事件（用户点击输入框），输入过程是否有对应的keydown/keyup事件
• 输入节奏检测：自动化输入通常瞬间完成，用户输入有正常字符间隔，网站会过滤节奏异常的输入

如何在自己的网站中部署该机制 #

方案1：React（受控组件 + 可信事件校验） #

这是现代前端最常用的实现方式：

import { useState } from 'react';

function LoginForm() {
  // 用state存储输入框的真实值
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleInputChange = (setter) => (e) => {
    // 只处理用户手动触发的可信事件
    if (!e.isTrusted) return;
    setter(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    // 提交时使用state中的值，而非DOM值
    console.log('提交登录信息:', { email, password });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        name="email"
        value={email} // 输入框值完全由state控制
        onChange={handleInputChange(setEmail)}
      />
      <input
        type="password"
        name="password"
        value={password}
        onChange={handleInputChange(setPassword)}
      />
      <button type="submit">登录</button>
    </form>
  );
}

方案2：原生JavaScript（手动维护状态） #

如果不用前端框架，可以自己维护输入状态并校验事件可信度：

// 手动存储输入框的真实值
let emailValue = '';
let passwordValue = '';

const emailInput = document.querySelector('[name=email]');
const passwordInput = document.querySelector('[name=password]');
const loginForm = document.querySelector('form');

// 只响应用户触发的输入事件
emailInput.addEventListener('input', (e) => {
  if (e.isTrusted) {
    emailValue = e.target.value;
  }
});

passwordInput.addEventListener('input', (e) => {
  if (e.isTrusted) {
    passwordValue = e.target.value;
  }
});

// 焦点切换时，用真实值重置DOM，覆盖代码修改的内容
emailInput.addEventListener('blur', () => {
  emailInput.value = emailValue;
});

passwordInput.addEventListener('blur', () => {
  passwordInput.value = passwordValue;
});

// 表单提交时使用维护的真实值，而非DOM值
loginForm.addEventListener('submit', (e) => {
  e.preventDefault();
  console.log('提交登录信息:', { email: emailValue, password: passwordValue });
  // 重置输入框为真实值
  emailInput.value = emailValue;
  passwordInput.value = passwordValue;
});

额外强化：防自动化补充手段 #

可以再加一些逻辑提升安全性：

• 校验输入事件顺序：比如输入前必须有focus事件记录
• 检测输入间隔：记录每一个字符输入的时间差，过滤间隔过短的批量输入
• 关联鼠标事件：比如输入框的focus事件必须伴随mousedown事件（用户点击输入框）

内容的提问来源于stack exchange，提问作者Hazem Mohamed