Flask 第十四话之csrftoken
一、Flask设置CSRF
1.导入CSRFProject
# 导入CSRFProtect from flask_wtf import CSRFProtect
2. 绑定app
# CSRFProtect绑定app CSRFProtect(app)
二、前端处理CSRF
一、form表单或普通ajax方式
1.设置input标签
<input type="text" hidden="hidden" name="csrf_token" value="{{ csrf_token() }}">
2.使用jQuery发送ajax请求
$(function () { $('#submit').click(function (event) { // 停止默认表单提交行为 event.preventDefault(); var email = $("input[name='email']").val() var password = $("input[name='password']").val() var csrf_token = $("input[name='csrf_token']").val() console.log(email,password) $.post({ url:'/login/', data:{ email:email, password:password, csrf_token:csrf_token }, success:function (data) { console.log(data) }, fail:function (error) { console.log(error) } }) }) });
二、meta标签方式
1.设置csrf_token,可以使用继承的方式将meta设置在母版里
<meta name="csrf_token" content="{{ csrf_token() }}">
2.导入jQuery
<script src="{{ url_for('static',filename='js/jquery-3.1.1.js') }}"></script> <script src="{{ url_for('static',filename='js/leeajax.js') }}"></script> <script src="{{ url_for('static',filename='js/login.js') }}"></script>
3.自定义Ajax命名文件:leeajax.js,发送前添加header头
/** * Created by Lee on 2020/3/14. */ var lee = { 'get':function (args) { args['method'] = 'get'; this.ajax(args); }, 'post':function (args) { args['method'] = 'post'; this.ajax(args); }, 'ajax':function (args) { // 设置csrf_token请求头 this._ajaxSetup(); $.ajax(args); }, '_ajaxSetup':function () { // 封装Ajax 设置请求前添加请求头 $.ajaxSetup({ beforeSend:function (xhr,settings) { if(!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type)&&!this.corrDomain){ var csrf_token = $("meta[name='csrf_token']").attr('content') xhr.setRequestHeader("X-CSRFToken",csrf_token) } } }); } }
4.使用lee,新建login.js将登陆js代码写在里面
// 方式二:meta标签的形式,可以用模板继承来简化html $(function () { $('#submit').click(function (event) { // 停止默认表单提交行为 event.preventDefault(); var email = $("input[name='email']").val(); var password = $("input[name='password']").val(); lee.post({ url:'/login/', data:{ email:email, password:password }, success:function (data) { console.log(data) }, fail:function (error) { console.log(error) } }); }) });