使用 Flask/WTForms 和 React 进行 CSRF 保护答案

【问题标题】：CSRF Protection with Flask/WTForms and React使用 Flask/WTForms 和 React 进行 CSRF 保护
【发布时间】：2020-09-26 16:42:41
【问题描述】：

有没有人成功地为使用 React（作为受控组件）提交到 Flask 后端（最好使用 WTForms）的表单实施 CSRF 保护？我看过很多部分答案，其中一个是 Django 的，但找不到任何明确的 Flask 答案。我的大问题似乎是我不知道如何将 csrf 令牌发送到我的反应前端，在提交表单之前将其存储为标题，然后使用正确的令牌提交我的表单。任何方向都会很有帮助。

【问题讨论】：

标签： reactjs flask csrf flask-wtforms

【解决方案1】：

所以，基本上我所做的是我在 Flask 中设置了一个可以接收 GET 和 POST 请求的路由。 React 在组件挂载时发送 GET 请求，Flask 以 csrf 令牌作为标头进行响应（手动完成）。然后 React 将这个值存储在 state 中。提交表单时，来自 state 的 csrf 令牌作为字段发送，类似于在纯 Flask 应用程序中发送的方式，它将是一个隐藏字段。虽然这在技术上有效，但我很好奇这是否仍然容易受到 CSRF 的影响。我认为下一个最佳选择是在所有端点上设置 CSRF 保护，所以如果这不安全，可以尝试一下。

烧瓶路线：

@app.route('/api/login', methods=['GET', 'POST'])
def login():
    form = LoginForm()
    print(request.method)
    if request.method == 'GET':
        return ('', {'csrf_token': form.csrf_token._value()})
    elif form.validate_on_submit():
        return { 'message': 'Login successful' }, 200
    else:
        return { 'errors': form.errors }

componentDidMount 中的 GET 请求：

componentDidMount() {
  axios.get('/api/login',{data: null, headers: {'Content-Type': 'application/json'}})
  .then(res => {
    console.log(res)
    this.setState({
      csrf: res.headers.csrf_token
    });
  }) 
}

提交表单时的POST请求：

onSubmitLogin = e => {
  e.preventDefault();
  const userData = {
    username: this.state.username,
    password: this.state.password,
    csrf_token: this.state.csrf
  };
  axios({
    method: 'post',
    url: '/api/login',
    data: userData,
    headers: {
      'content-type': 'application/json'
    }
  })
  .then(res => {
    console.log(res);
  });
}

【讨论】：

我正在尝试做类似的事情，例如创建登录和注册路线，请分享一些通用代码 sn-ps 以了解表单的反应方式。提前非常感谢。

【解决方案2】：

也许你需要 flask-security-too lib https://flask-security-too.readthedocs.io/en/stable/patterns.html#csrf

【讨论】：