3 | 
5 |
6 |
7 | Open source self-hosted cyber security learning platform
8 |
9 | ## About The Project
10 | 
11 |
12 | HaccTheHub is an open source project that provides cyber security
13 |
14 | The HaccTheHub system consists of 3 main parts:
15 | * Docker: containing all of the boxes creating the environment in which we'll be learning on.
16 | * The backend: controlling Docker and responsible for starting/destroying indivisual box in the system and managing the networking that joins them into a unified system.
17 | * The frontend: GUI for the user to interact with the system via their web browser.
18 | ### Built With
19 | * [Flask-RESTX](https://github.com/python-restx/flask-restx)
20 | * [Next.js](https://nextjs.org/)
21 |
22 | ## Getting Started
23 |
24 | To get HaccTheHub up and running, you would need to setup the followings
25 |
26 | ### Prerequisites
27 |
28 | * Docker (refer to [Docker's Documentation](https://docs.docker.com/get-docker/) for setup)
29 | * Python 3 ([Download](https://www.python.org/downloads/)) or just install `python3` from your package manager.
30 | * Node.js 16 ([Download](https://nodejs.org/en/download/)) or use your [package manager](https://nodejs.org/en/download/package-manager/)
31 |
32 |
33 | ### Installation
34 | 1. Clone the repo
35 | ```sh
36 | git clone https://github.com/J4FSec/HaccTheHub.git
37 | ```
38 | 2. Install dependencies for the backend
39 | ```sh
40 | cd HaccTheHub/backend
41 | python3 -m pip install -r requirements.txt
42 | ```
43 | 3. And dependencies for the frontend
44 | ```sh
45 | cd ../client
46 | npm install
47 | ```
48 |
49 | ## Usage
50 | 1. Start up Docker
51 | 2. Start the backend
52 | ```sh
53 | cd ../backend
54 | python3 main.py
55 | ```
56 | 3. And the frontend
57 | ```
58 | cd ../client
59 | npm start
60 | ```
61 |
62 | The WebUI should now be accessible via http://localhost:8080.
63 |
64 | ## Contributing
65 | Any contributions are **much appreciated**. If you have a suggestion, please fork the repo and create a pull request. You can also open an issue with the tag `enhancement`.
66 |
67 | 1. Fork the project
68 | 2. Create a new branch for the new feature (`git checkout -b feature/EpicFeature`)
69 | 3. Commit your changes (`git commit -m "Add EpicFeature"`)
70 | 4. Push to the branch (`git push origin feature/EpicFeature`)
71 | 5. Open a pull request.
72 |
73 | ## License
74 | Distributed under the GNU Affero General Public License v3.0. See `LICENSE` for more information.
75 |
76 | ## Authors
77 | * Dong Duong ([@Cu64](https://github.com/Cu64/)) - dongduongdev@gmail.com
78 | * watch-dog-man ([@watch-dog-man](https://github.com/watch-dog-man))
79 |
80 | ## Contributors
81 | * [@Nehozun](https://github.com/Nehozun) - Completely re-made the frontend. We'd be lost without him.
82 |
83 | ## Acknowledgement
84 |
--------------------------------------------------------------------------------
/backend/.gitignore:
--------------------------------------------------------------------------------
1 | # Byte-compiled / optimized / DLL files
2 | __pycache__/
3 | *.py[cod]
4 | *$py.class
5 |
6 | # C extensions
7 | *.so
8 |
9 | # Distribution / packaging
10 | .Python
11 | build/
12 | develop-eggs/
13 | dist/
14 | downloads/
15 | eggs/
16 | .eggs/
17 | lib/
18 | lib64/
19 | parts/
20 | sdist/
21 | var/
22 | wheels/
23 | share/python-wheels/
24 | *.egg-info/
25 | .installed.cfg
26 | *.egg
27 | MANIFEST
28 |
29 | # PyInstaller
30 | # Usually these files are written by a python script from a template
31 | # before PyInstaller builds the exe, so as to inject date/other infos into it.
32 | *.manifest
33 | *.spec
34 |
35 | # Installer logs
36 | pip-log.txt
37 | pip-delete-this-directory.txt
38 |
39 | # Unit test / coverage reports
40 | htmlcov/
41 | .tox/
42 | .nox/
43 | .coverage
44 | .coverage.*
45 | .cache
46 | nosetests.xml
47 | coverage.xml
48 | *.cover
49 | *.py,cover
50 | .hypothesis/
51 | .pytest_cache/
52 | cover/
53 |
54 | # Translations
55 | *.mo
56 | *.pot
57 |
58 | # Django stuff:
59 | *.log
60 | local_settings.py
61 | db.sqlite3
62 | db.sqlite3-journal
63 |
64 | # Flask stuff:
65 | instance/
66 | .webassets-cache
67 |
68 | # Scrapy stuff:
69 | .scrapy
70 |
71 | # Sphinx documentation
72 | docs/_build/
73 |
74 | # PyBuilder
75 | .pybuilder/
76 | target/
77 |
78 | # Jupyter Notebook
79 | .ipynb_checkpoints
80 |
81 | # IPython
82 | profile_default/
83 | ipython_config.py
84 |
85 | # pyenv
86 | # For a library or package, you might want to ignore these files since the code is
87 | # intended to run in multiple environments; otherwise, check them in:
88 | # .python-version
89 |
90 | # pipenv
91 | # According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control.
92 | # However, in case of collaboration, if having platform-specific dependencies or dependencies
93 | # having no cross-platform support, pipenv may install dependencies that don't work, or not
94 | # install all needed dependencies.
95 | #Pipfile.lock
96 |
97 | # PEP 582; used by e.g. github.com/David-OConnor/pyflow
98 | __pypackages__/
99 |
100 | # Celery stuff
101 | celerybeat-schedule
102 | celerybeat.pid
103 |
104 | # SageMath parsed files
105 | *.sage.py
106 |
107 | # Environments
108 | .env
109 | .venv
110 | env/
111 | venv/
112 | ENV/
113 | env.bak/
114 | venv.bak/
115 |
116 | # Spyder project settings
117 | .spyderproject
118 | .spyproject
119 |
120 | # Rope project settings
121 | .ropeproject
122 |
123 | # mkdocs documentation
124 | /site
125 |
126 | # mypy
127 | .mypy_cache/
128 | .dmypy.json
129 | dmypy.json
130 |
131 | # Pyre type checker
132 | .pyre/
133 |
134 | # pytype static type analyzer
135 | .pytype/
136 |
--------------------------------------------------------------------------------
/backend/.vscode/launch.json:
--------------------------------------------------------------------------------
1 | {
2 | // Use IntelliSense to learn about possible attributes.
3 | // Hover to view descriptions of existing attributes.
4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
5 | "version": "0.2.0",
6 | "configurations": [
7 | {
8 | "name": "Python: Flask",
9 | "type": "python",
10 | "request": "launch",
11 | "module": "flask",
12 | "env": { "FLASK_APP": "main.py", "FLASK_ENV": "development" },
13 | "args": ["run", "--no-debugger", "--port", "8000"],
14 | "jinja": true
15 | }
16 | ]
17 | }
18 |
--------------------------------------------------------------------------------
/backend/index.yml:
--------------------------------------------------------------------------------
1 | lessons:
2 | - name: "nmap_basics"
3 | displayname: "Learn nmap Basics"
4 | description: "nmap"
5 | objective: "Gasp the basic of nmap and it's usage"
6 | prerequisites: "Familiar with basic UNIX command line"
7 | boxes:
8 | - "vlos"
9 | - "nmap_target"
10 |
11 | boxes:
12 | - name: "vlos"
13 | displayname: "VL Operating System"
14 | image: "cu64/vlos"
15 | tag: "latest"
16 | ports:
17 | - host: 9020
18 | src: 8080
19 | prot: "tcp"
20 | - host: 9021
21 | src: 5900
22 | prot: "tcp"
23 | - name: "dvwa"
24 | displayname: "Damn Vulnerable Web Application"
25 | image: "vulnerables/web-dvwa"
26 | tag: "latest"
27 | - name: "shellshock"
28 | displayname: "ShellShock (CVE-2014-6271)"
29 | image: "vulnerables/cve-2014-6271"
30 | tag: "latest"
31 | - name: "nmap_target"
32 | displayname: "Nmap Target"
33 | image: "cu64/nmap_target"
34 | tag: "latest"
35 |
--------------------------------------------------------------------------------
/backend/lessons/nmap_basics.md:
--------------------------------------------------------------------------------
1 | ## Lesson 1
2 |
3 | nmap learning
4 |
5 | ### Step 1
6 |
7 | Open up your terminal
8 |
9 | ### Step 2
10 |
11 | Run the command `nmap -T4 -A
5 |
2 |
10 |
4 |
9 |
6 |
8 |
2 |
--------------------------------------------------------------------------------
/client/src/app/boxes/box/box.component.scss:
--------------------------------------------------------------------------------
1 | .box-container {
2 | box-shadow: 0px 6px 8px 2px #ababab;
3 | min-width: 200px;
4 | .box-title {
5 | background: #3b82f6;
6 | padding: 12px 24px;
7 | color: white;
8 | font-size: 18px;
9 | text-align: center;
10 | max-width: 220px;
11 | height: 64px;
12 | display: flex;
13 | align-items: center;
14 | }
15 | .box-function {
16 | button {
17 | display: flex;
18 | align-items: center;
19 | justify-content: center;
20 | border-radius: 50%;
21 | border: 1px solid;
22 | padding: 4px;
23 | }
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/client/src/app/boxes/box/box.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input, OnInit } from '@angular/core';
2 | import { finalize } from 'rxjs';
3 | import { BoxesService } from 'src/app/services/boxes.service';
4 | import { AppStore } from 'src/app/store/app.store';
5 | import { Box, BoxesStore } from 'src/app/store/boxes.store';
6 |
7 | @Component({
8 | selector: 'hth-box',
9 | templateUrl: './box.component.html',
10 | styleUrls: ['./box.component.scss'],
11 | })
12 | export class BoxComponent implements OnInit {
13 | @Input() box!: Box;
14 | isDisabledButtons: boolean = false;
15 | constructor(private boxService: BoxesService, private appStore: AppStore, private boxStore: BoxesStore) {}
16 |
17 | ngOnInit(): void {
18 | this.appStore.openingNetwork$.subscribe(value => this.isDisabledButtons = !value);
19 | }
20 |
21 | downloadBox(): void {
22 | this.appStore.setLoading(true);
23 | this.boxService
24 | .pullBox(this.box.name)
25 | .pipe(
26 | finalize(() => this.appStore.setLoading(false)),
27 | )
28 | .subscribe(() => this.boxStore.fetchBoxes());
29 | }
30 |
31 | startBox(): void {
32 | this.appStore.setLoading(true);
33 | this.boxService
34 | .startBox(this.box.name)
35 | .pipe(
36 | finalize(() => this.appStore.setLoading(false)),
37 | )
38 | .subscribe(() => this.boxStore.fetchBoxes());
39 | }
40 |
41 | deleteBox(): void {
42 | this.appStore.setLoading(true);
43 | this.boxService
44 | .stopBox(this.box.name)
45 | .pipe(
46 | finalize(() => this.appStore.setLoading(false))
47 | )
48 | .subscribe(() => this.boxStore.fetchBoxes());
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/client/src/app/boxes/boxes.component.html:
--------------------------------------------------------------------------------
1 |
3 | {{box.display_name}}
4 |
5 |
6 | 
7 |
8 |
20 |
32 |
33 |
7 | 8 |
9 | Name:
10 | {{box.name}}
11 |
12 |
13 | Status:
14 |
16 | {{box.status}}
17 |
18 |
19 | 20 |
21 |
24 |
27 |
30 |
31 |
2 | Box
3 |
4 |
5 |
6 |
7 |
9 |
--------------------------------------------------------------------------------
/client/src/app/boxes/boxes.component.scss:
--------------------------------------------------------------------------------
1 | .list-box {
2 | display: flex;
3 | flex-direction: row;
4 | justify-content: center;
5 | gap: 36px;
6 | margin-top: 36px;
7 | flex-wrap: wrap;
8 | }
--------------------------------------------------------------------------------
/client/src/app/boxes/boxes.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { Observable } from 'rxjs';
3 | import { Box, BoxesStore } from '../store/boxes.store';
4 |
5 | @Component({
6 | selector: 'hth-boxes',
7 | templateUrl: './boxes.component.html',
8 | styleUrls: ['./boxes.component.scss'],
9 | providers: [BoxesStore]
10 | })
11 | export class BoxesComponent implements OnInit {
12 | listBox$!: Observable
2 | HaccTheHub
3 | Network
4 |
--------------------------------------------------------------------------------
/client/src/app/layout/header/header.component.scss:
--------------------------------------------------------------------------------
1 | .hth-header {
2 | box-shadow: 0 0 6px 2px #4e4e4e;
3 | }
--------------------------------------------------------------------------------
/client/src/app/layout/header/header.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { MatSlideToggleChange } from '@angular/material/slide-toggle';
3 | import { Observable } from 'rxjs';
4 | import { AppStore } from 'src/app/store/app.store';
5 |
6 | @Component({
7 | selector: 'hth-header',
8 | templateUrl: './header.component.html',
9 | styleUrls: ['./header.component.scss'],
10 | })
11 | export class HeaderComponent implements OnInit {
12 | networkStatus: boolean = false;
13 | constructor(private appStore: AppStore) {}
14 |
15 | ngOnInit(): void {
16 | this.appStore.openingNetwork$.subscribe(
17 | (status) => (this.networkStatus = status)
18 | );
19 | }
20 |
21 | toggleStatus(value: MatSlideToggleChange): void {
22 | if (value.checked) {
23 | this.appStore.setNetworkStatusOpen();
24 | } else {
25 | this.appStore.setNetworkStatusClose();
26 | }
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/client/src/app/layout/sidenav/sidenav.component.html:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/client/src/app/lesson/lesson-item/lesson-item.component.scss:
--------------------------------------------------------------------------------
1 | .box-container {
2 | box-shadow: 0px 6px 8px 2px #ababab;
3 | min-width: 200px;
4 | .box-title {
5 | background: #3b82f6;
6 | padding: 12px 24px;
7 | color: white;
8 | font-size: 18px;
9 | text-align: center;
10 | display: flex;
11 | align-items: center;
12 | span {
13 | text-decoration: underline;
14 | }
15 | cursor: pointer;
16 | }
17 |
18 | }
19 |
--------------------------------------------------------------------------------
/client/src/app/lesson/lesson-item/lesson-item.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input, OnInit } from '@angular/core';
2 | import { Lesson } from 'src/app/store/lesson.store';
3 |
4 | @Component({
5 | selector: 'hth-lesson-item',
6 | templateUrl: './lesson-item.component.html',
7 | styleUrls: ['./lesson-item.component.scss']
8 | })
9 | export class LessonItemComponent implements OnInit {
10 | @Input() lesson!: Lesson;
11 | constructor() { }
12 |
13 | ngOnInit(): void {
14 | }
15 |
16 | }
17 |
--------------------------------------------------------------------------------
/client/src/app/lesson/lesson.component.html:
--------------------------------------------------------------------------------
1 |
3 | {{lesson.displayname}}
4 | launch
5 |
6 |
7 | 
8 |
9 |
28 |
36 |
37 |
8 | 9 |
10 | Name:
11 | {{lesson.name}}
12 |
13 |
14 | Description:
15 |
16 | {{lesson.description}}
17 |
18 |
19 |
20 | Objective:
21 | {{lesson.objective}}
22 |
23 |
24 | Prerequisites:
25 | {{lesson.prerequisites}}
26 |
27 | 28 |
29 | Required box:
30 |
31 |
32 | {{box}}
33 |
34 |
35 |
2 | Lesson
3 |
4 |
5 |
6 |
7 |
9 |
--------------------------------------------------------------------------------
/client/src/app/lesson/lesson.component.scss:
--------------------------------------------------------------------------------
1 | .list-box {
2 | display: flex;
3 | flex-direction: row;
4 | justify-content: center;
5 | gap: 36px;
6 | margin-top: 36px;
7 | flex-wrap: wrap;
8 | }
--------------------------------------------------------------------------------
/client/src/app/lesson/lesson.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { Observable } from 'rxjs';
3 | import { Lesson, LessonStore } from '../store/lesson.store';
4 |
5 | @Component({
6 | selector: 'hth-lesson',
7 | templateUrl: './lesson.component.html',
8 | styleUrls: ['./lesson.component.scss'],
9 | providers: [LessonStore]
10 | })
11 | export class LessonComponent implements OnInit {
12 |
13 | listLesson$!: Observable
2 | Hacker playground
3 |
4 |
5 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/client/src/app/lesson/playground/playground.component.scss:
--------------------------------------------------------------------------------
1 | .lesson-header-image {
2 | background-image: url("../../../assets/book.gif");
3 | background-size: cover;
4 | }
5 |
6 | .lesson-card {
7 |
8 | }
9 |
10 | iframe {
11 | width: 100%;
12 | height: auto;
13 | min-height: calc(100vh - 200px);
14 | }
15 |
16 | .back-to-lesson-button {
17 | position: absolute;
18 | top: 100px;
19 | button {
20 | display: inline-flex;
21 | align-items: center;
22 | gap: 6px;
23 | font-size: 16px;
24 | cursor: pointer;
25 | span {
26 | text-decoration: underline;
27 | }
28 | .mat-icon {
29 | font-size: 40px;
30 | height: 40px;
31 | width: 40px;
32 | }
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/client/src/app/lesson/playground/playground.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { ActivatedRoute } from '@angular/router';
3 | import { LessonService } from 'src/app/services/lesson.service';
4 |
5 | @Component({
6 | selector: 'hth-playground',
7 | templateUrl: './playground.component.html',
8 | styleUrls: ['./playground.component.scss']
9 | })
10 | export class PlaygroundComponent implements OnInit {
11 | steps: any;
12 | constructor(private lessonService: LessonService, private activateRoute: ActivatedRoute) { }
13 |
14 | ngOnInit(): void {
15 | this.lessonService.getLessonByName(this.activateRoute.snapshot.params["id"]).subscribe(value => this.steps= value);
16 | }
17 |
18 | }
19 |
--------------------------------------------------------------------------------
/client/src/app/loading/loading.component.html:
--------------------------------------------------------------------------------
1 |
19 |
21 |
22 |
2 |
3 |
--------------------------------------------------------------------------------
/client/src/app/loading/loading.component.scss:
--------------------------------------------------------------------------------
1 |
2 | #spinner {
3 | -webkit-animation: frames 1s infinite linear;
4 | animation: frames 1s infinite linear;
5 | background: transparent;
6 | border: 1.75vw solid #FFF;
7 | border-radius: 100%;
8 | border-top-color: #DF691A;
9 | width: 20vw;
10 | height: 20vw;
11 | opacity: .6;
12 | padding: 0;
13 | position: absolute;
14 | z-index: 999;
15 | bottom: 35%;
16 | left: 45%;
17 | transform: translate(-50%, -50%);
18 | }
19 | @keyframes frames {
20 | 0% {
21 | -webkit-transform: rotate(0deg);
22 | transform: rotate(0deg);
23 | }
24 | 100% {
25 | -webkit-transform: rotate(359deg);
26 | transform: rotate(359deg);
27 | }
28 | }
29 |
30 | #pause {
31 | display: block;
32 | background:
33 | rgba(0, 0, 0, 0.66)
34 | no-repeat
35 | 0 0;
36 | width: 100%;
37 | height: 100%;
38 | position: fixed;
39 | bottom: 0;
40 | left: 0;
41 | z-index: 1000;
42 | }
43 |
--------------------------------------------------------------------------------
/client/src/app/loading/loading.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'hth-loading',
5 | templateUrl: './loading.component.html',
6 | styleUrls: ['./loading.component.scss']
7 | })
8 | export class LoadingComponent implements OnInit {
9 |
10 | constructor() { }
11 |
12 | ngOnInit(): void {
13 | }
14 |
15 | }
16 |
--------------------------------------------------------------------------------
/client/src/app/markdown.pipe.ts:
--------------------------------------------------------------------------------
1 | import { Pipe, PipeTransform } from '@angular/core';
2 | import {marked } from "marked";
3 |
4 | @Pipe({
5 | name: 'markdown'
6 | })
7 |
8 | export class MarkdownPipe implements PipeTransform {
9 |
10 | transform(value: any, args?: any[]): any {
11 | if (value && value.length > 0) {
12 | return marked(value);
13 | }
14 | return value;
15 | }
16 |
17 | }
--------------------------------------------------------------------------------
/client/src/app/services/boxes.service.ts:
--------------------------------------------------------------------------------
1 | import { HttpClient } from "@angular/common/http";
2 | import { Injectable } from "@angular/core";
3 | import { Observable } from "rxjs";
4 | import { BASE_URL } from "../app.constant";
5 | import { Box } from "../store/boxes.store";
6 |
7 | @Injectable({
8 | providedIn: 'root'
9 | })
10 | export class BoxesService {
11 | constructor(private readonly httpClient: HttpClient) {}
12 |
13 | getBoxes(): Observable