CSRF Failure On AJAX POST Request After Deploy Django Application With Nginx - ajax

Question

I use Nginx and Gunicorn to deploy my Django 2.X blog on VPS.
When i push some data to Django backend via Jquery AJAX, then i got 403 CSRF error. I googled a lot but still can't figure out how to fix this problem. I tried to deploy them on my local computer with same configuration files, and everything is okay.
Firstly, I didn't set CSRF_USE_SESSIONS = True and CSRF_COOKIE_HTTPONLY = True in my Django settings.py . so they are both default value False.
I've copied the AJAX sample code from Django document:
// get csrftoken via JavaScript
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 csrfSafeMethod(method) {
// these HTTP methods do not require CSRF protection
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method))
}
$.ajaxSetup({
beforeSend: (xhr, settings) => {
let $captchaMassage = $('#captcha-message')
let csrftoken = getCookie('csrftoken')
console.debug('csrftoken: ' + csrftoken)
if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
xhr.setRequestHeader("X-CSRFToken", csrftoken)
}
if ($captchaMassage) {
$captchaMassage.text('please wait...')
}
}
})
and this is my AJAX:
$.ajax({
async: true,
method: 'POST',
url: '{% url "captcha_mine_taken_verification" %}',
dataType: 'json',
data: {'coinhive_captcha_token': token},
success: result => {
if (result.success) {
console.debug(result.data)
$captchaMassage.text('thanks to donate')
} else {
$captchaMassage.text('failure reason: ' + result.reason)
}
},
error: () => {
$captchaMassage.text('oh my god, something wrong...')
}
})
this is Request Header from Chrome:
POST /cloudsen_blog/captcha-mine/taken-verification HTTP/1.1
Host: 104.243.15.163
Connection: keep-alive
Content-Length: 55
Accept: application/json, text/javascript, */*; q=0.01
Origin: http://104.243.15.163
X-CSRFToken: null <<<< this always null
X-Requested-With: XMLHttpRequest
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
Referer: http://104.243.15.163/cloudsen_blog/blog/article/5
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.9,en-US;q=0.8,en;q=0.7,zh-TW;q=0.6
this is my Gunicorn config file:
import multiprocessing
# unix domain socket
# bind = 'unix:/home/cloudsen/work/deploy/webservers/sockets/nginx-gunicorn.sock'
# TCP
bind = '127.0.0.1:8000'
workers = multiprocessing.cpu_count() * 2 + 1
worker_class = 'gevent'
errorlog = '/home/cloudsen/work/deploy/webservers/gunicorn/gunicorn.error.log'
accesslog = '/home/cloudsen/work/deploy/webservers/gunicorn/gunicorn.access.log'
proc_name = 'gunicorn_myblog'
this is my Nginx config file:
worker_processes 2;
user cloudsen;
error_log /home/cloudsen/work/deploy/webservers/nginx/error.log warn;
pid /var/run/nginx.pid;
events {
worker_connections 1024;
accept_mutex on;
use epoll;
}
http {
include /etc/nginx/mime.types;
default_type application/octet-stream;
sendfile off;
access_log /home/cloudsen/work/deploy/webservers/nginx/access.log combined;
# Arch Linux start
types_hash_max_size 4096;
server_names_hash_bucket_size 128;
# Arch Linux end
upstream app_server {
#server unix:/home/cloudsen/work/deploy/webservers/sockets/nginx-gunicorn.sock fail_timeout=0;
server 127.0.0.1:8000 fail_timeout=0;
}
server {
listen 80 default_server;
return 444;
}
server {
listen 80;
server_name 104.243.15.163;
client_max_body_size 4G;
keepalive_timeout 5;
location /favicon.ico {
access_log off;
log_not_found off;
}
location /static/ {
alias /home/cloudsen/work/python/project/RedQueen/collected_statics/;
}
location = / {
rewrite ^ /cloudsen_blog;
}
location / {
proxy_pass_header X-CSRFToken;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header Host $http_host;
proxy_set_header Cookie $http_cookie;
proxy_redirect off;
proxy_pass http://app_server;
}
}
}
What's more, when i debug in Chrome, I found that my AJAX didn't send CSRF-TOKEN, and document.cookie always get empty string, so getCookie('csrftoken') always return Null. But i don't know why.
Thanks for help ~~~

Answer 1

Page uses AJAX without any HTML form¶
A page makes a POST request via AJAX, and the page does not have an HTML form with a csrf_token that would cause the required CSRF cookie to be sent.
Solution: use ensure_csrf_cookie() on the view that sends the page.
By use ensure_csrf_cookie() decorator finally solved the problem.
from django.views.decorators.csrf import ensure_csrf_cookie
# use this on your view
#ensure_csrf_cookie
def go_article_detail_page(request: HttpRequest, article_pk: int):
pass
And now, whenever you visit the page, Django will send a csrftoken in document.cookie .