点击劫持防护中如何正确实现用户交互确认？

婷婷提问于 2026-03-15 21:18:20 阅读 34

安全

我在做安全加固时，想防止点击劫持，听说需要用户主动交互才能执行敏感操作。但我试了下，在 React 里加了个确认弹窗，结果还是被测试工具绕过了，是不是我理解错了？

比如下面这个删除按钮，点完还要 confirm 确认，但安全团队说这不算“有效用户交互”，因为 confirm 是同步阻塞的，可能被脚本模拟？那到底该怎么写才合规？

const handleDelete = () => {
  if (confirm('确定要删除吗？')) {
    deleteUser();
  }
};

return <button onClick={handleDelete}>删除账户</button>;

我来解答赞 7 收藏

反馈

1 条解答

长永 Dev Lv1

confirm 确实能被脚本直接调 true 绕过，不算有效交互。

合规的做法是：需要两个独立的、不可预测的用户操作。比如两次点击（第一次点完后按钮变灰/换位置，间隔几秒后再点第二次才生效），或者输入验证码、滑动拼图这些。

简单改法示例：

const [confirmed, setConfirmed] = useState(false);



const handleFirstClick = () => {

  setConfirmed(true);

};



const handleDelete = () => {

  deleteUser();

  setConfirmed(false);

};



return confirmed ? (

  

) : (

  

);

原理就是第一次点击和第二次点击是不可预测的，测试工具没法连续模拟两个真实点击。

2026-03-17 12:29