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)
            }
        });
    })
});