移动端React输入框的value被键盘劫持篡改怎么办？

Mr.彤彤提问于 2026-02-17 11:48:26 阅读 18

移动

在开发React登录页时，密码输入框的value突然被改成奇怪字符，明明设置了受控组件：


function Login() {
  const [password, setPassword] = useState('');
  return (
    <input
      type="password"
      value={password}
      onChange={(e) => setPassword(e.target.value)}
      onKeyDown={(e) => console.log('输入值:', e.target.value)}
    />
  );
}

但用户实际输入”123456″时，控制台却打印出”abc**”，而且输入法候选框显示的内容与输入框显示不一致。试过给输入框加blur事件校验，但攻击者似乎在键盘事件冒泡阶段就修改了value。这种移动端特有的键盘劫持该怎么防御？

移动端安全键盘劫持

我来解答赞 2 收藏

反馈

1 条解答

闲人瑞瑞 Lv1

我一般直接用受控组件加个防抖校验，简单粗暴：

function Login() {

  const [password, setPassword] = useState('');

  const lastValue = useRef('');



  const handleChange = (e) => {

    const currentValue = e.target.value;

    if (currentValue.length < lastValue.current.length || 

        currentValue.slice(0, lastValue.current.length) !== lastValue.current) {

      console.warn('检测到异常输入');

      setPassword(lastValue.current); // 恢复上一个值

      return;

    }

    lastValue.current = currentValue;

    setPassword(currentValue);

  };



  return (

    <input

      type="password"

      value={password}

      onChange={handleChange}

    />

  );

}

这个方案省事又有效，直接拦截非法修改。要真遇到特别顽固的攻击，建议后端再加一层校验，反正前端永远不可信。

2026-02-17 12:04