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. SQL SUM() 函数

    SUM() 函数 SUM 函数返回数值列的总数(总额). SQL SUM() 语法 SELECT SUM(column_name) FROM table_name SQL SUM() 实例 我们拥有下 ...

  2. mysql 提高一 动态sql 传变量

    1.需求 DELIMITER $$ SECOND STARTS '2018-09-07 08:00:00' ON COMPLETION PRESERVE ENABLE DO BEGIN ) DEFAU ...

  3. HyperLedger Fabric ChainCode开发——shim.ChaincodeStubInterface用法

    深蓝前几篇博客讲了Fabric的环境搭建,在环境搭建好后,我们就可以进行Fabric的开发工作了.Fabric的开发主要分成2部分,ChainCode链上代码开发和基于SDK的Application开 ...

  4. UIGestureRecognizer - BNR

    继续上篇UITouch - BNR.该篇将实现线条选择.移动和删除操作. UIGestureRecognizer有一系列子类,每一个子类都用于识别特定的手势.当识别出一个手势时,手势识别器会拦截视图的 ...

  5. .Net Core应用框架Util介绍（三）

    上篇介绍了Util的开发环境,并让你把Demo运行起来.本文将介绍该Demo的前端Angular运行机制以及目录结构. 目录结构 在VS上打开Util Demo,会看见如下的目录结构. 现代前端通常采 ...

  6. 复杂度定义 The Definition of Complexity

    The upper bound   Big-O: Definition: f(n) is in O(g(n)) if there are constants c0 and N0 such that f ...

  7. DOTween的Sequence图例说明

  8. MongoDB系列：一、MongoDB和Redis区别

    简介 MongoDB更类似Mysql,支持字段索引.游标操作,其优势在于查询功能比较强大,擅长查询JSON数据,能存储海量数据,但是不支持事务. Mysql在大数据量时效率显著下降,MongoDB更多 ...

  9. window.onload 与 $(document).ready() 的区别

    以浏览器装载文档为例,在页面加载完毕后,浏览器会通过 JavaScript 为 DOM 元素添加事件.在常规的 JavaScript 代码中,通常使用 window.onload 方法 ,而在 jQu ...

  10. react-navigation 简介

    StackNavigator: 原理和浏览器相似但又有局限,浏览器的方式是开放性的,通过点击一个链接可以跳转到任何页面(push),点击浏览器后退按钮,返回到前一个页面(pop).StackNavig ...