Angular Security course

Author: jhades

csrf/csrf-page.html

@@ -15,7 +15,11 @@ <h1>GOTCHA!!!</h1>
 
 <script>
 
-    document.getElementById("csrf-form").submit();
+    setTimeout(function() {
+        document.getElementById("csrf-form").submit();
+    },2000);
+
+
 
 </script>
 

server/create-user.route.ts

@@ -4,7 +4,7 @@ import {db} from "./database";
 import * as argon2 from 'argon2';
 import {validatePassword} from "./password-validation";
 import moment = require("moment");
-import {createSessionToken} from "./security.utils";
+import {createCsrfToken, createSessionToken, randomBytes} from "./security.utils";
 
 
 
@@ -34,8 +34,12 @@ async function createUserAndSession(res:Response, credentials) {
 
     const sessionToken = await createSessionToken(user.id);
 
+    const csrfToken = await createCsrfToken();
+
     res.cookie("SESSIONID", sessionToken, {httpOnly:true, secure:true});
 
+    res.cookie("CSRF-TOKEN", csrfToken);
+
     res.status(200).json({id:user.id, email:user.email});
 }
 

server/csrf.middleware.ts

@@ -0,0 +1,23 @@
+
+
+
+import {Request, Response, NextFunction} from 'express';
+
+
+
+export function checkCsrfToken(req: Request, res: Response, next: NextFunction) {
+
+    const csrfCookie = req.cookies["CSRF-TOKEN"];
+
+    const csrfHeader = req.headers["x-csrf-token"];
+
+    if (csrfCookie && csrfHeader && csrfCookie === csrfHeader) {
+        next();
+    }
+    else {
+        console.log("Failed CSRF check ...");
+        res.sendStatus(403);
+    }
+
+}
+

server/login.route.ts

@@ -5,7 +5,7 @@ import {db} from "./database";
 import * as argon2 from 'argon2';
 import {User} from "../src/app/model/user";
 import {DbUser} from "./db-user";
-import {createSessionToken, randomBytes} from "./security.utils";
+import {createCsrfToken, createSessionToken, randomBytes} from "./security.utils";
 
 
 
@@ -32,8 +32,12 @@ async function loginAndBuildResponse(credentials:any, user:DbUser,  res: Respons
 
         console.log("Login successful");
 
+        const csrfToken = createCsrfToken();
+
         res.cookie("SESSIONID", sessionToken, {httpOnly:true, secure:true});
 
+        res.cookie("CSRF-TOKEN", csrfToken);
+
         res.status(200).json({id:user.id, email:user.email});
 
 

server/logout.route.ts

@@ -9,6 +9,7 @@ export function logout(req: Request, res: Response) {
     const sessionId = req.cookies['SESSIONID'];
 
     res.clearCookie("SESSIONID");
+    res.clearCookie("CSRF-TOKEN");
 
     res.sendStatus(200);
 }

server/security.utils.ts

@@ -6,6 +6,7 @@ const util = require('util');
 const crypto = require('crypto');
 import * as jwt from 'jsonwebtoken';
 import * as fs from "fs";
+import {Response} from "express";
 
 
 
@@ -18,6 +19,8 @@ const RSA_PUBLIC_KEY = fs.readFileSync('./demos/public.key');
 export const randomBytes = util.promisify(crypto.randomBytes);
 
 
+const SESSION_DURATION = 240;
+
 
 export async function createSessionToken(userId:number) {
     return jwt.sign(
@@ -26,7 +29,7 @@ export async function createSessionToken(userId:number) {
         RSA_PRIVATE_KEY,
         {
             algorithm: 'RS256',
-            expiresIn: 120,
+            expiresIn: SESSION_DURATION,
             subject: '' + userId
         });
 }
@@ -43,8 +46,9 @@ export async function isSessionTokenValid(sessionToken:string) {
 
 
 
-
-
+export async function createCsrfToken() {
+    return randomBytes(32).then(bytes => bytes.toString('hex'));
+}
 
 
 

server/server.ts

@@ -10,6 +10,7 @@ import {getUser} from "./get-user.route";
 import {logout} from "./logout.route";
 import {login} from "./login.route";
 import {checkIfAuthenticated, retrieveUserIdFromRequest} 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: 'CSRF-TOKEN',
+          headerName: 'x-csrf-token',
+      }),
       RouterModule.forRoot(routesConfig),
       ReactiveFormsModule
   ],