feat(auth): add dom-based CSRF token (#43)

docker-compose.local.yml

@@ -0,0 +1,25 @@
+version: '3'
+
+services:
+  db:
+    image: postgres
+    environment:
+      POSTGRES_DB: bc
+      POSTGRES_USER: bc
+      POSTGRES_PASSWORD: bc
+    ports:
+      - 5432:5432
+    volumes:
+    - ./pg.sql:/docker-entrypoint-initdb.d/pg.sql
+
+  proxy:
+    image: nginx:1.17.3-alpine
+
+    ports:
+      - 8090:80
+
+    volumes:
+      - ./nginx-config/local.conf:/etc/nginx/conf.d/default.conf
+      - ./public/build:/htdocs
+
+

nginx-config/local.conf

@@ -0,0 +1,19 @@
+
+server {
+    gzip on;
+    listen 80;
+
+    sendfile  off;
+    charset  utf8;
+
+    location / {
+        root /htdocs/;
+        index index.html;
+        try_files $uri /index.html;
+
+        location /api {
+            proxy_pass http://172.17.0.1:3000;
+        }
+    }
+
+}

public/Dockerfile

@@ -6,6 +6,7 @@ COPY package*.json ./
 COPY tsconfig.json ./
 COPY .env ./
 COPY src ./src
+COPY typings ./typings
 COPY public ./public
 COPY vcs ./vcs
 

public/package.json

@@ -9,6 +9,7 @@
     "@testing-library/user-event": "^12.1.10",
     "axios": "^0.21.0",
     "dangerously-set-html-content": "^1.0.8",
+    "get-browser-fingerprint": "^2.0.1",
     "history": "^4.10.1",
     "jest": "^26.6.3",
     "react": "^17.0.1",

public/src/api/httpClient.ts

@@ -63,11 +63,23 @@ export function getLdap(ldapProfileLink: string): Promise<any> {
   });
 }
 
+export function loadDomXsrfToken(fingerprint: string): Promise<string> {
+  const config: AxiosRequestConfig = {
+    url: `${ApiUrl.Auth}/dom-csrf-flow`,
+    method: 'get',
+    headers: { fingerprint }
+  };
+
+  return makeApiRequest(config);
+}
+
 export function loadXsrfToken(): Promise<string> {
-  return makeApiRequest({
+  const config: AxiosRequestConfig = {
     url: `${ApiUrl.Auth}/simple-csrf-flow`,
     method: 'get'
-  });
+  };
+
+  return makeApiRequest(config);
 }
 
 export function postMetadata(): Promise<any> {

public/src/interfaces/User.ts

@@ -3,12 +3,14 @@ export interface LoginUser {
   password: string;
   csrf?: string;
   op?: LoginFormMode;
+  fingerprint?: string;
 }
 
 export enum LoginFormMode {
   BASIC = 'basic',
   HTML = 'html',
-  CSRF = 'csrf'
+  CSRF = 'csrf',
+  DOM_BASED_CSRF = 'csrf_dom'
 }
 
 export interface LoginResponse {

public/src/pages/auth/Login/Login.tsx

@@ -1,7 +1,13 @@
 import { AxiosRequestConfig } from 'axios';
+import getBrowserFingerprint from 'get-browser-fingerprint';
 import React, { FC, FormEvent, useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
-import { getLdap, getUser, loadXsrfToken } from '../../../api/httpClient';
+import {
+  getLdap,
+  getUser,
+  loadDomXsrfToken,
+  loadXsrfToken
+} from '../../../api/httpClient';
 import {
   LoginFormMode,
   LoginResponse,
@@ -78,6 +84,9 @@ export const Login: FC = () => {
     switch (mode) {
       case LoginFormMode.CSRF:
         return { ...data, csrf };
+      case LoginFormMode.DOM_BASED_CSRF:
+        const fingerprint = getBrowserFingerprint();
+        return { ...data, csrf, fingerprint };
       default:
         return data;
     }
@@ -87,12 +96,20 @@ export const Login: FC = () => {
     loadXsrfToken().then((token) => setCsrf(token));
   };
 
+  const loadDomCsrf = (fingerprint: string) => {
+    loadDomXsrfToken(fingerprint).then((token) => setCsrf(token));
+  };
+
   useEffect(() => sendLdap(), [loginResponse]);
   useEffect(() => {
     switch (mode) {
       case LoginFormMode.CSRF: {
         return loadCsrf();
       }
+      case LoginFormMode.DOM_BASED_CSRF: {
+        const fingerprint = getBrowserFingerprint();
+        return loadDomCsrf(fingerprint);
+      }
     }
   }, [mode]);
 
@@ -118,6 +135,9 @@ export const Login: FC = () => {
               <option value={LoginFormMode.CSRF}>
                 Simple CSRF-based Authentication
               </option>
+              <option value={LoginFormMode.DOM_BASED_CSRF}>
+                DOM based CSRF Authentication
+              </option>
             </select>
           </div>
 
@@ -144,9 +164,10 @@ export const Login: FC = () => {
               onInput={onInput}
             />
           </div>
-          {mode === LoginFormMode.CSRF && csrf && (
-            <input name="xsrf" type="hidden" value={csrf} />
-          )}
+
+          {(mode === LoginFormMode.CSRF ||
+            mode === LoginFormMode.DOM_BASED_CSRF) &&
+            csrf && <input name="xsrf" type="hidden" value={csrf} />}
 
           {loginResponse && showLoginResponse(loginResponse)}
           <br />

public/tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "typeRoots": [ "./typings", "./node_modules/@types"],
     "jsx": "react",
     "target": "es5",
     "module": "esnext",

public/typings/get-browser-fingerprint/index.d.ts

@@ -0,0 +1 @@
+declare module 'get-browser-fingerprint';

src/auth/api/login.request.ts

@@ -4,6 +4,7 @@ export enum FormMode {
   BASIC = 'basic',
   HTML = 'html',
   CSRF = 'csrf',
+  DOM_BASED_CSRF = 'csrf_dom',
 }
 
 export class LoginRequest {
@@ -19,4 +20,6 @@ export class LoginRequest {
   op?: string;
 
   csrf?: string;
+
+  fingerprint?: string;
 }

src/auth/auth.controller.ts

@@ -1,15 +1,17 @@
 import {
+  BadRequestException,
   Body,
   Controller,
   Get,
   HttpStatus,
   InternalServerErrorException,
   Logger,
-  Post,
+  Post, Req,
   Res,
   UnauthorizedException,
   UseGuards,
 } from '@nestjs/common';
+import { createHash } from 'crypto';
 import { ApiOperation, ApiResponse, ApiTags } from '@nestjs/swagger';
 import { User } from '../model/user.entity';
 import { LdapQueryHandler } from '../users/ldap.query.handler';
@@ -36,7 +38,7 @@ import { AuthGuard } from './auth.guard';
 import { AuthService, JwtProcessorType } from './auth.service';
 import { passwordMatches } from './credentials.utils';
 import { JwtType } from './jwt/jwt.type.decorator';
-import { FastifyReply } from 'fastify';
+import { FastifyReply, FastifyRequest } from 'fastify';
 import { randomBytes } from 'crypto';
 import { CsrfGuard } from './csrf.guard';
 
@@ -118,9 +120,9 @@ export class AuthController {
     res.header(
       'authorization',
       await this.authService.createToken(
-        { 
+        {
           user: profile.email,
-          exp:  90 + Math.floor(Date.now() / 1000)
+          exp: 90 + Math.floor(Date.now() / 1000),
         },
         JwtProcessorType.RSA,
       ),
@@ -129,6 +131,28 @@ export class AuthController {
     return profile;
   }
 
+  @Get('dom-csrf-flow')
+  async getDomCsrfToken(
+    @Req() request: FastifyRequest,
+    @Res({ passthrough: true }) res: FastifyReply,
+  ): Promise<string> {
+    const fp = request.headers['fingerprint'] as string;
+
+    if (!fp) {
+      throw new BadRequestException('Fingerprint  header is required')
+    }
+    const token = createHash('md5')
+      .update(fp)
+      .digest('hex');
+
+    res.setCookie(this.CSRF_COOKIE_HEADER, token, {
+      httpOnly: true,
+      sameSite: 'strict',
+    });
+
+    return token;
+  }
+
   @Get('simple-csrf-flow')
   async getCsrfToken(
     @Res({ passthrough: true }) res: FastifyReply,

src/auth/csrf.guard.ts

@@ -5,6 +5,7 @@ import {
   ExecutionContext,
   Logger,
 } from '@nestjs/common';
+import { createHash } from 'crypto';
 import { FastifyRequest } from 'fastify';
 import { FormMode, LoginRequest } from './api/login.request';
 
@@ -20,11 +21,22 @@ export class CsrfGuard implements CanActivate {
 
     try {
       const body: LoginRequest = request.body as LoginRequest;
-      if (body?.op === FormMode.CSRF) {
+      const mode = body?.op
+      if ( mode === FormMode.CSRF || mode === FormMode.DOM_BASED_CSRF) {
         const csrfCookie = request.cookies[CsrfGuard.CSRF_COOKIE_HEADER];
+
         if (decodeURIComponent(csrfCookie) !== body.csrf) {
           this.throwError();
         }
+
+        if (mode === FormMode.DOM_BASED_CSRF && !body.fingerprint ) {
+          const fpHash = createHash('md5')
+            .update(body.fingerprint)
+            .digest('hex');
+          if (body.csrf !== fpHash) {
+            this.throwError()
+          }
+        }
       }
 
       return true;