Frontend: CSRF support

src-ui/package-lock.json

@@ -8260,6 +8260,14 @@
         "moment": "2.18.1"
       }
     },
+    "ngx-cookie-service": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/ngx-cookie-service/-/ngx-cookie-service-10.1.1.tgz",
+      "integrity": "sha512-HvBrYHdxMN1NvFJGEIF/8EuAg2fjxj8QwqTv9h6qZGqNLU+lUba8Pb2zRPw1YA+gqKkJawOy5dYNeH0kyPyipw==",
+      "requires": {
+        "tslib": "^2.0.0"
+      }
+    },
     "ngx-file-drop": {
       "version": "10.0.0",
       "resolved": "https://registry.npmjs.org/ngx-file-drop/-/ngx-file-drop-10.0.0.tgz",

src-ui/package.json

@@ -23,6 +23,7 @@
     "@ng-bootstrap/ng-bootstrap": "^8.0.0",
     "bootstrap": "^4.5.0",
     "ng-bootstrap": "^1.6.3",
+    "ngx-cookie-service": "^10.1.1",
     "ngx-file-drop": "^10.0.0",
     "ngx-infinite-scroll": "^9.1.0",
     "rxjs": "~6.6.0",

src-ui/src/app/app.module.ts

@@ -39,6 +39,8 @@ import { InfiniteScrollModule } from 'ngx-infinite-scroll';
 import { DateTimeComponent } from './components/common/input/date-time/date-time.component';
 import { TagsComponent } from './components/common/input/tags/tags.component';
 import { SortableDirective } from './directives/sortable.directive';
+import { CookieService } from 'ngx-cookie-service';
+import { CsrfInterceptor } from './interceptors/csrf.interceptor';
 
 @NgModule({
   declarations: [
@@ -85,7 +87,12 @@ import { SortableDirective } from './directives/sortable.directive';
     InfiniteScrollModule
   ],
   providers: [
-    DatePipe
+    DatePipe,
+    CookieService, {
+      provide: HTTP_INTERCEPTORS,
+      useClass: CsrfInterceptor,
+      multi: true
+    }
   ],
   bootstrap: [AppComponent]
 })

src-ui/src/app/interceptors/csrf.interceptor.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { CsrfInterceptor } from './csrf.interceptor';
+
+describe('CsrfInterceptor', () => {
+  beforeEach(() => TestBed.configureTestingModule({
+    providers: [
+      CsrfInterceptor
+      ]
+  }));
+
+  it('should be created', () => {
+    const interceptor: CsrfInterceptor = TestBed.inject(CsrfInterceptor);
+    expect(interceptor).toBeTruthy();
+  });
+});

src-ui/src/app/interceptors/csrf.interceptor.ts

@@ -0,0 +1,30 @@
+import { Injectable } from '@angular/core';
+import {
+  HttpRequest,
+  HttpHandler,
+  HttpEvent,
+  HttpInterceptor
+} from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { CookieService } from 'ngx-cookie-service';
+
+@Injectable()
+export class CsrfInterceptor implements HttpInterceptor {
+
+  constructor(private cookieService: CookieService) {
+
+  }
+
+  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
+    let csrfToken = this.cookieService.get('csrftoken')
+    if (csrfToken) {
+     request = request.clone({
+        setHeaders: {
+          'X-CSRFToken': csrfToken
+        }
+      })
+    }
+
+    return next.handle(request);
+  }
+}