mid progress, added more levels

Author: MatanelGordon

README.md

@@ -5,3 +5,74 @@ Get familiar with your browser by solving CTF only with your devtools
 ** Supports all common browsers
 
 **Fuck IE don't even try!
+
+# Development
+
+Here is a quick guide to develop more levels
+
+## Creating A new Level
+
+### 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:
+
+```handlebars
+<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:
+
+```typescript
+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
+
+```bash
+$ 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
+
+```typescript
+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.
+

public/styles/index.css

@@ -7,6 +7,10 @@ body{
  color: #e7e7e7;
 }
 
-.gradient1{
+.gradient-1{
  background: linear-gradient(0deg, #e65c00, #f9d423);
 }
+
+.gradient-2{
+ background: linear-gradient(0deg, #d38312, #a83279);;
+}

src/app.module.ts

@@ -1,15 +1,25 @@
+import * as path from 'path';
 import { Module } from '@nestjs/common';
 import { AppController } from './app.controller';
 import { AppService } from './app.service';
-import { LevelsModule } from './levels.module';
 import { ServeStaticModule } from '@nestjs/serve-static';
-import * as path from 'path';
+import { SourcesBasicController } from './controllers/sources-basic.controller';
+import { BasicController } from '~/controllers/basic.controller';
+import { InlineStyleController } from '~/controllers/inline-style.controller';
+import { PreserveLogController } from '~/controllers/preserve-log.controller';
+import { NetworkBasicController } from '~/controllers/network-basic.controller';
 
 @Module({
-controllers: [AppController],
+controllers: [
+AppController,
+BasicController,
+InlineStyleController,
+PreserveLogController,
+NetworkBasicController,
+SourcesBasicController,
+],
 providers: [AppService],
 imports: [
-LevelsModule,
 ServeStaticModule.forRoot({
 serveRoot: '/public',
 rootPath: path.join(__dirname, '..', 'public'),

src/config.ts

@@ -26,6 +26,14 @@ export default {
 url: 'level-ce5ed9ff',
 flag: createFlag('Y0uG0tM3'),
 }),
+networkBasic: createLevelConfig('NETWORK_BASIC', {
+url: 'level-99606d6a',
+flag: createFlag('N3tW0rkB4S1CS'),
+}),
+sourcesBasic: createLevelConfig('SOURCES_BASIC', {
+url: 'level-9ad478b3',
+flag: createFlag('Y0ureAW1zardHarry'),
+}),
 },
 server: {
 port: envWithDefault<number>('PORT', 3000),

src/controllers/index.ts

@@ -0,0 +1,21 @@
+import { Controller, Get, Render } from '@nestjs/common';
+import config from '~/config';
+
+const levelConfig = config.levels.networkBasic;
+const flagRoute = 'flag';
+@Controller(levelConfig.url)
+export class NetworkBasicController {
+@Get()
+@Render('network-basic.hbs')
+render() {
+return {
+flagUrl: `${levelConfig.url}/${flagRoute}`,
+};
+}
+
+@Get(flagRoute)
+getFlag() {
+const flag = levelConfig.flag;
+return { flag };
+}
+}

src/controllers/network-basic.controller.ts

@@ -1,7 +1,8 @@
-import { Controller, Get, Render } from '@nestjs/common';
+import { Controller, Get, Header, HttpCode, Render } from '@nestjs/common';
 import config from '~/config';
 
 const levelConfig = config.levels.preserveLog;
+const flagRoute = 'flag';
 
 @Controller(levelConfig.url)
 export class PreserveLogController {
@@ -10,14 +11,13 @@ export class PreserveLogController {
 render() {
 return {
 flag: levelConfig.flag,
-flagUrl: `${levelConfig.url}/flag`,
+flagUrl: `${levelConfig.url}/${flagRoute}`,
 };
 }
 
-@Get('/flag')
-getFlag() {
-return {
-flag: levelConfig.flag,
-};
-}
+@Get(flagRoute)
+@HttpCode(200)
+@Header('X-Flag', levelConfig.flag)
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+getFlag() {}
 }

src/controllers/preserve-log.controller.ts

@@ -0,0 +1,34 @@
+import {
+Controller,
+Get,
+Header,
+HttpCode,
+HttpStatus,
+Render,
+} from '@nestjs/common';
+import config from '~/config';
+
+const levelConfig = config.levels.sourcesBasic;
+const cssFileName = 'flag-file.css';
+
+@Controller(levelConfig.url)
+export class SourcesBasicController {
+@Get()
+@Render('sources-basic.hbs')
+render() {
+return {
+cssFilePath: `${levelConfig.url}/${cssFileName}`,
+};
+}
+
+@Get(cssFileName)
+@Header('Content-Type', 'text/css; charset=UTF-8')
+getFile() {
+return `
+/* ${levelConfig.flag} */
+body{
+background: crimson;
+}
+`;
+}
+}

src/controllers/sources-basic.controller.ts

@@ -6,11 +6,11 @@
  content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="/public/styles/index.css">
- <title>Document</title>
+ <title>Devtools CTF</title>
 </head>
 <body class="center full-size">
 <!--{{flag}}-->
-<h1 class="gradient-text gradient1">Where is the flag?</h1>
+<h1 class="gradient-text gradient-1">Where is the flag?</h1>
 <span>Press F12 to open devtools</span>
 </body>
 </html>