FlaskWTF 如何将 CSRF 令牌发送到 Vue 前端

Question

我正在开发一个带有 Vue 前端和 Flask 后端的应用程序。

我正在用 Vue 编写表单，但我正在尝试使用 FlaskWTF 来实现 CSRF/XSRF 安全性和后端的表单验证。

如果使用 AJAX，我已将我的应用程序封装在 CSRFProtect() 中，正如他们在 the FlaskWTF docs 中所说的那样。

from flask_wtf.csrf import CSRFProtect

app = build_app()
csrf = CSRFProtect(app)

但我不知道如何以 Vue 可读的形式发送 CSRF 令牌。在他们的文档中，他们建议使用以下脚本渲染模板：

<form method="post">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
</form>

然后使用以下代码设置未来发布请求的标题：

<script type="text/javascript">
    var csrf_token = "{{ csrf_token() }}";

    $.ajaxSetup({
        beforeSend: function(xhr, settings) {
            if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type) && !this.crossDomain) {
                xhr.setRequestHeader("X-CSRFToken", csrf_token);
            }
        }
    });
</script>

但是，我没有使用 jQuery，当它在我的响应负载中作为一个巨大的脚本标签发送时，我什至不知道如何访问令牌（请参阅this question that I posted 中有关此问题的更多详细信息）。

考虑到所有这些——使用 FlaskWTF+Vue 处理 CSRF 的最佳实践是什么？我应该如何发送我的 CSRF 令牌以及我应该如何使用 Vue 接收它？

Answer 1

这是一个相当固执己见的问题，没有“正确”答案。我对 SPA 的偏好是执行 cookie-to-header 令牌流，这意味着您的后端发出一个 csrf 令牌 cookie，而您的前端将其作为 header 发送回来。这是一种相当流行的模式，像 axios 这样的获取库会自动找到您的 CSRF 令牌 cookie，并将其作为标头附加到后端的请求中。

看起来在 Flask-WTF 中您可以生成一个 csrf 令牌并自己将其添加为 cookie：

from flask_wtf.csrf import generate_csrf

@app.after_request
def set_xsrf_cookie(response):
    set_cookie('CSRF-TOKEN', generate_csrf())
    return response

此时，您需要确保看到从服务器设置的“CSRF-TOKEN”cookie。如果是这样，您最好继续下一步，将这个令牌作为标头发回。

为此，您可以将 fetch 客户端配置为始终将相同的令牌作为 X-CSRF-TOKEN 标头发送回，但我个人喜欢 axios fetch 客户端，因为它会自动为您执行此操作。