时间戳

首页 > 解决方案 > FlaskWTF 如何将 CSRF 令牌发送到 Vue 前端

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

问题描述

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

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

如果使用 AJAX，我已经CSRFProtect()按照他们在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，当它在我的响应负载中作为一个巨大的脚本标签发送时，我什至不知道如何访问令牌（请参阅我发布的这个问题中有关此问题的更多详细信息）。

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

标签： javascriptpythonvue.jsflaskflask-wtforms

解决方案

这是一个相当自以为是的问题，没有“正确”的答案。我对 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。如果是这样，您可以继续下一步，将这个令牌作为标头发回。

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

推荐阅读