HackHound：使用 React 和 Python 构建现代 Web 安全测试工具

构建 HackHound：一种现代 Web 安全测试工具 🔒

大家好，DEV 社区！👋 我很高兴与大家分享我的最新项目 - HackHound，这是一个开源的 Web 安全测试工具，它将 Python 的强大功能与现代 React 前端相结合。在这篇文章中，我将带您了解其架构、主要功能以及我在开发过程中遇到的一些有趣挑战。

为什么要使用另一种安全工具？🤔

虽然有许多可用的安全测试工具，但我发现大多数都存在以下情况：

缺乏现代化、用户友好的界面

不要提供实时反馈

需要复杂的设置和配置

不支持并发测试方法

HackHound 旨在通过提供一种简化的、可视化的网络安全测试方法来解决这些问题。

技术栈概述

前端

React 18 与 Vite 配合使用，实现极速开发

使用 WebSocket 连接进行实时更新

简洁、响应迅速的用户界面，实现更好的可视化

Firebase 用于身份验证

后端

用于高性能异步操作的 FastAPI

Python 3.10 具有强大的安全测试功能

全面的日志记录和错误处理

模块化架构，易于扩展

主要特点🌟

多模式模糊测试

@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

实时进度更新

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

将 Daytona 添加到现有项目

先决条件

现有项目的 Git 存储库

您的系统上安装了 Daytona CLI

与 Daytona 兼容的 IDE（推荐使用 VS Code）

步骤 1：初始化 Daytona 配置

导航到项目的根目录：

cd /path/to/your/project

创建 Daytona 配置目录：

mkdir .daytona

这将为基本配置创建一个“.daytona”目录。

第 2 步：配置您的开发环境

打开 .daytona/devcontainer.json 文件并自定义您的开发环境：

{
    "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"
            ]
        }
    }
}

在 .daytona/workspace.yaml 中配置项目特定的设置：

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

步骤 3：添加项目依赖项

创建一个 .daytona/setup.sh 脚本来处理项目初始化：

#!/bin/bash

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

# Add any other setup commands

使安装脚本可执行：

chmod +x .daytona/setup.sh

步骤 4：版本控制集成

将 Daytona 配置文件添加到版本控制中：

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

更新 .gitignore 以排除 Daytona 特定文件：

.daytona/.tmp/
.daytona/logs/

第 5 步：团队使用

与您的团队分享这些说明：

安装 Daytona CLI

克隆存储库

启动开发环境：

daytona start

故障排除

常见问题及解决方案：

容器构建失败：检查基础镜像兼容性验证功能依赖性检查安装脚本权限

IDE 集成问题：确保安装了 VS Code 远程开发扩展，检查 devcontainer.json 中的 IDE 配置

最佳实践

保持基础镜像最小化并满足你的需求

在 README.md 中记录任何自定义配置

随着项目需求的变化，定期更新 Daytona 配置

部署前与不同的团队成员一起测试开发环境

其他资源

Daytona 文档

DevContainer 参考

VS Code 远程开发

开发环境🚀

我使用 Daytona 来标准化开发环境：

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

下一步是什么？🎯

我正在规划几个令人兴奋的功能：

与其他安全工具集成

自定义有效载荷生成器

高级报告功能

CI/CD 管道集成

尝试一下！🔥

该项目是开源的，可以在 GitHub 上找到：HackHound Repository

开始吧：

# 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

贡献🤝

欢迎贡献！无论是：

添加新的模糊测试技术

改善 UI/UX

增强文档

报告错误

请随意打开问题并提交 PR！

结论

构建 HackHound 是一次激动人心的旅程，它将现代 Web 开发与安全测试相结合。我很乐意听取您的想法和建议！

您是否构建过类似的工具？您面临哪些挑战？让我们在下面的评论中讨论！👇

CLIS.CC