AJAX¶

While the above method can be used for AJAX POST requests, it has someinconveniences: you have to remember to pass the CSRF token in as POST data withevery POST request. For this reason, there is an alternative method: on eachXMLHttpRequest, set a custom X-CSRFToken header to the value of the CSRFtoken. This is often easier, because many JavaScript frameworks provide hooksthat allow headers to be set on every request.

上面的方法在每個post時，都要將CSRF token作為post資料來傳，不方便，可以設定一個值為CSRFtoken的X-CSRFToken頭，這樣就能一勞永逸。

Acquiring the token is straightforward:

// using jQuery
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');

如果嫌上述函式實現複雜，可以試試下面的實現，區別是，需要引入

JavaScript Cookie：

<script src="https://cdn.jsdelivr.net/npm/[email protected]/src/js.cookie.min.js"></script>

The above code could be simplified by using the JavaScript Cookie library to replace getCookie:

var csrftoken = Cookies.get('csrftoken');

以下描述的是：給ajax設定一個頭的X-CSRFToken屬性，這樣每次發起post時，這個X-CSRFToken屬性會自動加入post的資訊中。

仔細看，可以猜到：beforeSend: function是一個類似callback的函式，每當post發起時，執行這個函式。函式裡的if還做了判斷，如果不是同一個域的請求，就不傳送csrftoken。

Setting the token on the AJAX request¶

Finally, you’ll have to actually set the header on your AJAX request, whileprotecting the CSRF token from being sent to other domains usingsettings.crossDomain in jQuery 1.5.1and newer:

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);
        }
    }
});

說明文件中還介紹了另外一種取csrftoken的方法：將csrftoken明文寫入網頁，在通過jquery取csrftoken值。

Acquiring the token if CSRF_USE_SESSIONS is True¶

If you activate CSRF_USE_SESSIONS, you must include the CSRF tokenin your HTML and read the token from the DOM with JavaScript:

{% csrf_token %}
<script type="text/javascript">
// using jQuery
var csrftoken = jQuery("[name=csrfmiddlewaretoken]").val();
</script>

這裡說的是：如果if CSRF_USE_SESSIONS is True，可以直接從html頁面讀取token的值。而且方法非常簡單。（滿足一般情況）