FlaskWTF 如何将 CSRF 令牌发送到 Vue front-end

Question

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

我正在用 Vue 编写我的表单，但我正在尝试使用 FlaskWTF CSRF/XSRF 安全性和 back-end.

上的表单验证

如果使用 AJAX.

，我已经按照他们在 the FlaskWTF docs 中所说的那样将我的应用程序包装在 CSRFProtect() 中

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 请求中设置 headers：

<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，并且您的 front-end 将其作为 header 发回。这是一个相当普遍的模式，像 axios 这样的 fetch 库会自动找到你的 CSRF 令牌 cookie，并将它作为 header.

附加到你后端的请求中。

看起来 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。如果是这样，您可以继续下一步，即将此令牌作为 header.

发回

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

FlaskWTF 如何将 CSRF 令牌发送到 Vue front-end

FlaskWTF how to send CSRF token to Vue front-end

javascript

python

flask

flask-wtforms

vue.js