使用 React Form、Flask 服务器和 Flask-WTF 进行 CSRF 保护
CSRF protection with a React Form, a Flask server, and Flask-WTF
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 令牌作为 header X-CSRFToken
发送。在此处查看他们的文档:http://flask-wtf.readthedocs.io/en/stable/csrf.html#javascript-requests
他们的示例 w/ POST 通过 jQuery 设置 X-CSRFToken
在发送任何 POST/PUT/DELETE ajax 请求之前:
<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 发送回服务器,您设置 header X-CSRFToken
的实现会有所不同。
您可以在 index.html
的元标记中添加 {{ csrf_token() }}
<meta id="csrf-token" content={{csrf_token()}}>
然后当你想 post/fetch,
只需使用
将其添加到您的 headers
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。这仍然感觉很老套,我仍在寻找一种反应更灵敏的方式
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 令牌作为 header X-CSRFToken
发送。在此处查看他们的文档:http://flask-wtf.readthedocs.io/en/stable/csrf.html#javascript-requests
他们的示例 w/ POST 通过 jQuery 设置 X-CSRFToken
在发送任何 POST/PUT/DELETE ajax 请求之前:
<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 发送回服务器,您设置 header X-CSRFToken
的实现会有所不同。
您可以在 index.html
的元标记中添加 {{ csrf_token() }} <meta id="csrf-token" content={{csrf_token()}}>
然后当你想 post/fetch, 只需使用
将其添加到您的 headersexport 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。这仍然感觉很老套,我仍在寻找一种反应更灵敏的方式