Fixed authentification for cross origin (#528)

cvat/apps/authentication/urls.py

@@ -15,6 +15,7 @@ urlpatterns = [
         template_name='login.html', extra_context={'note': settings.AUTH_LOGIN_NOTE}),
         name='login'),
     path('logout', auth_views.LogoutView.as_view(next_page='login'), name='logout'),
+    path('csrf', views.get_csrf, name='csrf')
 ]
 
 if settings.DJANGO_AUTH_TYPE == 'BASIC':

cvat/apps/authentication/views.py

@@ -5,11 +5,12 @@
 
 from django.shortcuts import render, redirect
 from django.conf import settings
+from django.http import JsonResponse
 from django.contrib.auth import login, authenticate
+from django.middleware.csrf import get_token
 
 from . import forms
 
-
 def register_user(request):
     if request.method == 'POST':
         form = forms.NewUserForm(request.POST)
@@ -23,3 +24,7 @@ def register_user(request):
     else:
         form = forms.NewUserForm()
     return render(request, 'register.html', {'form': form})
+
+
+def get_csrf(request):
+    return JsonResponse({'csrf': get_token(request)})

cvat/settings/development.py

@@ -16,6 +16,11 @@ MIDDLEWARE += [
     'corsheaders.middleware.CorsMiddleware',
 ]
 
+CORS_ALLOW_CREDENTIALS = True
+
+CSRF_TRUSTED_ORIGINS = [
+    'http://localhost:3000'
+]
 CORS_ORIGIN_WHITELIST = [
     "http://localhost:3000",
 ]

cvatjs/src/server-proxy.js

@@ -19,6 +19,9 @@
                 Axios.defaults.headers.patch['X-CSRFToken'] = header;
                 Axios.defaults.headers.post['X-CSRFToken'] = header;
                 Axios.defaults.headers.put['X-CSRFToken'] = header;
+
+                // Allows to move authentification headers to backend
+                Axios.defaults.withCredentials = true;
             }
 
             async function about() {
@@ -98,7 +101,12 @@
                         Axios.defaults.headers.common.Cookie = cookies;
                     } else {
                         // Browser code. We need set additinal header for authentification
-                        const csrftoken = Cookie.get('csrftoken');
+                        let csrftoken = response.data.csrf;
+                        if (csrftoken) {
+                            setCSRFHeader(csrftoken);
+                            Cookie.set('csrftoken', csrftoken);
+                        } else {
+                            csrftoken = Cookie.get('csrftoken');
                             if (csrftoken) {
                                 setCSRFHeader(csrftoken);
                             } else {
@@ -109,11 +117,12 @@
                             }
                         }
                     }
+                }
 
                 const host = window.cvat.config.backendAPI.slice(0, -7);
                 let csrf = null;
                 try {
-                    csrf = await Axios.get(`${host}/auth/login`, {
+                    csrf = await Axios.get(`${host}/auth/csrf`, {
                         proxy: window.cvat.config.proxy,
                     });
                 } catch (errorData) {