javascript-使用React Form,Flask服务器和Flask-WTF的CSRF保护

2019-11-11 15:37:37 阅读：308 来源： 互联网

标签：csrf-protection flask-wtforms reactjs javascript

TL; DR我需要保护表单不受CSRF攻击,并且我想在前端使用ReactJS,在后端使用Flask / Flask-WTF.

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

解决方法:

POST表单时,需要将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的实现将有所不同.

标签：csrf-protection,flask-wtforms,reactjs,javascript
来源： https://codeday.me/bug/20191111/2020720.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript-使用React Form,Flask服务器和Flask-WTF的CSRF保护