csrf攻击ajax,六十六:CSRF攻击与防御之CSRF防御之ajax防御和ajax封装

app里面还是要绑定CSRFProtect

acc650d2753b4231cc992c0409fe938f.png

from flask_wtf import CSRFProtect # flask_wtf 已经提供CSRF的防御手段

CSRFProtect(app) # 绑定app

登录页的js

a03be78363fc8e22d197e664c89d74d2.png

$(function () {

$(‘#submit‘).click(function (event) {

event.preventDefault(); // 阻止默认form提交表单行为

var email = $(‘input[name=email]‘).val();

var password = $(‘input[name=password]‘).val();

var csrf_token = $(‘input[name=csrf_token]‘).val();

// ajax

$.post({

‘url‘: ‘/login/‘,

‘data‘: {

‘email‘: email,

‘password‘: password,

‘csrf_token‘: csrf_token

},

‘success‘: function (data) {

console.log(data)

},

‘fail‘: function (error) {

console.log(error)

}

});

});

});

在页面里面引入js

c8ad390856b2aff6cc4c0e284c7f45d5.png

登录
邮箱:
密码:

请求页面

6f4cd8aac83f3583f10b51ce06d3fdec.png

91efb4bfe8d64d2646318c251f814f6a.png

以上方法虽能使用csrf_token防御,可需要在每一个提交页面都写,flask推荐的方式是将csrf_token()放到meta标签下下,发送数据时,放到头部信息中

使用jinja的模板继承功能,base模板:

78bab2c6c4d77745ed02bd4dd1a9215c.png

Title

{% block head %}{% endblock %}

导航条

{% block body %}{% endblock %}

底部

登录页继承base模板

7bf3e2bffece6819696fb2fe15c730dd.png

{% extends ‘base.html‘ %}

{% block head %}

{% endblock %}

{% block body %}

邮箱:
密码:

{% endblock %}

登录页的js,将csrf放到头部信息

93f043a8c1bd108a0e8114fdb727812c.png

$(function () {

$(‘#submit‘).click(function (event) {

event.preventDefault(); // 阻止默认form提交表单行为

var email = $(‘input[name=email]‘).val();

var password = $(‘input[name=password]‘).val();

var csrf_token = $(‘meta[name=csrf_token]‘).attr(‘content‘);

//设置头部信息

$.ajaxSetup({

‘beforeSend‘: function (xhr, settings) {

if(!/^(GET|HEAD|OPTIPNS|TRACE)$/i.test(settings.type) && !this.crossDomain){

xhr.setRequestHeader(‘X-CSRFToken‘, csrf_token)

}

}

});

// ajax

$.post({

‘url‘: ‘/login/‘,

‘data‘: {

‘email‘: email,

‘password‘: password,

},

‘success‘: function (data) {

console.log(data)

},

‘fail‘: function (error) {

console.log(error)

}

});

});

});

访问

8b47bf969dc9a71af1a33ad684a20062.png

由于每个js请求都需要在头部信息里面添加此参数,所以可以将添加头部信息拿出来封装

封装一个统一的ajax,每次自动获取csrftoken并加到头部信息中

c3c46d7f0b28b6a4ac125abe661167bb.png

var http = {

‘get‘:function (args) {

args[‘method‘] = ‘get‘;

this.ajax(args);

},

‘post‘:function (args) {

args[‘method‘] = ‘post‘;

this.ajax(args);

},

‘ajax‘:function (args) { // 将头部信息放到请求

this._ajaxSetup();

$.ajax(args);

},

‘_ajaxSetup‘:function(){ // 将csrftoken放到头部信息

$.ajaxSetup({

‘beforeSend‘: function (xhr, settings) {

if(!/^(GET|HEAD|OPTIPNS|TRACE)$/i.test(settings.type) && !this.crossDomain){

var csrf_token = $(‘meta[name=csrf_token]‘).attr(‘content‘); // 获取csrf_token

xhr.setRequestHeader(‘X-CSRFToken‘, csrf_token)

}

}

});

}

};

登录页的js,使用自定义的ajax机制

692d1c9173214f77c581590bc2f4e9b7.png

$(function () {

$(‘#submit‘).click(function (event) {

event.preventDefault(); // 阻止默认form提交表单行为

var email = $(‘input[name=email]‘).val();

var password = $(‘input[name=password]‘).val();

// 使用自定义的ajax

http.post({

‘url‘: ‘/login/‘,

‘data‘: {

‘email‘: email,

‘password‘: password,

},

‘success‘: function (data) {

console.log(data)

},

‘fail‘: function (error) {

console.log(error)

}

});

});

});

base模板中导入ajax的js

d0ba850c2cee4fda3e4c2f964a3c6e25.png

Title

{% block head %}{% endblock %}

导航条

{% block body %}{% endblock %}

底部

请求

7e25d0acc57203d985bd720b8f6a32c4.png

b9a92e342593a4eda1d135dd21bc41b1.png

8e61337ac858c675b5fcd8657bf178c3.png

这样发送请求的时候使用自己封装的ajax就可以实现每次发送请求的时候自动在头部信息加上csrftoken信息

原文:https://www.cnblogs.com/zhongyehai/p/11872832.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值