Skip to content

MatanelGordon/devtools-ctf

Repository files navigation

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.