angular security course

Author: Your Name

csrf/csrf-page.html

@@ -15,7 +15,6 @@ <h1>GOTCHA!!!</h1>
 
 <script>
 
-    document.cookie = 'XSRF-TOKEN=12233';
 
     setTimeout(function() {
         document.getElementById("csrf-form").submit();

server/create-user.route.ts

@@ -35,7 +35,7 @@ async function createUserAndSession(res:Response, credentials) {
 
     const sessionToken = await createSessionToken(user.id.toString());
 
-    const csrfToken = await createCsrfToken(sessionToken);
+    const csrfToken = await createCsrfToken();
 
     res.cookie("SESSIONID", sessionToken, {httpOnly:true, secure:true});
 

server/csrf.middleware.ts

@@ -0,0 +1,25 @@
+
+
+
+import {Request, Response, NextFunction} from 'express';
+
+
+
+export function checkCsrfToken(req: Request,  res: Response,  next: NextFunction) {
+
+    const csrfCookie = req.cookies["XSRF-TOKEN"];
+
+    const csrfHeader = req.headers['x-xsrf-token'];
+
+    const sessionToken = req.cookies["SESSIONID"];
+
+    if (csrfCookie && csrfHeader && csrfCookie === csrfHeader) {
+        next();
+    }
+    else {
+        res.sendStatus(403);
+    }
+
+
+}
+

server/security.utils.ts

@@ -39,8 +39,8 @@ export async function decodeJwt(token:string) {
     return payload;
 }
 
-export async function createCsrfToken(sessionToken:string) {
-    return argon2.hash(sessionToken);
+export async function createCsrfToken() {
+    return await randomBytes(32).then(bytes => bytes.toString("hex"));
 }
 
 

server/server.ts

@@ -11,6 +11,7 @@ import {logout} from "./logout.route";
 import {login} from "./login.route";
 import {retrieveUserIdFromRequest} from "./get-user.middleware";
 import {checkIfAuthenticated} from "./auth.middleware";
+import {checkCsrfToken} from "./csrf.middleware";
 const bodyParser = require('body-parser');
 const cookieParser = require('cookie-parser');
 
@@ -41,7 +42,7 @@ app.route('/api/user')
     .get(getUser);
 
 app.route('/api/logout')
-    .post(checkIfAuthenticated, logout);
+    .post(checkIfAuthenticated, checkCsrfToken, logout);
 
 app.route('/api/login')
     .post(login);

src/app/app.module.ts

@@ -1,6 +1,6 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-import {HttpClientModule} from '@angular/common/http';
+import {HttpClientModule, HttpClientXsrfModule} from '@angular/common/http';
 
 import { AppComponent } from './app.component';
 import { LessonsComponent } from './lessons/lessons.component';
@@ -33,6 +33,10 @@ import 'rxjs/add/observable/of';
   imports: [
     BrowserModule,
       HttpClientModule,
+      HttpClientXsrfModule.withOptions({
+         cookieName: 'XSRF-TOKEN',
+         headerName:  'x-xsrf-token'
+      }),
       RouterModule.forRoot(routesConfig),
       ReactiveFormsModule
   ],

src/app/login/login.component.ts

@@ -21,8 +21,8 @@ export class LoginComponent implements OnInit {
     constructor(private fb:FormBuilder, private authService: AuthService, private router: Router) {
 
         this.form = this.fb.group({
-            email: ['',Validators.required],
-            password: ['',Validators.required]
+            email: ['test@gmail.com',Validators.required],
+            password: ['Password10',Validators.required]
         });
 
     }

src/app/signup/signup.component.ts

@@ -25,9 +25,9 @@ export class SignupComponent implements OnInit {
     constructor(private fb: FormBuilder, private authService: AuthService,
                     private router:Router) {
         this.form = this.fb.group({
-            email: ['',Validators.required],
-            password: ['',Validators.required],
-            confirm: ['',Validators.required]
+            email: ['test@gmail.com',Validators.required],
+            password: ['Password10',Validators.required],
+            confirm: ['Password10',Validators.required]
         });
     }