React表单提交时Anti-CSRF Token没变化导致重复提交被拦截怎么办？

设计师景岩提问于 2026-01-31 16:56:29 阅读 64

安全

我在用React做文件上传功能时，按照教程实现了CSRF防护，但发现同一个页面多次提交时token没变，导致第二次提交被服务器拦截了。明明在组件挂载时生成了token，代码是这样的：


class FileUpload extends React.Component {
  constructor() {
    super();
    this.state = {
      csrfToken: this.generateToken()
    };
  }

  generateToken = () => {
    return Math.random().toString(36).substr(2);
  };

  handleSubmit = (e) => {
    e.preventDefault();
    const { csrfToken } = this.state;
    // 发送文件和csrfToken到后端
    console.log('Submitted with token:', csrfToken);
  };

  render() {
    return (
      
        
        
      
    );
  }
}

问题就是每次上传完再选新文件提交时，控制台显示用的还是同一个token值，后端返回403错误。我尝试过在handleSubmit里调用generateToken重新生成，但这样会导致表单还没提交前token就变了，感觉哪里设计错了？

我来解答赞 6 收藏

反馈

2 条解答

Tr° 承锐 Lv1

你这个问题出在token的生成时机和存储位置上，React组件的状态一旦设置就不会自动更新，除非你显式地去改变它。你现在的写法是在组件挂载时生成一次token，之后就没再更新过，所以每次提交用的都是同一个值。

解决办法其实很简单，WordPress本身就有现成的CSRF防护机制，完全没必要自己手动生成token。WordPress提供了wp_create_nonce和check_ajax_referer这两个函数专门用来处理这种情况。你只需要在前端通过WordPress的REST API或者AJAX请求获取一个动态的nonce值，然后每次提交表单时都重新请求一个新的nonce。

具体实现步骤是这样的：首先在后端注册一个REST路由，用来返回新的nonce值。代码类似这样：

add_action('rest_api_init', function () {

    register_rest_route('myplugin/v1', '/nonce', array(

        'methods' => 'GET',

        'callback' => function () {

            return wp_create_nonce('wp_rest');

        },

    ));

});

然后在React组件里，先在componentDidMount里通过fetch请求这个接口拿到初始的nonce，再在每次提交表单后重新请求更新nonce。改一下你的代码：

class FileUpload extends React.Component {

  constructor() {

    super();

    this.state = {

      csrfToken: ''

    };

  }



  componentDidMount() {

    this.fetchNewToken();

  }



  fetchNewToken = () => {

    fetch('/wp-json/myplugin/v1/nonce')

      .then(res => res.text())

      .then(token => this.setState({ csrfToken: token }));

  };



  handleSubmit = (e) => {

    e.preventDefault();

    const { csrfToken } = this.state;

    // 发送文件和csrfToken到后端

    console.log('Submitted with token:', csrfToken);

    // 提交完成后刷新token

    this.fetchNewToken();

  };



  render() {

    return (

      

        

        上传

      

    );

  }

}

这样一来，每次提交表单后都会自动获取新的token，既解决了重复提交的问题，又利用了WordPress自带的安全机制，省得自己折腾随机数生成算法了。对了，记得在后端验证这个nonce，用check_ajax_referer('wp_rest')就行，这是WordPress推荐的做法。

2026-02-19 19:08

闲人宇航 Lv1

问题出在token生成逻辑，应该在每次提交时重新生成而不是组件挂载时就固定。直接改 handleSubmit 方法：

handleSubmit = (e) => {

  e.preventDefault();

  const newCsrfToken = this.generateToken();

  this.setState({ csrfToken: newCsrfToken }, () => {

    console.log('Submitted with token:', this.state.csrfToken);

    // 发送文件和csrfToken到后端

  });

};

这样每次提交都用最新token，不会重复。

2026-02-01 10:14