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的实现将有所不同.