javascript - FlaskWTF 如何向 Vue 前端发送 CSRF token

Question

我正在开发一款使用 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 token 。在他们的文档中，他们建议使用以下脚本呈现模板:

<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，而且当 token 在我的响应负载中作为一个巨大的脚本标记发送时，我什至无法访问 token (请参阅 this question that I posted 中有关此问题的更多详细信息)。

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

Answer 1

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

看起来在 Flask-WTF 中您可以生成一个 csrf token 并将其添加为您自己的 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。如果是这样，您可以继续下一步，即将此 token 作为 header 发回。

为此，您可以配置一个获取客户端，使其始终将相同的 token 作为 X-CSRF-TOKEN header 发回，但我个人喜欢 axios 获取客户端，因为它会自动执行此操作你。