React表单二次确认弹窗如何有效防止CSRF攻击？

码农彦森提问于 2026-01-26 22:36:30 阅读 60

安全

在做用户删除功能时加了二次确认弹窗，但同事说这不能防止CSRF攻击。我用React写了个带确认对话框的组件，代码类似这样：


function DeleteButton() {
  const handleDelete = () => {
    if (window.confirm('确定删除吗？')) {
      fetch('/api/delete', { method: 'POST' })
    }
  }
  return 
}

问题来了：单纯用确认弹窗算不算有效的CSRF防护？如果攻击者构造自动点击的恶意页面，用户如果刚好点了确认，会不会直接触发删除？应该怎样结合令牌机制改造这个流程？

CSRF防护 Web安全

我来解答赞 11 收藏

反馈

1 条解答

亚会酱~ Lv1

单纯用确认弹窗确实不能有效防止CSRF攻击，因为攻击者可以通过其他手段绕过这个前端交互。React这边的弹窗只是用户体验的一部分，安全防护还得靠后端和令牌机制。

推荐的做法是结合CSRF Token。基本流程是：在用户加载页面时，后端生成一个唯一的Token并嵌入到前端（比如放在标签或者直接作为组件属性）。删除操作时把这个Token通过请求头或者表单参数一起发给后端验证。

你这段代码可以改成这样：

function DeleteButton() {

  const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

  

  const handleDelete = () => {

    if (window.confirm('确定删除吗？')) {

      fetch('/api/delete', { 

        method: 'POST',

        headers: {

          'Content-Type': 'application/json',

          'X-CSRF-Token': csrfToken // 这里传递Token

        },

        body: JSON.stringify({ /* 其他数据 */ })

      })

    }

  }



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

}

记得后端要校验这个Token是否匹配当前用户的Session。这是官方文档里推荐的最佳实践，虽然有点麻烦，但为了安全性还是值得的。毕竟前端再多花哨的东西都挡不住恶意构造的请求啊。

2026-01-29 17:00