Add csrf based configurations & http interceptor.

Author: lahiruz

app/controllers/HomeController.java

@@ -26,4 +26,9 @@ public Result appSummary() {
         JsonNode jsonNode = Json.toJson(new AppSummary("Java Play Angular Seed"));
         return ok(jsonNode).as("application/json");
     }
+
+    public Result postTest() {
+        JsonNode jsonNode = Json.toJson(new AppSummary("Post Request Test => Data Sending Success"));
+        return ok(jsonNode).as("application/json");
+    }
 }

conf/application.conf

@@ -246,6 +246,8 @@ play.filters {
   # or body of every form submitted, and also gets placed in the users session.
   # Play then verifies that both tokens are present and match.
   csrf {
+    cookie.name = "Csrf-Token"
+
     # Sets the cookie to be sent only over HTTPS
     #cookie.secure = true
 

conf/routes

@@ -10,3 +10,6 @@ GET     /api/summary                controllers.HomeController.appSummary
 
 # Serve static assets under public directory
 GET     /*file                      controllers.FrontendController.assetOrDefault(file)
+
+# Test post request
+POST    /api/postTest               controllers.HomeController.postTest()

ui/src/app/app.component.css

@@ -0,0 +1,3 @@
+.post-request-test {
+  padding-top: 1rem;
+}

ui/src/app/app.component.html

@@ -21,4 +21,10 @@ <h3>
       </a>
     </h3>
   </div>
+
+  <div class="post-request-test">
+    <h3>Test Post Request</h3>
+    <button (click)="postData()">ClickMe :)</button>
+    <h5>Response: {{postRequestResponse}}</h5>
+  </div>
 </div>

ui/src/app/app.component.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+
 import { AppService } from './app.service';
 
 @Component({
@@ -8,10 +9,20 @@ import { AppService } from './app.service';
 })
 export class AppComponent {
   title: string;
+  postRequestResponse: string;
 
   constructor(private appService: AppService) {
     this.appService.getWelcomeMessage().subscribe((data: any) => {
       this.title = data.content;
     });
   }
+
+  /**
+   * This method is used to test the post request
+   */
+  public postData(): void {
+    this.appService.sendData().subscribe((data: any) => {
+      this.postRequestResponse = data.content;
+    });
+  }
 }

ui/src/app/app.module.ts

@@ -1,27 +1,29 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { HTTP_INTERCEPTORS, HttpClientModule, HttpClientXsrfModule } from '@angular/common/http';
 
 import { AppComponent } from './app.component';
-import { AppService } from './app.service';
-import { HttpClientModule } from '@angular/common/http';
 import { RouteExampleComponent } from './route-example/route-example.component';
 
+import { AppService } from './app.service';
+import { AppHttpInterceptorService } from './http-interceptor.service';
+
 const routes: Routes = [
   {
     path: 'java',
     component: RouteExampleComponent,
-    data: {technology: 'Java'}
+    data: { technology: 'Java' }
   },
   {
     path: 'play',
     component: RouteExampleComponent,
-    data: {technology: 'Play'}
+    data: { technology: 'Play' }
   },
   {
     path: 'angular',
     component: RouteExampleComponent,
-    data: {technology: 'Angular'}
+    data: { technology: 'Angular' }
   },
   {
     path: '**',
@@ -38,9 +40,20 @@ const routes: Routes = [
   imports: [
     BrowserModule,
     HttpClientModule,
+    HttpClientXsrfModule.withOptions({
+      cookieName: 'Csrf-Token',
+      headerName: 'Csrf-Token',
+    }),
     RouterModule.forRoot(routes)
   ],
-  providers: [AppService],
+  providers: [
+    AppService,
+    {
+      multi: true,
+      provide: HTTP_INTERCEPTORS,
+      useClass: AppHttpInterceptorService
+    }
+  ],
   bootstrap: [AppComponent]
 })
 export class AppModule {

ui/src/app/app.service.ts

@@ -1,6 +1,8 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
+
 import { map } from 'rxjs/operators';
+import { Observable } from 'rxjs/index';
 
 /**
  * Class representing application service.
@@ -10,6 +12,7 @@ import { map } from 'rxjs/operators';
 @Injectable()
 export class AppService {
   private serviceUrl = '/api/summary';
+  private dataPostTestUrl = '/api/postTest';
 
   constructor(private http: HttpClient) {
   }
@@ -22,4 +25,11 @@ export class AppService {
       map(response => response)
     );
   }
+
+  /**
+   * Makes a http post request to send some data to backend & get response.
+   */
+  public sendData(): Observable<any> {
+    return this.http.post(this.dataPostTestUrl, {});
+  }
 }

ui/src/app/http-interceptor.service.ts

@@ -0,0 +1,63 @@
+import { HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+
+import { Observable, throwError } from 'rxjs';
+import { catchError } from 'rxjs/operators';
+
+/**
+ * Module class for application http interceptor.
+ * @implements HttpInterceptor
+ * @class AppHttpInterceptorService.
+ */
+@Injectable()
+export class AppHttpInterceptorService implements HttpInterceptor {
+
+  constructor() {
+  }
+
+  public intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+    return next
+      .handle(req)
+      .pipe(catchError(err => {
+        if (err instanceof HttpErrorResponse) {
+          this.onError(err);
+        }
+        return throwError(err);
+      }));
+  }
+
+  /**
+   * Handle http errors.
+   * @param response - ErrorResponse.
+   */
+  private onError(response: HttpErrorResponse): void {
+    const clientErrorMessage = this.handleClientSideError(response.status);
+    if (clientErrorMessage) {
+      // show client side error
+      console.log(clientErrorMessage);
+      return;
+    }
+
+    const serverErrorMessage = this.handleServerError(response.error);
+    if (serverErrorMessage) {
+      // show server error
+      console.log(serverErrorMessage);
+    }
+  }
+
+  private handleClientSideError(status: number): string {
+    switch (status) {
+      case 0:
+        return 'NO INTERNET CONNECTION';
+      case 404:
+        return 'REQUEST FAILURE';
+      default:
+        return;
+    }
+  }
+
+  private handleServerError(errorResponse: any): string {
+    // handle server error
+    return '';
+  }
+}