1.ajax登录示例

urls.py

from django.conf.urls import url

from django.contrib import admin

from app01 import views

urlpatterns = [

    url(r'^admin/', admin.site.urls),

    url(r'^login_ajax/$', views.login_ajax, name='login_ajax'),

    url(r'^index/$', views.index, name='index'),

]

views.py

from django.shortcuts import render, HttpResponse, redirect

import json

def index(request):

    return HttpResponse('this is index')

def login_ajax(request):

    if request.method == "POST":

        user = request.POST.get("user")

        pwd = request.POST.get("pwd")

        ret = {"status": 0, 'url': ''}

        if user == "alex" and pwd == "":

            ret['status'] = 1

            ret['url'] = '/index/'

        return HttpResponse(json.dumps(ret))

    return render(request, "login_ajax.html")

login.html登录页面

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>登录</title>

    <link rel="stylesheet" href="/static/plugins/bootstrap-3.3.7-dist/css/bootstrap.css">

    <link rel="stylesheet" href="/static/css/signin.css">

</head>

<body>

<div class="container">

    <form class="form-signin" action="{% url 'login' %}" method="post">

        {% csrf_token %}

        <h2 class="form-signin-heading">请登录</h2>

        <label for="inputUser" class="sr-only">用户名</label>

        <input type="text" id="inputUser" class="form-control" placeholder="用户名" required="" autofocus="" name="user">

        <label for="inputPassword" class="sr-only">密码</label>

        <input type="password" id="inputPassword" class="form-control" placeholder="密码" required="" name="pwd">

        <div class="checkbox">

            <label>

                <input type="checkbox" value="remember-me"> 记住我

            </label>

        </div>

        <input class="btn btn-lg btn-primary btn-block" id="login" value="登陆">

    </form>

</div> <!-- /container -->

<script src="/static/jquery-3.3.1.min.js"></script>

<script>

    $('#login').click(function () {

        $.ajax({

            url: '/login_ajax/',

            type: 'post',

            data: {

                csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val(),

                user: $('[name="user"]').val(),

                pwd: $('[name="pwd"]').val()

            },

            success: function (data) {

                data = JSON.parse(data);

                if (data.status) {

                    window.location = data.url

                }

                else {

                    alert('登陆失败')

                }

            }

        })

    })

</script>

</body>

</html>

静态文件需要配置，使用了jQuery和Bootstrap。

2.CSRF跨站请求伪造

一共四种方式

1，将 csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val() 放在POST的请求体中。

示例中就是使用的这种方式。

2，给ajax的请增加X-CSRFToken的请求头，对应的值只能是cookie中的csrftoken的值。

所以我们要从cookie中提取csrftoken的值，jQuery不能去cookie，我们使用jquery.cookie的插件。点击下载jquer.cookie插件。

HTML中导入jquery.cookie.js。

<script src="/static/jquery-3.3.1.min.js"></script>

<script src="/static/jquery.cookie.js"></script>

<script>

    $('#login').click(function () {

        $.ajax({

            url: '/login_ajax/',

            type: 'post',

            headers:{ "X-CSRFToken":$.cookie('csrftoken') },

            data: {

                user: $('[name="user"]').val(),

                pwd: $('[name="pwd"]').val()

            },

            success: function (data) {

                data = JSON.parse(data);

                if (data.status) {

                    window.location = data.url

                }

                else {

                    alert('登陆失败')

                }

            }

        })

    })

</script>

3，使用$.ajaxSetup()给全局的ajax添加默认参数。

可以按照方式一设置data，也可以按照方式二设置请求头。

$.ajaxSetup({

    data: {

        csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val(),

    }

});

或者

$.ajaxSetup({

    headers: {"X-CSRFToken": $.cookie('csrftoken')},

});

4，官方推荐方法（用到jquery.cookie插件）：

function csrfSafeMethod(method) {

    // these HTTP methods do not require CSRF protection

    return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));

}

$.ajaxSetup({

    beforeSend: function (xhr, settings) {

        if (!csrfSafeMethod(settings.type) && !this.crossDomain) {

            xhr.setRequestHeader("X-CSRFToken", $.cookie('csrftoken'));

        }

    }

});

ajax向Django前后端提交请求和CSRF跨站请求伪造的更多相关文章

  1. python 全栈开发，Day87(ajax登录示例,CSRF跨站请求伪造,Django的中间件,自定义分页)

    一.ajax登录示例 新建项目login_ajax 修改urls.py,增加路径 from app01 import views urlpatterns = [ path('admin/', admi ...

  2. Django框架 之 基于Ajax中csrf跨站请求伪造

    Django框架 之 基于Ajax中csrf跨站请求伪造 ajax中csrf跨站请求伪造 方式一 1 2 3 $.ajaxSetup({     data: {csrfmiddlewaretoken: ...

  3. 第三百一十五节，Django框架，CSRF跨站请求伪造

    第三百一十五节,Django框架,CSRF跨站请求伪造  全局CSRF 如果要启用防止CSRF跨站请求伪造,就需要在中间件开启CSRF #中间件 MIDDLEWARE = [ 'django.midd ...

  4. 十三 Django框架，CSRF跨站请求伪造

     全局CSRF 如果要启用防止CSRF跨站请求伪造,就需要在中间件开启CSRF #中间件 MIDDLEWARE = [ 'django.middleware.security.SecurityMidd ...

  5. django 中间键 csrf 跨站请求伪造

    django中间件和auth模块   Django中间件 由django的生命周期图我们可以看出,django的中间件就类似于django的保安,请求一个相应时要先通过中间件才能到达django后端( ...

  6. Django之CSRF跨站请求伪造（老掉牙的钓鱼网站模拟）

    首先这是一个测试的代码 请先在setting页面进行下面操作 注释完成后,开始模拟钓鱼网站的跨站请求伪造操作: 前端代码: <!DOCTYPE html> <html lang=&q ...

  7. Web框架之Django_09 重要组件（Django中间件、csrf跨站请求伪造）

    摘要 Django中间件 csrf跨站请求伪造 一.Django中间件: 什么是中间件? 官方的说法:中间件是一个用来处理Django的请求和响应的框架级别的钩子.它是一个轻量.低级别的插件系统,用于 ...

  8. django上课笔记3-ORM补充-CSRF (跨站请求伪造)

    一.ORM补充 ORM操作三大难点: 正向操作反向操作连表 其它基本操作(包含F Q extra) 性能相关的操作 class UserInfo(models.Model): uid = models ...

  9. Web框架之Django重要组件（Django中间件、csrf跨站请求伪造）

    Web框架之Django_09 重要组件(Django中间件.csrf跨站请求伪造)   摘要 Django中间件 csrf跨站请求伪造 一.Django中间件: 什么是中间件? 官方的说法:中间件是 ...

随机推荐

  1. spring boot +mybatis(通过properties配置) 集成

    注:日常学习记录贴,下面描述的有误解的话请指出,大家一同学习. 因为我公司现在用的是postgresql数据库,所以我也用postgresql进行测试 一.前言 1.Spring boot 会默认读取 ...

  2. Java获取泛化类型

    @Retention(RetentionPolicy.RUNTIME) public @interface MongodbTable { String name(); } public class A ...

  3. Java面试准备之Java基础

    1.Java 语言的优点 面向对象,平台无关,内存管理,安全性,多线程,Java 是解释型的 2.Java 和 C++的区别 多重继承(java接口多重,类不支持,C++支持) 自动内存管理 预处理功 ...

  4. typeScript面对对象篇一

    面向对象是typescript的核心部分,这里先介绍下面向对象的七大原则: 单一原则:一个类子负责一个职责. 里氏替换原则:子类可以在任何地方替换它的父类. 依赖倒置原则:代码要依赖于抽象的类,而不要 ...

  5. SpringCloud（1）服务注册与发现Eureka

    1.创建1个空白的工程 2.创建2个model工程 一个module(即SpringBoot)工程作为服务注册中心,即Eureka Server,另一个作为Eureka Client. Eureka ...

  6. 阿里面试题BIO和NIO数量问题附答案和代码

    一.问题 BIO 和 NIO 作为 Server 端,当建立了 10 个连接时,分别产生多少个线程? 答案: 因为传统的 IO 也就是 BIO 是同步线程堵塞的,所以每个连接都要分配一个专用线程来处理 ...

  7. Flask 微信公众号开发

    公众号接口 1. 公众号消息会话 目前公众号内主要有这样几类消息服务的类型,分别用于不同的场景. 群发消息 公众号可以以一定频次(订阅号为每天1次,服务号为每月4次),向用户群发消息,包括文字消息.图 ...

  8. ；。【】DAY14、递归，匿名函数

    一.三元运算符 三元运算符也称三目运算符,就是if .....else.....语法糖 前提:if 和 else 只有一条语句 例:a = 20 b = 30 res = a if a > b ...

  9. Servlet生命周期和注解配置

    Servlet的生命周期和注解配置问题 /* Servlet? 运行在服务器上的小程序 定义浏览器访问到Tomcat的规则 一.生命周期? 1.创建 2.提供服务 3.被销毁 二.servlet3.0 ...

  10. Mysql——Navicat 连接MySQL 8.0.11 出现2059错误

    原因 mysql8 之前的版本中加密规则是mysql_native_password,而在mysql8之后,加密规则是caching_sha2_password 解决 更改加密规则: mysql -u ...