django系列6--Ajax04 请求设置(设置csrf_token)

Posted 2021-02-12 DESOLATE.X

Ajax请求设置csrf_token

　　官方文档 csrf_token: https://docs.djangoproject.com/en/1.11/ref/csrf/

CSRF** 跨站请求攻击，简单地说，是攻击者通过一些技术手段欺骗用户的浏览器去访问一个自己曾经认证过的网站并运行一些操作（如发邮件，发消息，甚至财产操作如转账和购买商品）。由于浏览器曾经认证过，所以被访问的网站会认为是真正的用户操作而去运行。这利用了web中用户身份验证的一个漏洞：简单的身份验证只能保证请求发自某个用户的浏览器，却不能保证请求本身是用户自愿发出的。

　　在用form表单提交时,要在标签内加上{% csrf_token %}参数,而用ajax post方式请求时,也要设置csrf_token.

有三种方式可以设置:

方式1.

{%csrf_token%}在页面打开时是一个隐藏的input标签,通过获取这个标签中的csrfmiddlewaretoken值,放置在data中发送

首先要在html中加入{% csrf_toke %}标签

script部分:

$.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({
  url: "/cookie_ajax/",
  type: "POST",
  headers: {"X-CSRFToken": $.cookie('csrftoken')},  // 从Cookie取csrftoken，并设置到请求头中
  data: {"username": "robertx", "password": 123},
  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);
    }
  }
});

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

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

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

   django.views.decorators.csrf import ensure_csrf_cookie
   
   @ensure_csrf_cookie
   def login(request):
       pass