六十六：CSRF攻击与防御之CSRF防御之ajax防御和ajax封装

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封装的更多相关文章

第三百六十六节，Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)的bool组合查询
第三百六十六节,Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)的bool组合查询 bool查询说明 filter:[],字段的过滤,不参与打分must:[] ...
“全栈2019”Java第六十六章：抽象类与接口详细对比
难度初级学习时间 10分钟适合人群零基础开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...
《手把手教你》系列技巧篇（六十六）-java+ selenium自动化测试 - 读写excel文件 - 上篇（详细教程）
1.简介在自动化测试,有些我们的测试数据是放到excel文件中,尤其是在做数据驱动测试的时候,所以需要懂得如何操作获取excel内的内容.由于java不像python那样有直接操作Excle文件的类 ...
第二百六十六节，Tornado框架-XSS处理，页码计算，页码显示
Tornado框架-XSS处理,页码计算,页码显示 Tornado框架-XSS攻击过滤注意:Tornado框架的模板语言,读取数据已经自动处理了XSS攻击,过滤转换了危险字符如果要使危险字符可以远 ...
FastAPI（六十六）实战开发《在线课程学习系统》接口开发--用户注册接口开发
在前面我们分析了接口的设计,那么我们现在做接口的开发. 我们先去设计下pydantic用户参数的校验 from pydantic import BaseModel from typing import ...
hiho一下第六十六周
题目链接:这是一道水爆了的广搜题 #include<iostream> #include<stdio.h> #include<algorithm> #include ...
第六十六篇、OC_Sqlite数据库操作
#import <Foundation/Foundation.h> #import <sqlite3.h> #define kFilename @"data.sqli ...
第六十六节，htnl音频视频
htnl音频视频学习要点: 1.音频和视频概述 2.video视频元素 3.audio音频元素本章主要探讨HTML5中音频和视频元素,通过这两个原生的媒体元素向HTML页面 ...
salesforce 零基础学习（六十六）VF页面应善于使用变量和函数（二）常用函数的使用
上一篇介绍VF中常用的变量,此篇主要内容为VF页面可以直接使用的函数,主要包括Date相关函数,Text相关函数,Information相关函数以及logic相关函数,其他相关函数,比如math相关函 ...

随机推荐

7.JVM技术_java监控工具使用
1.java监控工具使用 2.jconsole jconsole是一种集成了上面所有命令功能的可视化工具,可以分析jvm的内存使用情况和线程等信息 2.1.启动jconsole 通过JDK/bin目录 ...
Linux下周期性查看GPU状态
Linux下周期性查看GPU状态 NVIDIA自带了nvidia-smi命令来查看GPU的使用情况了解一下watch命令 $ whatis watch watch (1) - execute a p ...
QTP（16）
一.QTP项目(ECShop) 1.ECShop是一个开源免费的一个B2C的电子商务系统,主要用于商家和顾客进行商品交易操作. 2.ECShop分为前台和后台两个子系统: (1)ECShop前台:顾客 ...
PHP代码执行流程
怎么样?有点了解了么.说实话,单看这个,我本人是有点懵的,不过,不要怕.咱们来慢慢地看下. 首先,在网上找的信息说PHP代码执行的顺序是这样的,第一步是词法分析,第二步是语法分析,第三步是转化为opc ...
https://openmaptiles.org/
docker save klokantech/tileserver-gl:latest -o tileserver-gl.tar docker load -i tileserver-gl.tar do ...
Acwing-285-没有上司的舞会(树型DP)
链接: https://www.acwing.com/problem/content/287/ 题意: Ural大学有N名职员,编号为1~N. 他们的关系就像一棵以校长为根的树,父节点就是子节点的直接 ...
JavaStript基础 —— JavaStript语法
JavaStript 简介 JavaScript诞生于 1995年.当然,它的主要目的是处理以前由服务器端语言负责的一些输入验证操作. 如今,JavaStript的用途早就不再局限于简单的数据验证,而 ...
Image图片自适应 Image resizeMode属性
cover比较安全 cover模式只求在显示比例不失真的情况下填充整个显示区域.可以对图片进行放大或者缩小,超出显示区域的部分不显示, 也就是说,图片可能部分会显示不了.contain模式是要求显示整 ...
BZOJ 4269: 再见Xor 线性基+贪心
Description 给定N个数,你可以在这些数中任意选一些数出来,每个数可以选任意多次,试求出你能选出的数的异或和的最大值和严格次大值. Input 第一行一个正整数N. 接下来一行N个非负整数. ...
c++顺序表（数组）查找最大最小值
#include <iostream> #define MAXSIZE 100 using namespace std; void find(int a[],int m) {int min ...

六十六：CSRF攻击与防御之CSRF防御之ajax防御和ajax封装

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

随机推荐

热门专题