app里面还是要绑定CSRFProtect

from flask_wtf import CSRFProtect # flask_wtf 已经提供CSRF的防御手段
CSRFProtect(app) # 绑定app

登录页的js

$(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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="{{url_for('static', filename='login.js')}}"></script>
</head>
<body>
<form action="" method="post">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
<table>
<tbody>
<tr>
<td>邮箱:</td>
<td><input type="text" name="email"></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="text" name="password"></td>
</tr>
<tr>
<td></td>
<td><input id="submit" type="submit" value="点击登录"></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>

请求页面

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

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="csrf_token" content="{{ csrf_token() }}">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
{% block head %}{% endblock %}
</head>
<body>
<nav>导航条</nav>
{% block body %}{% endblock %}
<footer>底部</footer>
</body>
</html>

登录页继承base模板

{% extends 'base.html' %}

{% block head %}
<script src="{{url_for('static', filename='login.js')}}"></script>
{% endblock %} {% block body %}
<form action="" method="post">
<table>
<tbody>
<tr>
<td>邮箱:</td>
<td><input type="text" name="email"></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="text" name="password"></td>
</tr>
<tr>
<td></td>
<td><input id="submit" type="submit" value="点击登录"></td>
</tr>
</tbody>
</table>
</form>
{% endblock %}

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

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

访问

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

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

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机制

$(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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="csrf_token" content="{{ csrf_token() }}">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="{{ url_for('static', filename='send_http.js') }}"></script>
{% block head %}{% endblock %}
</head>
<body>
<nav>导航条</nav>
{% block body %}{% endblock %}
<footer>底部</footer>
</body>
</html>

请求

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

六十六:CSRF攻击与防御之CSRF防御之ajax防御和ajax封装的更多相关文章

  1. 第三百六十六节,Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)的bool组合查询

    第三百六十六节,Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)的bool组合查询 bool查询说明 filter:[],字段的过滤,不参与打分must:[] ...

  2. “全栈2019”Java第六十六章:抽象类与接口详细对比

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  3. 《手把手教你》系列技巧篇(六十六)-java+ selenium自动化测试 - 读写excel文件 - 上篇(详细教程)

    1.简介 在自动化测试,有些我们的测试数据是放到excel文件中,尤其是在做数据驱动测试的时候,所以需要懂得如何操作获取excel内的内容.由于java不像python那样有直接操作Excle文件的类 ...

  4. 第二百六十六节,Tornado框架-XSS处理,页码计算,页码显示

    Tornado框架-XSS处理,页码计算,页码显示 Tornado框架-XSS攻击过滤 注意:Tornado框架的模板语言,读取数据已经自动处理了XSS攻击,过滤转换了危险字符 如果要使危险字符可以远 ...

  5. FastAPI(六十六)实战开发《在线课程学习系统》接口开发--用户注册接口开发

    在前面我们分析了接口的设计,那么我们现在做接口的开发. 我们先去设计下pydantic用户参数的校验 from pydantic import BaseModel from typing import ...

  6. hiho一下 第六十六周

    题目链接:这是一道水爆了的广搜题 #include<iostream> #include<stdio.h> #include<algorithm> #include ...

  7. 第六十六篇、OC_Sqlite数据库操作

    #import <Foundation/Foundation.h> #import <sqlite3.h> #define kFilename @"data.sqli ...

  8. 第六十六节,htnl音频视频

    htnl音频视频 学习要点:     1.音频和视频概述     2.video视频元素     3.audio音频元素 本章主要探讨HTML5中音频和视频元素,通过这两个原生的媒体元素向HTML页面 ...

  9. salesforce 零基础学习(六十六)VF页面应善于使用变量和函数(二)常用函数的使用

    上一篇介绍VF中常用的变量,此篇主要内容为VF页面可以直接使用的函数,主要包括Date相关函数,Text相关函数,Information相关函数以及logic相关函数,其他相关函数,比如math相关函 ...

随机推荐

  1. 7.JVM技术_java监控工具使用

    1.java监控工具使用 2.jconsole jconsole是一种集成了上面所有命令功能的可视化工具,可以分析jvm的内存使用情况和线程等信息 2.1.启动jconsole 通过JDK/bin目录 ...

  2. Linux下周期性查看GPU状态

    Linux下周期性查看GPU状态 NVIDIA自带了nvidia-smi命令来查看GPU的使用情况 了解一下watch命令 $ whatis watch watch (1) - execute a p ...

  3. QTP(16)

    一.QTP项目(ECShop) 1.ECShop是一个开源免费的一个B2C的电子商务系统,主要用于商家和顾客进行商品交易操作. 2.ECShop分为前台和后台两个子系统: (1)ECShop前台:顾客 ...

  4. PHP代码执行流程

    怎么样?有点了解了么.说实话,单看这个,我本人是有点懵的,不过,不要怕.咱们来慢慢地看下. 首先,在网上找的信息说PHP代码执行的顺序是这样的,第一步是词法分析,第二步是语法分析,第三步是转化为opc ...

  5. https://openmaptiles.org/

    docker save klokantech/tileserver-gl:latest -o tileserver-gl.tar docker load -i tileserver-gl.tar do ...

  6. Acwing-285-没有上司的舞会(树型DP)

    链接: https://www.acwing.com/problem/content/287/ 题意: Ural大学有N名职员,编号为1~N. 他们的关系就像一棵以校长为根的树,父节点就是子节点的直接 ...

  7. JavaStript基础 —— JavaStript语法

    JavaStript 简介 JavaScript诞生于 1995年.当然,它的主要目的是处理以前由服务器端语言负责的一些输入验证操作. 如今,JavaStript的用途早就不再局限于简单的数据验证,而 ...

  8. Image图片自适应 Image resizeMode属性

    cover比较安全 cover模式只求在显示比例不失真的情况下填充整个显示区域.可以对图片进行放大或者缩小,超出显示区域的部分不显示, 也就是说,图片可能部分会显示不了.contain模式是要求显示整 ...

  9. BZOJ 4269: 再见Xor 线性基+贪心

    Description 给定N个数,你可以在这些数中任意选一些数出来,每个数可以选任意多次,试求出你能选出的数的异或和的最大值和严格次大值. Input 第一行一个正整数N. 接下来一行N个非负整数. ...

  10. c++顺序表(数组)查找最大最小值

    #include <iostream> #define MAXSIZE 100 using namespace std; void find(int a[],int m) {int min ...