代码之家 › 专栏 › 技术社区 › Matt

FlaskWTF如何向Vue前端发送CSRF令牌

flask-wtforms flask vue.js python javascript

Matt · 技术社区 · 5 年前

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

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

我已经把我的应用程序包好了 CSRFProtect() the FlaskWTF docs ,如果使用AJAX。

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>

然后使用以下代码设置未来post请求的标题:

<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接收它?

1 回复 | 直到 5 年前

Nick 5 年前

这是一个相当固执己见的问题,没有“正确”的答案。我对spa的偏好是做一个cookie-to-header令牌流,这意味着您的后端发布一个csrf令牌cookie,而您的前端将其作为头发送回来。这是一种相当普遍的模式,像axios这样的fetch库会自动找到您的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

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