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. kernel笔记——块I/O

    Linux下,I/O处理的层次可分为4层: 1. 系统调用层,应用程序使用系统调用指定读写哪个文件,文件偏移是多少  2. 文件系统层,写文件时将用户态中的buffer拷贝到内核态下,并由cache缓 ...

  2. web框架开发-Ajax

    Ajax简介 向服务器发送请求的4种方式 1.浏览器地址栏,默认get请求2.form表单: get请求 post请求3.a标签,默认get请求 4.Ajax 特点: 1 异步请求 2 局部刷新 方式 ...

  3. JDK1.8源码(八)——java.util.HashSet 类

    在上一篇博客,我们介绍了 Map 集合的一种典型实现 HashMap ,在 JDK1.8 中,HashMap 是由 数组+链表+红黑树构成,相对于早期版本的 JDK HashMap 实现,新增了红黑树 ...

  4. 开发工具IntelliJ IDEA的安装步骤及首次启动和创建项目

    开发工具IDEA概述 DEA是一个专门针对Java的集成开发工具(IDE),由Java语言编写.所以,需要有JRE运行环境并配置好环境变量.它可以极大地提升我们的开发效率.可以自动编译,检查错误.在公 ...

  5. element ui 时间 date 差一天

    let BirthdayYMD = common.formatDate(this.addForm.Dendline); this.addForm.Dendline = new Date(Birthda ...

  6. Mybatis映射文件的自动映射与手动映射问题

    Mapper XML 文件 MyBatis 的真正强大在于它的映射语句,也是它的魔力所在.由于它的异常强大,映射器的 XML 文件就显得相对简单.如果拿它跟具有相同功能的 JDBC 代码进行对比,你会 ...

  7. es6 模本字符串拼接方法 ``

    1.字符串拼接  可以使用 es6  ` ` 配合 ${xxx} 具体操作上代码 <!DOCTYPE html> <html lang="en"> < ...

  8. Python——Twisted框架（网络通信）

    一.简介 twisted是一个封装好的网络通信的库,可以帮助我们快速进行网络编程.注意,python3中,字符串必须转码成utf8的格式,否则无法发送.比如str("test"). ...

  9. [模板] 数学基础:快速幂/乘/逆元/exGCD/(ex)CRT/(ex)Lucas定理

    方便复制 快速乘/幂 时间复杂度 \(O(\log n)\). ll nmod; //快速乘 ll qmul(ll a,ll b){ ll l=a*(b>>hb)%nmod*(1ll< ...

  10. BugKu 这是一张单纯的图片

    http://123.206.87.240:8002/misc/1.jpg FLAG在哪里?? 吐槽一下这图片一点也不单纯 用010 打开后发现最后附着一段意义不明的字符,file命令也识别不出来 题 ...