Building HackHound: A Modern Web Security Testing Tool

Hey DEV community! I’m excited to share my latest project – HackHound, an open-source web security testing tool that combines the power of Python with a modern React frontend. In this post, I’ll walk you through the architecture, key features, and some interesting challenges I encountered during development.

Why Another Security Tool? 🤔

While there are many security testing tools available, I found that most either:

Lack a modern, user-friendly interface
Don’t provide real-time feedback
Require complex setup and configuration
Don’t support concurrent testing methods

HackHound aims to solve these problems by providing a streamlined, visual approach to web security testing.

Tech Stack Overview ️

Frontend

React 18 with Vite for blazing-fast development
Real-time updates using WebSocket connections
Clean, responsive UI for better visualization
Firebase for authentication

Backend

FastAPI for high-performance async operations
Python 3.10 for robust security testing capabilities
Comprehensive logging and error handling
Modular architecture for easy extensions

Key Features

Multi-Mode Fuzzing


   <span>@app.post</span><span>(</span><span>"</span><span>/fuzz</span><span>"</span><span>)</span>
   <span>async</span> <span>def</span> <span>fuzz</span><span>(</span><span>data</span><span>:</span> <span>FuzzRequest</span><span>):</span>
       <span>results</span> <span>=</span> <span>{}</span>
       <span>if</span> <span>actions</span><span>.</span><span>get</span><span>(</span><span>"</span><span>fuzz_directory</span><span>"</span><span>):</span>
           <span>results</span><span>[</span><span>"</span><span>directories</span><span>"</span><span>]</span> <span>=</span> <span>run_directory_fuzzing</span><span>(</span><span>url</span><span>)</span>
       <span>if</span> <span>actions</span><span>.</span><span>get</span><span>(</span><span>"</span><span>fuzz_subdomain</span><span>"</span><span>):</span>
           <span>results</span><span>[</span><span>"</span><span>subdomains</span><span>"</span><span>]</span> <span>=</span> <span>run_subdomain_fuzzing</span><span>(</span><span>domain</span><span>)</span>
       <span># More fuzzing modes... </span>       <span>return</span> <span>results</span>
   <span>@app.post</span><span>(</span><span>"</span><span>/fuzz</span><span>"</span><span>)</span>
   <span>async</span> <span>def</span> <span>fuzz</span><span>(</span><span>data</span><span>:</span> <span>FuzzRequest</span><span>):</span>
       <span>results</span> <span>=</span> <span>{}</span>
       <span>if</span> <span>actions</span><span>.</span><span>get</span><span>(</span><span>"</span><span>fuzz_directory</span><span>"</span><span>):</span>
           <span>results</span><span>[</span><span>"</span><span>directories</span><span>"</span><span>]</span> <span>=</span> <span>run_directory_fuzzing</span><span>(</span><span>url</span><span>)</span>
       <span>if</span> <span>actions</span><span>.</span><span>get</span><span>(</span><span>"</span><span>fuzz_subdomain</span><span>"</span><span>):</span>
           <span>results</span><span>[</span><span>"</span><span>subdomains</span><span>"</span><span>]</span> <span>=</span> <span>run_subdomain_fuzzing</span><span>(</span><span>domain</span><span>)</span>
       <span># More fuzzing modes... </span>       <span>return</span> <span>results</span>
   @app.post("/fuzz")
   async def fuzz(data: FuzzRequest):
       results = {}
       if actions.get("fuzz_directory"):
           results["directories"] = run_directory_fuzzing(url)
       if actions.get("fuzz_subdomain"):
           results["subdomains"] = run_subdomain_fuzzing(domain)
       # More fuzzing modes...        return results

Enter fullscreen mode Exit fullscreen mode

Real-time Progress Updates


   <span>const</span> <span>FuzzingProgress</span> <span>=</span> <span>()</span> <span>=></span> <span>{</span>
     <span>const</span> <span>[</span><span>progress</span><span>,</span> <span>setProgress</span><span>]</span> <span>=</span> <span>useState</span><span>(</span><span>0</span><span>);</span>
     <span>useEffect</span><span>(()</span> <span>=></span> <span>{</span>
       <span>socket</span><span>.</span><span>on</span><span>(</span><span>'</span><span>fuzz_progress</span><span>'</span><span>,</span> <span>(</span><span>data</span><span>)</span> <span>=></span> <span>{</span>
         <span>setProgress</span><span>(</span><span>data</span><span>.</span><span>progress</span><span>);</span>
       <span>});</span>
     <span>},</span> <span>[]);</span>
     <span>return</span> <span><</span><span>ProgressBar</span> <span>value</span><span>=</span><span>{</span><span>progress</span><span>}</span> <span>/></span><span>; </span>   <span>};</span>
   <span>const</span> <span>FuzzingProgress</span> <span>=</span> <span>()</span> <span>=></span> <span>{</span>
     <span>const</span> <span>[</span><span>progress</span><span>,</span> <span>setProgress</span><span>]</span> <span>=</span> <span>useState</span><span>(</span><span>0</span><span>);</span>
     <span>useEffect</span><span>(()</span> <span>=></span> <span>{</span>
       <span>socket</span><span>.</span><span>on</span><span>(</span><span>'</span><span>fuzz_progress</span><span>'</span><span>,</span> <span>(</span><span>data</span><span>)</span> <span>=></span> <span>{</span>
         <span>setProgress</span><span>(</span><span>data</span><span>.</span><span>progress</span><span>);</span>
       <span>});</span>
     <span>},</span> <span>[]);</span>
     <span>return</span> <span><</span><span>ProgressBar</span> <span>value</span><span>=</span><span>{</span><span>progress</span><span>}</span> <span>/></span><span>; </span>   <span>};</span>
   const FuzzingProgress = () => {
     const [progress, setProgress] = useState(0);
     useEffect(() => {
       socket.on('fuzz_progress', (data) => {
         setProgress(data.progress);
       });
     }, []);
     return <ProgressBar value={progress} />;    };

Enter fullscreen mode Exit fullscreen mode

Adding Daytona to an Existing Project

Prerequisites

Git repository for your existing project
Daytona CLI installed on your system
A Daytona-compatible IDE (VS Code recommended)

Step 1: Initialize Daytona Configuration

Navigate to your project’s root directory:


<span>cd</span> /path/to/your/project
<span>cd</span> /path/to/your/project
cd /path/to/your/project

Enter fullscreen mode Exit fullscreen mode

Create the Daytona configuration directory:


<span>mkdir</span> .daytona
<span>mkdir</span> .daytona
mkdir .daytona

Enter fullscreen mode Exit fullscreen mode

This creates a .daytona directory for the basic configuration.

Step 2: Configure Your Development Environment

Open the .daytona/devcontainer.json file and customize your development environment:


<span>{</span><span> </span><span>"name"</span><span>:</span><span> </span><span>"Your Project Name"</span><span>,</span><span> </span><span>"image"</span><span>:</span><span> </span><span>"mcr.microsoft.com/devcontainers/base:ubuntu"</span><span>,</span><span> </span><span>//</span><span> </span><span>Choose</span><span> </span><span>appropriate</span><span> </span><span>base</span><span> </span><span>image</span><span> </span><span>"features"</span><span>:</span><span> </span><span>{</span><span> </span><span>"ghcr.io/devcontainers/features/node:1"</span><span>:</span><span> </span><span>{},</span><span> </span><span>//</span><span> </span><span>Add</span><span> </span><span>required</span><span> </span><span>features</span><span> </span><span>"ghcr.io/devcontainers/features/python:1"</span><span>:</span><span> </span><span>{}</span><span> </span><span>},</span><span> </span><span>"customizations"</span><span>:</span><span> </span><span>{</span><span> </span><span>"vscode"</span><span>:</span><span> </span><span>{</span><span> </span><span>"extensions"</span><span>:</span><span> </span><span>[</span><span> </span><span>"dbaeumer.vscode-eslint"</span><span>,</span><span> </span><span>//</span><span> </span><span>Add</span><span> </span><span>desired</span><span> </span><span>extensions</span><span> </span><span>"ms-python.python"</span><span> </span><span>]</span><span> </span><span>}</span><span> </span><span>}</span><span> </span><span>}</span><span> </span>
<span>{</span><span> </span><span>"name"</span><span>:</span><span> </span><span>"Your Project Name"</span><span>,</span><span> </span><span>"image"</span><span>:</span><span> </span><span>"mcr.microsoft.com/devcontainers/base:ubuntu"</span><span>,</span><span> </span><span>//</span><span> </span><span>Choose</span><span> </span><span>appropriate</span><span> </span><span>base</span><span> </span><span>image</span><span> </span><span>"features"</span><span>:</span><span> </span><span>{</span><span> </span><span>"ghcr.io/devcontainers/features/node:1"</span><span>:</span><span> </span><span>{},</span><span> </span><span>//</span><span> </span><span>Add</span><span> </span><span>required</span><span> </span><span>features</span><span> </span><span>"ghcr.io/devcontainers/features/python:1"</span><span>:</span><span> </span><span>{}</span><span> </span><span>},</span><span> </span><span>"customizations"</span><span>:</span><span> </span><span>{</span><span> </span><span>"vscode"</span><span>:</span><span> </span><span>{</span><span> </span><span>"extensions"</span><span>:</span><span> </span><span>[</span><span> </span><span>"dbaeumer.vscode-eslint"</span><span>,</span><span> </span><span>//</span><span> </span><span>Add</span><span> </span><span>desired</span><span> </span><span>extensions</span><span> </span><span>"ms-python.python"</span><span> </span><span>]</span><span> </span><span>}</span><span> </span><span>}</span><span> </span><span>}</span><span> </span>
{ "name": "Your Project Name", "image": "mcr.microsoft.com/devcontainers/base:ubuntu", // Choose appropriate base image "features": { "ghcr.io/devcontainers/features/node:1": {}, // Add required features "ghcr.io/devcontainers/features/python:1": {} }, "customizations": { "vscode": { "extensions": [ "dbaeumer.vscode-eslint", // Add desired extensions "ms-python.python" ] } } }

Enter fullscreen mode Exit fullscreen mode

Configure project-specific settings in .daytona/workspace.yaml:


<span>name</span><span>:</span> <span>your-project-name</span>
<span>description</span><span>:</span> <span>"</span><span>Your</span><span> </span><span>project</span><span> </span><span>description"</span>
<span>defaultWorkspace</span><span>:</span>
  <span>git</span><span>:</span>
    <span>repositories</span><span>:</span>
      <span>-</span> <span>url</span><span>:</span> <span>https://github.com/your-username/your-repo.git</span>
        <span>checkout</span><span>:</span> <span>main</span>
<span>name</span><span>:</span> <span>your-project-name</span>
<span>description</span><span>:</span> <span>"</span><span>Your</span><span> </span><span>project</span><span> </span><span>description"</span>
<span>defaultWorkspace</span><span>:</span>
  <span>git</span><span>:</span>
    <span>repositories</span><span>:</span>
      <span>-</span> <span>url</span><span>:</span> <span>https://github.com/your-username/your-repo.git</span>
        <span>checkout</span><span>:</span> <span>main</span>
name: your-project-name
description: "Your project description"
defaultWorkspace:
  git:
    repositories:
      - url: https://github.com/your-username/your-repo.git
        checkout: main

Enter fullscreen mode Exit fullscreen mode

Step 3: Add Project Dependencies

Create a .daytona/setup.sh script to handle project initialization:


<span>#!/bin/bash</span>
<span># Install project dependencies</span>
npm <span>install</span>           <span># For Node.js projects</span>
pip <span>install</span> <span>-r</span> requirements.txt  <span># For Python projects</span>
<span># Add any other setup commands</span>
<span>#!/bin/bash</span>

<span># Install project dependencies</span>
npm <span>install</span>           <span># For Node.js projects</span>
pip <span>install</span> <span>-r</span> requirements.txt  <span># For Python projects</span>

<span># Add any other setup commands</span>
#!/bin/bash

# Install project dependencies
npm install           # For Node.js projects
pip install -r requirements.txt  # For Python projects

# Add any other setup commands

Enter fullscreen mode Exit fullscreen mode

Make the setup script executable:


<span>chmod</span> +x .daytona/setup.sh
<span>chmod</span> +x .daytona/setup.sh
chmod +x .daytona/setup.sh

Enter fullscreen mode Exit fullscreen mode

Step 4: Version Control Integration

Add Daytona configuration files to version control:


git add .daytona/
git commit <span>-m</span> <span>"Add Daytona configuration"</span>
git push
git add .daytona/
git commit <span>-m</span> <span>"Add Daytona configuration"</span>
git push
git add .daytona/
git commit -m "Add Daytona configuration"
git push

Enter fullscreen mode Exit fullscreen mode

Update .gitignore to exclude Daytona-specific files:


.daytona/.tmp/
.daytona/logs/
.daytona/.tmp/
.daytona/logs/
.daytona/.tmp/
.daytona/logs/

Enter fullscreen mode Exit fullscreen mode

Step 5: Team Usage

Share these instructions with your team:

Install Daytona CLI
Clone the repository
Start the development environment:


daytona start
daytona start
daytona start

Enter fullscreen mode Exit fullscreen mode

Troubleshooting

Common issues and solutions:

Container fails to build:
- Check base image compatibility
- Verify feature dependencies
- Review setup script permissions
IDE integration issues:
- Ensure VS Code Remote Development extension is installed
- Check IDE configuration in devcontainer.json

Best Practices

Keep the base image minimal and specific to your needs
Document any custom configuration in README.md
Regularly update Daytona configuration as project requirements change
Test the development environment with different team members before deployment

Additional Resources

Development Environment

I used Daytona for standardizing the development environment:


<span>{</span><span> </span><span>"name"</span><span>:</span><span> </span><span>"HackHound Dev Environment"</span><span>,</span><span> </span><span>"dockerFile"</span><span>:</span><span> </span><span>"Dockerfile"</span><span>,</span><span> </span><span>"forwardPorts"</span><span>:</span><span> </span><span>[</span><span>5173</span><span>,</span><span> </span><span>5000</span><span>],</span><span> </span><span>"postCreateCommand"</span><span>:</span><span> </span><span>"npm install && pip install -r requirements.txt"</span><span> </span><span>}</span><span> </span>
<span>{</span><span> </span><span>"name"</span><span>:</span><span> </span><span>"HackHound Dev Environment"</span><span>,</span><span> </span><span>"dockerFile"</span><span>:</span><span> </span><span>"Dockerfile"</span><span>,</span><span> </span><span>"forwardPorts"</span><span>:</span><span> </span><span>[</span><span>5173</span><span>,</span><span> </span><span>5000</span><span>],</span><span> </span><span>"postCreateCommand"</span><span>:</span><span> </span><span>"npm install && pip install -r requirements.txt"</span><span> </span><span>}</span><span> </span>
{ "name": "HackHound Dev Environment", "dockerFile": "Dockerfile", "forwardPorts": [5173, 5000], "postCreateCommand": "npm install && pip install -r requirements.txt" }

Enter fullscreen mode Exit fullscreen mode

What’s Next?

I’m planning several exciting features:

Integration with other security tools
Custom payload generators
Advanced reporting capabilities
CI/CD pipeline integration

Try It Out!

The project is open source and available on GitHub: HackHound Repository

To get started:


<span># Clone the repository</span>
git clone https://github.com/aayushman-singh/hackhound.git
<span># Install dependencies</span>
npm <span>install cd </span>frontend <span>&&</span> npm <span>install cd</span> ../app <span>&&</span> pip <span>install</span> <span>-r</span> requirements.txt
<span># Start the application</span>
npm start
<span># Clone the repository</span>
git clone https://github.com/aayushman-singh/hackhound.git

<span># Install dependencies</span>
npm <span>install cd </span>frontend <span>&&</span> npm <span>install cd</span> ../app <span>&&</span> pip <span>install</span> <span>-r</span> requirements.txt

<span># Start the application</span>
npm start
# Clone the repository
git clone https://github.com/aayushman-singh/hackhound.git

# Install dependencies
npm install cd frontend && npm install cd ../app && pip install -r requirements.txt

# Start the application
npm start

Enter fullscreen mode Exit fullscreen mode

Contributing 🤝

Contributions are welcome! Whether it’s:

Adding new fuzzing techniques
Improving the UI/UX
Enhancing documentation
Reporting bugs

Feel free to open issues and submit PRs!

Conclusion

Building HackHound has been an exciting journey in combining modern web development with security testing. I’d love to hear your thoughts and suggestions!

Have you built similar tools? What challenges did you face? Let’s discuss in the comments below!

Follow me for more security and web development content!
GitHub | Twitter | LinkedIn

原文链接：HackHound: Building a Modern Web Security Testing Tool with React and Python

展开阅读全文

文章版权声明 1、本网站名称：拾光赋
2、本站永久网址：https://www.blogs.ink
3、本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长QQ：805375623进行删除处理。
4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6、本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END