Backend - Django CSRF 跨域请求伪造

（3）用户进行 ajax post 请求。post请求时，csrfmiddlewaretoken值会一并放在请求数据（或头信息）中，发送给后端。后端会根据前端csrfmiddlewaretoken的 value值、和服务端数据库 public.django_session 表的 session_csrftoken参数值，判断两个csrf_token解密后的值是否一致。

（4）一致则正常访问，不一致则拒绝访问。

2. 设置验证

在第三点“设定 CSRF 验证”中。

（二）双重 cookie 验证（Double Submit Cookie）

1. 原理

（1）找到浏览器cookie的csrftoken。成功登录网站后，整个浏览器中Cookie的csrftoken属性，存放后端随机生成的csrftoken值。

（2）找到网页模板的隐藏csrfmiddlewaretoken名的标签。初始化某界面时，前端模板会根据{% csrf_token %}生成一个隐藏的 name='csrfmiddlewaretoken' 的input标签，存放后端随机生成的csrftoken值。

（3）用户进行 ajax post 请求。post请求时，csrfmiddlewaretoken值会一并放在请求数据（或头信息）中，发送给后端。后端会根据前端csrfmiddlewaretoken的 value值、和浏览器Cookie的csrftoken值，判断两个csrf_token解密后的值是否一致。

（4）一致则正常访问，不一致则拒绝访问。

2. 设置验证

在第三点“设定 CSRF 验证”中。

（三）X-Csrf-Token 验证（Cookie-to-header token）

1. 原理

（1）确保同源政策。

（2）系统主要使用 JavaScript 进行交互。（因为恶意攻击无法读取 cookie 值，并复制到 HTTP 请求头中）

（3）将 cookie 上的 token 复制到 HTTP 请求头中。

（4）后端验证 HTTP 请求头中 token 的存在和完整性。

（5）X-Csrf-Token 头存在且完整，则正常访问，否则拒绝访问。

2. 设置验证

在第三点“设定 CSRF 验证”中。

三、设定 CSRF 验证

以下主要针对基于 django 使用 ajax 发送 post 请求时的验证。

（一）settings.py

MIDDLEWARE 里添加 'django.middleware.csrf.CsrfViewMiddleware' # 设置CSRF检测功能

（二）base.html

1. 针对 ajax 请求，body 里添加{% csrf_token %}

例如：

<body id="body">
    {% csrf_token %}
    <div>{% block content %} {% endblock %}</div>
</body>

渲染后：

<body id="body">
    <input type="hidden" name="csrfmiddlewaretoken" value="vUAPUcghecxAGlraGaFGbikXz3SOPcWtmMtk8o1UQ1PpYYAhxg2cAiAaLyQ9HEY9" />
    <div>插入的子模板</div>
</body>

2. 针对 form 表单，form 表单里添加{% csrf_token %}

因为若在 base.html 中加入 {% csrf_token %}，则不在 form 表单的范围内。所以需要在 form 表单里添加。

例如：

<form action="http://127.0.0.1:8080/myApp/test" method=POST>
	{% csrf_token %}
	<input type="submit"/>
</form>

（三）JS

采取以下任意一种验证即可。

1. 针对双重cookie验证

（1）方法1

后端将 csrftoken 传到前端（放置在隐藏标签里），发送 post 请求时，请求数据 data 中加上csrftoken，一起发送给后端。

在 base.html 中的 script 里写上。

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

（2）方法2

后端将 csrftoken 传到前端（放置在隐藏标签里），发送 post 请求时，请求数据 data 中加上csrftoken。

在 base.html 中的 script 里写上。

$.ajaxSetup({
    data: {csrfmiddlewaretoken: $('[name="csrfmiddlewaretoken"]').val()},
});

2. 针对 X-Csrf-Token验证（Cookie-to-header token）

（1）方法1

cookie 中存在 csrftoken，请求头 headers 中加上 csrftoken。

在 base.html 中的 script 里写上。

前提：

① 引入 jquery-3.1.1.min.js 和 jquery.cookie.js。

② 引入顺序：jQuery 库文件必须先于 cookie 文件。

$.ajaxSetup({
    headers:{ "X-CSRFtoken":$.cookie("csrftoken")},
});

3. 针对所有模式的综合验证

（1）写入位置

前面两个验证的所有方法只能写在html中，不能写到外部js文件。因为 {{ csrf_token }} 渲染在模板上，若以外部文件引入，则不能执行。

以下代码可以写在外部js文件里，并在 base.html 里引入该js文件。

（2）引入顺序

该 js 文件的引入顺序必须在 jquery.js 文件之后。

/**
 * 【 Cross Site Request Forgery TOKEN 】
 *  Forbidden 403 - CSRF check with an AJAX POST request in Django.
 */
jQuery(document).ajaxSend(function (event, xhr, settings) {
    function getCookie(name) {
        let cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            let cookies = document.cookie.split(';');
            for (let i = 0; i < cookies.length; i++) {
                let 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;
    }
    function sameOrigin(url) {
        // url could be relative or scheme relative or absolute
        let host = document.location.host; // host + port
        let protocol = document.location.protocol;
        let sr_origin = '//' + host;
        let origin = protocol + sr_origin;
        // Allow absolute or scheme relative URLs to same origin
        return (url === origin || url.slice(0, origin.length + 1) === origin + '/') ||
            (url === sr_origin || url.slice(0, sr_origin.length + 1) === sr_origin + '/') ||
            // or any other URL that isn't scheme relative or absolute i.e relative.
            !(/^(\/\/|http:|https:).*/.test(url));
    }
    function safeMethod(method) {
        return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
    }
    if (!safeMethod(settings.type) && sameOrigin(settings.url)) {
        xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
    }
});