使用React Form,Flask服务器和Flask-WTF进行CSRF保护

时间:2017-03-24 17:25:34

标签: javascript reactjs flask-wtforms csrf-protection

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

我正在为表格重构一个用Python,Flask和Flask-WTF构建的网站,我想使用React作为前端而不是Jinja2通过PyPugjs。我正在使用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}

2 个答案:

答案 0 :(得分:3)

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

他们的示例w / POST通过jQuery在发送任何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的实现方式会有所不同。

答案 1 :(得分:3)

您可以将{{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);
}

p.s。这仍然感觉很hacky,我仍在寻找一种更积极的方式