Add CSRF token route

Author: XanderVertegaal

backend/langpro_annotator/settings.py

@@ -24,15 +24,17 @@
 # SECURITY WARNING: don't run with debug turned on in production!
 DEBUG = int(os.getenv("DJANGO_DEBUG", 0)) == 1
 
+# CSRF trusted origins for cross-origin requests
+CSRF_TRUSTED_ORIGINS = []
+
 ALLOWED_HOSTS = ["la-backend"]
+
 if DEBUG:
     ALLOWED_HOSTS.append("localhost")
-
-# CSRF trusted origins for cross-origin requests
-CSRF_TRUSTED_ORIGINS = [
-    "http://localhost:5000",
-    "http://127.0.0.1:5000",
-]
+    CSRF_TRUSTED_ORIGINS.extend([
+        "http://localhost:5000",
+        "http://127.0.0.1:5000",
+    ])
 
 # Application definition
 

backend/langpro_annotator/urls.py

@@ -22,6 +22,7 @@
 from rest_framework import routers
 
 from annotation.views import LabelAnnotationView
+from langpro_annotator.views import csrf_token
 from problem.views.problem import ProblemView
 
 from .index import index
@@ -53,6 +54,7 @@
         ),
     ),
     path("api/i18n/", i18n),
+    path("api/csrf", csrf_token),
     path("users/", include("user.urls")),
     # spa_url,  # catch-all; unknown paths to be handled by a SPA
 ]

backend/langpro_annotator/views.py

@@ -0,0 +1,6 @@
+from django.views.decorators.csrf import ensure_csrf_cookie
+from django.http import JsonResponse
+
+@ensure_csrf_cookie
+def csrf_token(request):
+    return JsonResponse({"detail": "CSRF cookie set"})

frontend/src/app/app.component.ts

@@ -1,43 +1,51 @@
-import { Component, Inject, afterRender } from "@angular/core";
-import { DOCUMENT } from "@angular/common";
-import { RouterOutlet } from "@angular/router";
-import { MenuComponent } from "./menu/menu.component";
-import { FooterComponent } from "./footer/footer.component";
-import { DarkModeService } from "./services/dark-mode.service";
-import { ToastContainerComponent } from "./toast-container/toast-container.component";
-
-@Component({
-    selector: "la-root",
-    standalone: true,
-    imports: [
-        RouterOutlet,
-        MenuComponent,
-        FooterComponent,
-        ToastContainerComponent,
-    ],
-    templateUrl: "./app.component.html",
-    styleUrl: "./app.component.scss",
-})
-export class AppComponent {
-    title = "LangPro Annotator";
-
-    constructor(
-        @Inject(DOCUMENT) private document: Document,
-        private darkModeService: DarkModeService
-    ) {
-        // Using the DOM API to only render on the browser instead of on the server
-        afterRender(() => {
-            const style = this.document.createElement("link");
-            style.rel = "stylesheet";
-            this.document.head.append(style);
-
-            this.darkModeService.theme$.subscribe((theme) => {
-                this.document.documentElement.setAttribute(
-                    "data-bs-theme",
-                    theme
-                );
-                style.href = `${theme}.css`;
-            });
-        });
-    }
-}
+import { Component, DestroyRef, Inject, afterRender, inject } from "@angular/core";
+import { DOCUMENT } from "@angular/common";
+import { RouterOutlet } from "@angular/router";
+import { MenuComponent } from "./menu/menu.component";
+import { FooterComponent } from "./footer/footer.component";
+import { DarkModeService } from "./services/dark-mode.service";
+import { ToastContainerComponent } from "./toast-container/toast-container.component";
+import { HttpClient } from "@angular/common/http";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+
+@Component({
+    selector: "la-root",
+    standalone: true,
+    imports: [
+        RouterOutlet,
+        MenuComponent,
+        FooterComponent,
+        ToastContainerComponent,
+    ],
+    templateUrl: "./app.component.html",
+    styleUrl: "./app.component.scss",
+})
+export class AppComponent {
+    title = "LangPro Annotator";
+    http = inject(HttpClient);
+    destroyRef = inject(DestroyRef);
+
+    constructor(
+        @Inject(DOCUMENT) private document: Document,
+        private darkModeService: DarkModeService
+    ) {
+        // Using the DOM API to only render on the browser instead of on the server
+        afterRender(() => {
+            const style = this.document.createElement("link");
+            style.rel = "stylesheet";
+            this.document.head.append(style);
+
+            this.darkModeService.theme$.subscribe((theme) => {
+                this.document.documentElement.setAttribute(
+                    "data-bs-theme",
+                    theme
+                );
+                style.href = `${theme}.css`;
+            });
+        });
+
+        this.http.get("/api/csrf").pipe(
+            takeUntilDestroyed(this.destroyRef)
+        ).subscribe()
+    }
+}