使用 React Form、Flask 服务器和 Flask-WTF 保护 CSRF

Question

TL;DR 我需要保护我的表单免受 CSRF 攻击，我想将 ReactJS 用于前端，将 Flask/Flask-WTF 用于后端。

我正在重构一个使用 Python、Flask 和 Flask-WTF 构建的表单的网站，我想通过 PyPugjs 将 React 用于前端，而不是 Jinja2。我正在使用 Flask-WTF 来渲染表单，它负责处理 CSRF 令牌等。我知道如何使用 React 制作表单，但如何获得 CSRF 保护？

现在我的表单渲染看起来像这样：（使用 Pug）

mixin render_form(form, id='', action='Submit')
    form(method='POST', action='', id=id)
        =form.csrf_token

        each field in form
            fieldset
                if field.errors
                    each error in field.errors
                        .notification.error
                            #{error}

                #{field(placeholder=field.label.text)}

        button(type='submit') #{action}

Answer 1

当您发布表单时，您需要将 csrf 令牌作为标题 X-CSRFToken 发送。在此处查看他们的文档：http://flask-wtf.readthedocs.io/en/stable/csrf.html#javascript-requests

他们通过 jQuery 进行 POST 的示例在发送任何 POST/PUT/DELETE ajax 请求之前设置了X-CSRFToken：

<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>

根据您用于将表单 POST 发送回服务器的库，设置标头 X-CSRFToken 的实现会有所不同。

Answer 2

你可以将 {{ csrf_token() }} 扔到 index.html 的元标记中

 <meta  id="csrf-token" content={{csrf_token()}}>

那么当你想发布/获取时， 只需使用

将其添加到您的标题中

export const post = (path, data={}) => {

const options = {
    method: 'POST', 
    headers: {
        // 'Accept': 'application/json; charset=utf-8',
        // 'Content-Type': 'application/json; charset=utf-8',
        // 'Cache': 'no-cache',
        // 'X-Requested-With': 'XMLHttpRequest', 
        'X-CSRFToken': document.getElementById("csrf-token").getAttribute("content")
    }, 
    body: data
};

return fetch(path, options);
}

附言这仍然感觉很老套，我仍在寻找一种反应更快的方法