Devtools CTF

Overview

DevTools CTF is an educational web application that presents cybersecurity challenges solvable exclusively through browser developer tools.

Supported Browsers

• Chrome/Chromium
• Firefox
• Safari
• Edge

Note: Internet Explorer is not supported due to limited developer tools functionality.

Usage (Docker Compose)

Docker

docker build -t devtools-ctf .
docker run -d -p 4000:8080 -e PORT=8080 devtools-ctf

Docker Compose

docker-compose up -d

Access the application at http://localhost:3000

Development

Here is a quick guide to develop more levels

Create a new Page

Create a new .hbs file in pages (e.g. my-level.hbs) *use ! + Tab to generate basic HTML structure, or copy-paste another .hbs file

example for body content in a level:

<div>
  the flag is {{flag}}
</div>

{{flag}} serves as a placeholder for data injection from the server

Create Level Configuration

add to config.ts the following:

export default {
  levels: {
    /* {... Other levels}*/
    myLevel: createLevelConfig('MY_LEVEL', {
      url: 'level-123456',
      flag: createFlag('myFl4G')
    })
  }
}

NOTE: don't copy-paste like an idiot, you might delete other levels by accident.

Create a new Controller

nest g co myLevel controllers --flat

This command will create a new my-level.controller.ts file inside controllers/ directory. --flat means it will not create a my-level/ directory too.

To create a route that displays content, add @Get() to specify your request method, and @Render to specify which page you want to render

import config from '~/config';

const levelConfig = config.levels.myLevel

@Controller(levelConfig.url)
export class MyLevelController {
  @Get()
  @Render('my-level.hbs')
  render() {
    //this defines the variables for my-level.hbs
    return {
      flag: levelConfig.flag,
    };
  }
}

to add more routes just learn nestjs, and put them inside the relevant controller.