W3af扫描React表单时没发现CSRF漏洞，但手动测试存在缺陷

UX-淑涵提问于 2026-02-18 08:55:46 阅读 25

安全

我在用W3af扫描公司新开发的React应用时，发现所有表单请求都没有检测到CSRF漏洞，但手动测试时明显能用跨站请求伪造数据。代码里确实没做CSRF令牌验证，这是为什么啊？

比如这个用户资料更新组件：


function ProfileForm() {
  const handleSubmit = (e) => {
    e.preventDefault();
    fetch('/api/update-profile', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({username: e.target.username.value})
    });
  };
  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="username" />
      <button type="submit">Save</button>
    </form>
  );
}

我已经配置了w3af_webSpider和csrf插件，扫描日志显示爬取到了这个表单，但最终报告里CSRF一栏还是空白。是不是React单页应用的特性导致扫描器无法追踪请求？或者需要额外配置什么参数才能检测到这种漏洞？

W3af Web安全测试

我来解答赞 7 收藏

反馈

1 条解答

Tr° 素玲 Lv1

我之前踩过这个坑，W3af在扫描React这类单页应用时确实容易漏报CSRF漏洞。主要原因是它依赖于传统的表单解析逻辑，而React的表单提交是通过JavaScript发起的fetch或XHR请求，扫描器可能无法正确关联这些异步请求和页面表单。

从你的代码来看，问题出在两个地方。第一，React的表单提交没有使用默认的form提交行为，而是通过事件监听器手动发起了fetch请求，这种模式W3af的csrf插件可能识别不了。第二，API接口缺少CSRF令牌校验，这本身就是一个安全隐患。

解决这个问题可以从两方面入手。首先建议你在W3af中启用更详细的爬虫配置，特别是增加对AJAX请求的追踪能力。具体来说，可以在w3af_webSpider插件里开启analyze_ajax_requests选项，这样可以让扫描器更好地理解React应用的请求逻辑。

其次也是更重要的，你需要修复代码中的安全缺陷。这里给一个简单的修复示例：

function ProfileForm() {

  const handleSubmit = (e) => {

    e.preventDefault();

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

    fetch('/api/update-profile', {

      method: 'POST',

      headers: { 

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

        'X-CSRF-Token': csrfToken

      },

      body: JSON.stringify({username: e.target.username.value})

    });

  };

  return (

    <form onSubmit={handleSubmit}>

      <input type="text" name="username" />

      <button type="submit">Save</button>

    </form>

  );

}

同时后端也要添加对应的CSRF校验逻辑。记得在HTML模板里注入CSRF令牌，比如：

最后提醒一下，自动扫描工具都不是万能的，尤其是面对现代前端框架时。建议你结合Burp Suite这类可以手工分析流量的工具一起用，效果会更好。我就是这么熬过来的，希望你能少走点弯路。

2026-02-18 09:01