make a call to ensure a correct XSRF token before performing any non-GET requests

Author: artlowel

src/app/access-control/group-registry/group-form/group-form.component.spec.ts

@@ -23,6 +23,7 @@ import { DSpaceObject } from '../../../core/shared/dspace-object.model';
 import { HALEndpointService } from '../../../core/shared/hal-endpoint.service';
 import { PageInfo } from '../../../core/shared/page-info.model';
 import { UUIDService } from '../../../core/shared/uuid.service';
+import { XSRFService } from '../../../core/xsrf/xsrf.service';
 import { FormBuilderService } from '../../../shared/form/builder/form-builder.service';
 import { NotificationsService } from '../../../shared/notifications/notifications.service';
 import { GroupMock, GroupMock2 } from '../../../shared/testing/group-mock';
@@ -211,6 +212,7 @@ describe('GroupFormComponent', () => {
         { provide: HttpClient, useValue: {} },
         { provide: ObjectCacheService, useValue: {} },
         { provide: UUIDService, useValue: {} },
+        { provide: XSRFService, useValue: {} },
         { provide: Store, useValue: {} },
         { provide: RemoteDataBuildService, useValue: {} },
         { provide: HALEndpointService, useValue: {} },

src/app/core/data/request.service.spec.ts

@@ -1,13 +1,14 @@
 import { Store, StoreModule } from '@ngrx/store';
 import { cold, getTestScheduler } from 'jasmine-marbles';
-import { EMPTY, Observable, of as observableOf } from 'rxjs';
+import { BehaviorSubject, EMPTY, Observable, of as observableOf } from 'rxjs';
 import { TestScheduler } from 'rxjs/testing';
 
 import { getMockObjectCacheService } from '../../shared/mocks/object-cache.service.mock';
 import { defaultUUID, getMockUUIDService } from '../../shared/mocks/uuid.service.mock';
 import { ObjectCacheService } from '../cache/object-cache.service';
 import { coreReducers} from '../core.reducers';
 import { UUIDService } from '../shared/uuid.service';
+import { XSRFService } from '../xsrf/xsrf.service';
 import { RequestConfigureAction, RequestExecuteAction, RequestStaleAction } from './request.actions';
 import {
   DeleteRequest,
@@ -35,6 +36,7 @@ describe('RequestService', () => {
   let uuidService: UUIDService;
   let store: Store<CoreState>;
   let mockStore: MockStore<CoreState>;
+  let xsrfService: XSRFService;
 
   const testUUID = '5f2a0d2a-effa-4d54-bd54-5663b960f9eb';
   const testHref = 'https://rest.api/endpoint/selfLink';
@@ -80,10 +82,15 @@ describe('RequestService', () => {
     store = TestBed.inject(Store);
     mockStore = store as MockStore<CoreState>;
     mockStore.setState(initialState);
+    xsrfService = {
+      tokenInitialized$: new BehaviorSubject(false),
+    } as XSRFService;
+
     service = new RequestService(
       objectCache,
       uuidService,
       store,
+      xsrfService,
       undefined
     );
     serviceAsAny = service as any;

src/app/core/data/request.service.ts

@@ -11,6 +11,7 @@ import { ObjectCacheService } from '../cache/object-cache.service';
 import { IndexState, MetaIndexState } from '../index/index.reducer';
 import { requestIndexSelector, getUrlWithoutEmbedParams } from '../index/index.selectors';
 import { UUIDService } from '../shared/uuid.service';
+import { XSRFService } from '../xsrf/xsrf.service';
 import {
   RequestConfigureAction,
   RequestExecuteAction,
@@ -137,6 +138,7 @@ export class RequestService {
   constructor(private objectCache: ObjectCacheService,
               private uuidService: UUIDService,
               private store: Store<CoreState>,
+              protected xsrfService: XSRFService,
               private indexStore: Store<MetaIndexState>) {
   }
 
@@ -419,7 +421,17 @@ export class RequestService {
    */
   private dispatchRequest(request: RestRequest) {
     this.store.dispatch(new RequestConfigureAction(request));
-    this.store.dispatch(new RequestExecuteAction(request.uuid));
+    // If it's a GET request, or we have an XSRF token, dispatch it immediately
+    if (request.method === RestRequestMethod.GET || this.xsrfService.tokenInitialized$.getValue() === true) {
+      this.store.dispatch(new RequestExecuteAction(request.uuid));
+    } else {
+      // Otherwise wait for the XSRF token first
+      this.xsrfService.tokenInitialized$.pipe(
+        find((hasInitialized: boolean) => hasInitialized === true),
+      ).subscribe(() => {
+        this.store.dispatch(new RequestExecuteAction(request.uuid));
+      });
+    }
   }
 
   /**

src/app/core/xsrf/browser-xsrf.service.spec.ts

@@ -0,0 +1,64 @@
+import { BrowserXSRFService } from './browser-xsrf.service';
+import { HttpClient } from '@angular/common/http';
+import { RESTURLCombiner } from '../url-combiner/rest-url-combiner';
+import { TestBed } from '@angular/core/testing';
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+
+describe(`BrowserXSRFService`, () => {
+  let service: BrowserXSRFService;
+  let httpClient: HttpClient;
+  let httpTestingController: HttpTestingController;
+
+  const endpointURL = new RESTURLCombiner('/security/csrf').toString();
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [ HttpClientTestingModule ],
+      providers: [ BrowserXSRFService ]
+    });
+    httpClient = TestBed.inject(HttpClient);
+    httpTestingController = TestBed.inject(HttpTestingController);
+    service = TestBed.inject(BrowserXSRFService);
+  });
+
+  describe(`initXSRFToken`, () => {
+    it(`should perform a POST to the csrf endpoint`, () => {
+      service.initXSRFToken(httpClient)();
+
+      const req = httpTestingController.expectOne({
+        url: endpointURL,
+        method: 'POST'
+      });
+
+      req.flush({});
+      httpTestingController.verify();
+    });
+
+    describe(`when the POST succeeds`, () => {
+      it(`should set tokenInitialized$ to true`, () => {
+        service.initXSRFToken(httpClient)();
+
+        const req = httpTestingController.expectOne(endpointURL);
+
+        req.flush({});
+        httpTestingController.verify();
+
+        expect(service.tokenInitialized$.getValue()).toBeTrue();
+      });
+    });
+
+    describe(`when the POST fails`, () => {
+      it(`should set tokenInitialized$ to true`, () => {
+        service.initXSRFToken(httpClient)();
+
+        const req = httpTestingController.expectOne(endpointURL);
+
+        req.error(new ErrorEvent('415'));
+        httpTestingController.verify();
+
+        expect(service.tokenInitialized$.getValue()).toBeTrue();
+      });
+    });
+
+  });
+});

src/app/core/xsrf/browser-xsrf.service.ts

@@ -0,0 +1,26 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { RESTURLCombiner } from '../url-combiner/rest-url-combiner';
+import { take, catchError } from 'rxjs/operators';
+import { of as observableOf } from 'rxjs';
+import { XSRFService } from './xsrf.service';
+
+@Injectable()
+export class BrowserXSRFService extends XSRFService {
+  initXSRFToken(httpClient: HttpClient): () => Promise<any> {
+    return () => new Promise((resolve) => {
+      httpClient.post(new RESTURLCombiner('/security/csrf').toString(), undefined).pipe(
+        // errors are to be expected if the token and the cookie don't match, that's what we're
+        // trying to fix for future requests, so just emit any observable to end up in the
+        // subscribe
+        catchError(() => observableOf(null)),
+        take(1),
+      ).subscribe(() => {
+        this.tokenInitialized$.next(true);
+      });
+
+      // return immediately, the rest of the app doesn't need to wait for this to finish
+      resolve();
+    });
+  }
+}

src/app/core/xsrf/server-xsrf.service.spec.ts

@@ -0,0 +1,32 @@
+import { ServerXSRFService } from './server-xsrf.service';
+import { HttpClient } from '@angular/common/http';
+
+describe(`ServerXSRFService`, () => {
+  let service: ServerXSRFService;
+  let httpClient: HttpClient;
+
+  beforeEach(() => {
+    httpClient = jasmine.createSpyObj(['post', 'get', 'request']);
+    service = new ServerXSRFService();
+  });
+
+  describe(`initXSRFToken`, () => {
+    it(`shouldn't perform any requests`, (done: DoneFn) => {
+      service.initXSRFToken(httpClient)().then(() => {
+        for (const prop in httpClient) {
+          if (httpClient.hasOwnProperty(prop)) {
+            expect(httpClient[prop]).not.toHaveBeenCalled();
+          }
+        }
+        done();
+      });
+    });
+
+    it(`should leave tokenInitialized$ on false`, (done: DoneFn) => {
+      service.initXSRFToken(httpClient)().then(() => {
+        expect(service.tokenInitialized$.getValue()).toBeFalse();
+        done();
+      });
+    });
+  });
+});

src/app/core/xsrf/server-xsrf.service.ts

@@ -0,0 +1,14 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { XSRFService } from './xsrf.service';
+
+@Injectable()
+export class ServerXSRFService extends XSRFService {
+  initXSRFToken(httpClient: HttpClient): () => Promise<any> {
+    return () => new Promise((resolve) => {
+      // return immediately, and keep tokenInitialized$ false. The server side can make only GET
+      // requests, since it can never get a valid XSRF cookie
+      resolve();
+    });
+  }
+}

src/app/core/xsrf/xsrf.service.spec.ts

@@ -0,0 +1,20 @@
+import { XSRFService } from './xsrf.service';
+import { HttpClient } from '@angular/common/http';
+
+class XSRFServiceImpl extends XSRFService {
+  initXSRFToken(httpClient: HttpClient): () => Promise<any> {
+    return () => null;
+  }
+}
+
+describe(`XSRFService`, () => {
+  let service: XSRFService;
+
+  beforeEach(() => {
+    service = new XSRFServiceImpl();
+  });
+
+  it(`should start with tokenInitialized$.hasValue() === false`, () => {
+    expect(service.tokenInitialized$.getValue()).toBeFalse();
+  });
+});

src/app/core/xsrf/xsrf.service.ts

@@ -0,0 +1,10 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+
+@Injectable()
+export abstract class XSRFService {
+  public tokenInitialized$: BehaviorSubject<boolean> = new BehaviorSubject(false);
+
+  abstract initXSRFToken(httpClient: HttpClient): () => Promise<any>;
+}

src/modules/app/browser-app.module.ts

@@ -1,5 +1,5 @@
 import { HttpClient, HttpClientModule } from '@angular/common/http';
-import { NgModule } from '@angular/core';
+import { APP_INITIALIZER, NgModule } from '@angular/core';
 import { BrowserModule, BrowserTransferStateModule, makeStateKey, TransferState } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { REQUEST } from '@nguniversal/express-engine/tokens';
@@ -32,6 +32,8 @@ import { AuthRequestService } from '../../app/core/auth/auth-request.service';
 import { BrowserAuthRequestService } from '../../app/core/auth/browser-auth-request.service';
 import { BrowserInitService } from './browser-init.service';
 import { ReferrerService } from '../../app/core/services/referrer.service';
+import { BrowserXSRFService } from '../../app/core/xsrf/browser-xsrf.service';
+import { XSRFService } from '../../app/core/xsrf/xsrf.service';
 import { BrowserReferrerService } from '../../app/core/services/browser.referrer.service';
 
 export const REQ_KEY = makeStateKey<string>('req');
@@ -73,6 +75,16 @@ export function getRequest(transferState: TransferState): any {
       useFactory: getRequest,
       deps: [TransferState]
     },
+    {
+      provide: APP_INITIALIZER,
+      useFactory: (xsrfService: XSRFService, httpClient: HttpClient) => xsrfService.initXSRFToken(httpClient),
+      deps: [ XSRFService, HttpClient ],
+      multi: true,
+    },
+    {
+      provide: XSRFService,
+      useClass: BrowserXSRFService,
+    },
     {
       provide: AuthService,
       useClass: AuthService