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

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

安全

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


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

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

CSRF防护 Web安全

我来解答赞 11 收藏

反馈

2 条解答

西门柯依 Lv1

哈，这个坑我踩过，当年差点因为这个背锅。确认弹窗就是个心理安慰，根本防不了CSRF。我后来被安全团队教育了一顿才明白：

1. 弹窗就是个UI交互，攻击者完全可以构造恶意页面自动触发点击事件。只要用户手滑点了确认，攻击就成功了。

2. 必须用CSRF token才行。我给你改个靠谱的方案：

function DeleteButton() {

  const [csrfToken, setCsrfToken] = useState('');



  useEffect(() => {

    // 从后端获取token

    fetch('/api/csrf-token').then(res => res.json()).then(data => {

      setCsrfToken(data.token);

    });

  }, []);



  const handleDelete = () => {

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

      fetch('/api/delete', { 

        method: 'POST',

        headers: {

          'X-CSRF-Token': csrfToken

        }

      })

    }

  }



  return 删除账户

}

关键点：
- 后端要在渲染页面时生成token（可以用像csrf之类的库）
- 每次请求带上这个token
- 后端验证token有效性

这样就算攻击者诱导用户点击，没有正确token的请求也会被后端拒绝。我之前就因为这个被安全团队抓过典型，现在看到这种问题就条件反射要加token...

2026-03-06 10:12

亚会酱~ 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