day56 csrftoken、ajax请求设置crsf_token、form表单上传文件、ajax上传文件

csrftoken

csrf跨站请求伪造

　　详述CSRF（Cross-site request forgery），中文名称：跨站请求伪造，也被称为：one click attack/session riding，缩写为：CSRF/XSRF。攻击者通过HTTP请求江数据传送到服务器，从而盗取回话的cookie。盗取回话cookie之后，攻击者不仅可以获取用户的信息，还可以修改该cookie关联的账户信息。

　　所以解决csrf攻击的最直接的办法就是生成一个随机的cerftoken值，保存在用户的页面上，每次请求都带着这个值过来完成校验。

　　那么django中csrf认证怎么玩的呢？

　　　　官方文档中说到，检验token时，只比较secret是否和cookie中的secret值一样，而不是比较整个token。
　　　　我又有疑问了，同一次登录，form表单中的token每次都会变，而cookie中的token不便，django把那个salt存储在哪里才能保证验证通过呢。直到看到源码。

def _compare_salted_tokens(request_csrf_token, csrf_token):
    # Assume both arguments are sanitized -- that is, strings of
    # length CSRF_TOKEN_LENGTH, all CSRF_ALLOWED_CHARS.
    return constant_time_compare(
        _unsalt_cipher_token(request_csrf_token),
        _unsalt_cipher_token(csrf_token),
    )

def _unsalt_cipher_token(token):
    """
    Given a token (assumed to be a string of CSRF_ALLOWED_CHARS, of length
    CSRF_TOKEN_LENGTH, and that its first half is a salt), use it to decrypt
    the second half to produce the original secret.
    """
    salt = token[:CSRF_SECRET_LENGTH]
    token = token[CSRF_SECRET_LENGTH:]
    chars = CSRF_ALLOWED_CHARS
    pairs = zip((chars.index(x) for x in token), (chars.index(x) for x in salt))
    secret = ''.join(chars[x - y] for x, y in pairs)  # Note negative values are ok
    return secret

　　　　token字符串的前32位是salt，后面是加密后的token，通过salt能解密出唯一的secret。
　　　　django会验证表单中的token和cookie中token是否能解出同样的secret，secret一样则本次请求合法。
　　　　同样也不难解释，为什么ajax请求时，需要从cookie中拿取token添加到请求头中。

常见的网络请求安全解决方法

$.ajax({
  url: "/cookie_ajax/",
  type: "POST",
  headers: {"X-CSRFToken": $.cookie('csrftoken')},  // 从Cookie取csrftoken，并设置到请求头中
  data: {"username": "chao", "password": 123456},
  success: function (data) {
    console.log(data);
  }
})

　　　　或者用自己写一个getCookie方法：

function getCookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
            var cookie = jQuery.trim(cookies[i]);
            // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}
var csrftoken = getCookie('csrftoken');

　　　　每一次都这么写太麻烦了，可以使用$.ajaxSetup()方法为ajax请求统一设置。

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", csrftoken);
    }
  }
});

　　　　注意：

　　　　　　如果使用从cookie中取csrftoken的方式，需要确保cookie存在csrftoken值。

　　　　　　如果你的视图渲染的HTML文件中没有包含 {% csrf_token %}，Django可能不会设置CSRFtoken的cookie。

　　　　　　这个时候需要使用ensure_csrf_cookie()装饰器强制设置Cookie。

django.views.decorators.csrf import ensure_csrf_cookie


@ensure_csrf_cookie
def login(request):
    pass

　　　　更多细节详见：Djagno官方文档中关于CSRF的内容

ajax请求设置csrf_token

方式1

　　通过获取隐藏的input标签中的csrfmiddlewaretoken值，放置在data中发送。

$.ajax({
  url: "/cookie_ajax/",
  type: "POST",
  data: {
    "username": "chao",
    "password": 123456,
    "csrfmiddlewaretoken": $("[name = 'csrfmiddlewaretoken']").val()  // 使用jQuery取出csrfmiddlewaretoken的值，拼接到data中
  },
  success: function (data) {
    console.log(data);
  }
})

方式2

$.ajaxSetup({
    data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
});

方式3（后面再说）

　　通过获取返回的cookie中的字符串放置在请求头中发送。

　　注意：需要引入一个jquery.cookie.js插件。

<script src="{% static 'js/jquery.cookie.js' %}"></script>

$.ajax({
 
headers:{"X-CSRFToken":$.cookie('csrftoken')}, #其实在ajax里面还有一个参数是headers，自定制请求头，可以将csrf_token加在这里，我们发contenttype类型数据的时候，csrf_token就可以这样加
 
})

文件上传

form表单上传文件

<form action="" method="post" enctype="multipart/form-data">
    {% csrf_token %}

    用户名:<input type="text" name="username" >

    头像:<input type="file" name="avatar" multiple>

    <input type="submit">

</form>

POST http://www.example.com HTTP/1.1
Content-Type: application/x-www-form-urlencoded;charset=utf-8

user=yuan&age=22     #这就是上面这种contenttype规定的数据格式，后端对应这个格式来解析获取数据，
　　　　　　　　　　 　 #不管是get方法还是post方法，都是这样拼接数据，大家公认的一种数据格式，
　　　　　　　　　　　　#但是如果你contenttype指定的是urlencoded类型，
   　　　　　　　　　　#但是post请求体里面的数据是下面那种json的格式，那么就出错了，服务端没法解开数据。

ajax文件上传

请求头ContentType

ContentType指的是请求体的编码类型，常见的类型共有3种：

1 application/x-www-form-urlencoded（看下图）

　　这应该是最常见的 POST 提交数据的方式了。浏览器的原生 <form> 表单，如果不设置 enctype 属性，那么最终就会以默认格式application/x-www-form-urlencoded 方式提交数据，ajax默认也是这个。请求类似于下面这样（无关的请求头在本文中都省略掉了）：

POST http://www.example.com HTTP/1.1
Content-Type: application/x-www-form-urlencoded;charset=utf-8

user=yuan&age=22   #这就是上面这种contenttype规定的数据格式，后端对应这个格式来解析获取数据，不管是get方法还是post方法，都是这样拼接数据，大家公认的一种数据格式，但是如果你contenttype指定的是urlencoded类型，但是post请求体里面的数据是下面那种json的格式，那么就出错了，服务端没法解开数据。

　　看network来查看我们发送的请求体：

　　　　　　点击一下上面红框的内容，你就会看到，这次post请求发送数据的原始格式

2 multipart/form-data

　　这又是一个常见的 POST 数据提交的方式。我们使用表单上传文件时，必须让 <form> 表单的 enctype 等于 multipart/form-data，form表单不支持发json类型的contenttype格式的数据，而ajax什么格式都可以发，也是ajax应用广泛的一个原因。直接来看一个请求示例：（了解）

POST http://www.example.com HTTP/1.1
Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryrGKCBY7qhFd3TrwA

------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name="user"

chao
------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name="file"; filename="chrome.png"
Content-Type: image/png

PNG ... content of chrome.png ...
------WebKitFormBoundaryrGKCBY7qhFd3TrwA--

　　这个例子稍微复杂点。首先生成了一个 boundary 用于分割不同的字段，为了避免与正文内容重复，boundary 很长很复杂。然后 Content-Type 里指明了数据是以 multipart/form-data 来编码，本次请求的 boundary 是什么内容。消息主体里按照字段个数又分为多个结构类似的部分，每部分都是以 --boundary 开始，紧接着是内容描述信息，然后是回车，最后是字段具体内容（文本或二进制）。如果传输的是文件，还要包含文件名和文件类型信息。消息主体最后以 --boundary-- 标示结束。关于 multipart/form-data 的详细定义，请前往 rfc1867 查看。

　　这种方式一般用来上传文件，各大服务端语言对它也有着良好的支持。

　　上面提到的这两种 POST 数据的方式，都是浏览器原生支持的，而且现阶段标准中原生 <form> 表单也只支持这两种方式（通过 <form> 元素的 enctype 属性指定，默认为 application/x-www-form-urlencoded。其实 enctype 还支持 text/plain，不过用得非常少）。

　　随着越来越多的 Web 站点，尤其是 WebApp，全部使用 Ajax 进行数据交互之后，我们完全可以定义新的数据提交方式，给开发带来更多便利。

3 application/json

　　application/json 这个 Content-Type 作为响应头大家肯定不陌生。实际上，现在越来越多的人把它作为请求头，用来告诉服务端消息主体是序列化后的 JSON 字符串。由于 JSON 规范的流行，除了低版本 IE 之外的各大浏览器都原生支持 JSON.stringify，服务端语言也都有处理 JSON 的函数，使用 JSON 不会遇上什么麻烦。

　　JSON 格式支持比键值对复杂得多的结构化数据，这一点也很有用。记得以前做过一个项目时，需要提交的数据层次非常深，我就是把数据 JSON 序列化之后来提交的。不过当时我是把 JSON 字符串作为 val，仍然放在键值对里，以 x-www-form-urlencoded 方式提交。

　　如果在ajax里面写上这个contenttype类型，那么data参数对应的数据，就不能是个object类型数据了，必须是json字符串，contenttype:'json'，简写一个json，它也能识别是application/json类型

　　服务端接受到数据之后，通过contenttype类型的值来使用不同的方法解析数据，其实就是服务端框架已经写好了针对这几个类型的不同的解析数据的方法，通过contenttype值来找对应方法解析，如果有一天你写了一个contenttype类型，定义了一个消息格式，各大语言及框架都支持，那么别人也会写一个针对你的contenttype值来解析数据的方法，django里面不能帮我们解析contenttype值为json的数据格式，你知道他能帮你解析application/x-www-form-urlencoded 和multipart/form-data(文件上传会用到)就行了，如果我们传json类型的话，需要我们自己来写一个解析数据的方法，其实不管是什么类型，我们都可以通过原始发送来的数据来进行加工处理，解析出自己想要的数据，这个事情我们在前面自己写web框架的时候在获取路径那里就玩过了，还记得吗？

　　$.ajax({
            url:"{% url 'home' %}",
            type:'post',
            headers:{
                "X-CSRFToken":$.cookie('csrftoken'), #现在先记住，等学了cookies你就明白了
                contentType:'json',
            },

            data:JSON.stringify({ //如果我们发送的是json数据格式的数据，那么csrf_token就不能直接写在data里面了，没有效果，必须通过csrf的方式3的形式来写，写在hearders（请求头，可以写一些自定制的请求头）里面，注意，其实contentType也是headers里面的一部分，写在里面外面都可以
                name:name,
                //csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val()，

            }),
            success:function (response) {

            }

        })

　例：

用户名:<input type="text" name="username" id="username">

头像:<input type="file" name="avatar" id="avatar">
<button id="ajax_btn">上传</button>


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

        var uname = $('#username').val();
        var file_obj = $('#avatar')[0].files[0];

        var formdata = new FormData();
        formdata.append('username',uname);
        formdata.append('csrfmiddlewaretoken','{{ csrf_token }}');
        formdata.append('avatar',file_obj);


        $.ajax({
            url:'/login/',
            type:'post',
            data:formdata,
            processData: false ,    // 不处理数据
            contentType: false,    // 不设置内容类型
            success:function (res) {
                console.log(res);
            }
        })
    })

视图代码

def login(request):
    if request.method == 'GET':
        return render(request, 'login.html')
    else:
        # print(request.POST)
        # print(request.FILES)
        file_obj = request.FILES.get('avatar')
        print(file_obj)
        name = file_obj.name
        print(name)
        # with open(fr'C:\Users\oldboy\Desktop\Pointofix\{name}', 'wb') as f:
        print(type(file_obj))
        with open(name, 'wb') as f:
			# 方式1
            # for i in file_obj:  # \r\n
			# 方式2
            # for i in file_obj.chunks():  # \r\n
            for i in file_obj.chunks():  # \r\n  读取65536B
                f.write(i)


        return HttpResponse('ok')

posted @ 2020-09-23 19:16 liyaaa 阅读(448) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

liyaaa