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,14 +101,20 @@
                         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 {
-                            throw new window.cvat.exceptions.ScriptingError(
+                            csrftoken = Cookie.get('csrftoken');
-                                'An environment has been detected as a browser'
+                            if (csrftoken) {
-                                + ', but CSRF token has not been found in cookies',
+                                setCSRFHeader(csrftoken);
-                            );
+                            } else {
+                                throw new window.cvat.exceptions.ScriptingError(
+                                    'An environment has been detected as a browser'
+                                    + ', but CSRF token has not been found in cookies',
+                                );
+                            }
                         }
                     }
                 }
@@ -113,7 +122,7 @@
                 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) {