白帽工坊（BaiMaoGongFang）- 全栈网络安全学习平台

白帽工坊（BaiMaoGongFang）- 全栈网络安全学习平台

项目简介

白帽工坊是一个综合性的网络安全学习平台，集成了Web前端、后端服务、微信小程序和安卓App，为网络安全爱好者提供一站式的学习与实践环境。项目采用现代化的技术栈，支持多端访问，已稳定上线运行。

本项目的开发目标是为网络安全爱好者、CTF选手和信息安全专业学生提供一个完整的学习和实践平台。通过整合理论学习、实战演练、社区交流和AI辅导等功能，帮助用户系统地掌握网络安全知识和技能。

功能亮点

1. 实战CTF靶场

• 基于Docker动态创建独立的攻防环境
• 支持多种漏洞类型：Web渗透、逆向工程、密码学等
• 实时flag验证与积分系统
• 靶场难度分级，适合不同水平用户

2. 系统化课程

• 专业的网络安全课程体系
• 高质量视频教程
• 在线答疑与辅导
• 学习进度追踪

3. 安全工具集

• CMS指纹识别
• Base64编解码工具
• IP地址查询
• 哈希生成器
• 密码强度检测
• 端口扫描工具

4. AI智能问答

• 基于大语言模型的智能答疑
• 24/7在线解答
• 上下文理解与多轮对话
• 专业知识库支持

5. 社区互动

• 技术论坛
• 经验分享
• 问题讨论
• 积分奖励机制
• 用户排行榜

6. 多端适配

• 响应式Web界面
• 微信小程序
• 安卓App
• 数据同步

7. 后台管理

• 用户管理
• 内容管理
• 视频管理
• 漏洞库管理
• 运营数据统计

技术栈详解

1. 前端技术

// main.ts - Vue3项目配置示例
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
// 引入 Element Plus
import ElementPlus from 'element-plus'
// 引入 Element Plus 样式
import 'element-plus/dist/index.css'
import * as ElIcons from '@element-plus/icons-vue';
//引入路由器
import router from './router';
// 添加 Vuetify 样式
import vuetify from './plugins/vuetify.ts'
import 'vuetify/styles'

const app = createApp(App)
app.use(router)
app.use(store)
app.use(ElementPlus)
app.use(vuetify)
app.mount('#app')

• Vue3: 采用Composition API，提供更好的代码组织和复用
• Element Plus & Vuetify: 现代化UI组件库，提供丰富的界面元素
• Vuex: 状态管理，处理复杂的数据流
• Vue Router: 路由管理，实现SPA应用
• Echarts: 数据可视化，展示统计信息
• TypeScript: 类型安全，提高代码质量

2. 后端技术

SpringBoot后端

// SecurityConfig.java - 安全配置示例
@Configuration
@EnableWebSecurity
@RequiredArgsConstructor
public class SecurityConfig {
    @Bean
    public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
        http
            .cors(cors -> cors.configurationSource(corsConfigurationSource()))
            .csrf(AbstractHttpConfigurer::disable)
            .sessionManagement(session ->
                session.sessionCreationPolicy(SessionCreationPolicy.STATELESS))
            .authorizeHttpRequests(auth -> auth
                .requestMatchers("/user/login", "/user/register").permitAll()
                .requestMatchers("/admin/**").hasRole("ADMIN")
                .anyRequest().authenticated()
            )
            .addFilterBefore(jwtAuthenticationFilter, 
                UsernamePasswordAuthenticationFilter.class);
        return http.build();
    }
}

• SpringBoot: 主要业务逻辑处理
• Spring Security: 认证和授权
• JWT: 无状态会话管理
• MyBatis: 数据库操作
• Docker: CTF靶场环境管理

Flask后端

# app.py - Flask应用配置示例
from flask import Flask
from flask_cors import CORS
from routes.chat import chat_bp

app = Flask(__name__)
app.config.from_object(Config)

# CORS配置
CORS(app, resources={r"/api/*": {"origins": Config.ALLOWED_ORIGINS}})

# 注册路由
app.register_blueprint(chat_bp)

if __name__ == "__main__":
    app.run(host=Config.FLASK_HOST, port=Config.FLASK_PORT)

• Flask: AI问答服务
• OpenAI API: 智能对话支持
• MongoDB: 对话历史存储
• Redis: 缓存和速率限制

3. 数据库设计

MongoDB集合设计

// 用户集合
{
  _id: ObjectId,
  username: String,
  password: String(hashed),
  email: String,
  role: String,
  points: Number,
  created_at: Date
}

// CTF题目集合
{
  _id: ObjectId,
  title: String,
  description: String,
  difficulty: Number,
  category: String,
  flag: String(encrypted),
  points: Number
}

Redis使用

• 会话管理
• 验证码存储
• 接口限流
• 排行榜缓存

项目结构

/
├── Frontend/                # Vue3前端源码
│   ├── src/
│   │   ├── components/     # 通用组件
│   │   ├── views/         # 页面组件
│   │   ├── store/         # Vuex存储
│   │   ├── router/        # 路由配置
│   │   └── api/           # API接口
│   
├── BackendSpringBoot/      # SpringBoot后端
│   ├── src/main/java/
│   │   ├── controller/    # 接口控制器
│   │   ├── service/       # 业务逻辑
│   │   ├── model/         # 数据模型
│   │   └── config/        # 配置类
│   
├── BackendFlask/          # Flask后端（AI服务）
│   ├── routes/           # 路由
│   ├── models/          # 数据模型
│   ├── utils/           # 工具类
│   └── config.py        # 配置文件
│   
├── White Hat Workshop/    # 微信小程序
│   ├── pages/           # 页面
│   ├── components/      # 组件
│   └── utils/           # 工具类
│   
└── VideoApp/             # 安卓App
    ├── app/
    │   ├── src/main/
    │   │   ├── java/    # 源代码
    │   │   └── res/     # 资源文件
    └── gradle/          # 构建配置

部署指南

1. 环境要求

• Node.js 16+
• Java 17+
• Python 3.8+
• MongoDB 4.4+
• Redis 6.0+
• Docker 20.10+

2. 前端部署

# 安装依赖
cd Frontend
npm install

# 开发环境
npm run dev

# 生产构建
npm run build

# 配置nginx
server {
    listen 80;
    server_name your_domain;
    
    location / {
        root /path/to/dist;
        try_files $uri $uri/ /index.html;
    }
    
    location /api {
        proxy_pass http://localhost:8080;
    }
}

3. SpringBoot后端部署

# 打包
cd BackendSpringBoot
mvn clean package

# 运行
java -jar target/*.jar --spring.profiles.active=prod

# 或使用Docker
docker build -t bmgf-backend .
docker run -d -p 8080:8080 bmgf-backend

4. Flask后端部署

# 创建虚拟环境
cd BackendFlask
python -m venv .venv
source .venv/bin/activate  # Windows: .venv\Scripts\activate

# 安装依赖
pip install -r requirements.txt

# 配置
cp .env.example .env
# 编辑.env文件，配置必要的环境变量

# 运行
python app.py

# 或使用gunicorn
gunicorn -w 4 -b 0.0.0.0:5000 app:app

5. 数据库配置

# MongoDB
mongod --auth --bind_ip_all

# Redis
redis-server --requirepass your_password

6. Docker环境配置

# docker-compose.yml
version: '3'
services:
  mongodb:
    image: mongo:4.4
    volumes:
      - ./data/db:/data/db
    
  redis:
    image: redis:6.0
    command: redis-server --requirepass your_password
    
  backend:
    build: ./BackendSpringBoot
    ports:
      - "8080:8080"
    depends_on:
      - mongodb
      - redis
      
  ai-service:
    build: ./BackendFlask
    ports:
      - "5000:5000"
    depends_on:
      - mongodb
      - redis

API文档

1. 用户管理

# 注册
POST /api/user/register
Content-Type: application/json

{
    "username": "string",
    "password": "string",
    "email": "string"
}

# 登录
POST /api/user/login
Content-Type: application/json

{
    "username": "string",
    "password": "string"
}

2. CTF靶场

# 创建靶机
POST /api/lab/create
Authorization: Bearer <token>
Content-Type: application/json

{
    "challenge_id": "string"
}

# 提交flag
POST /api/lab/flag
Authorization: Bearer <token>
Content-Type: application/json

{
    "challenge_id": "string",
    "flag": "string"
}

3. AI问答

# 发送问题
POST /api/chat
Authorization: Bearer <token>
Content-Type: application/json

{
    "message": "string"
}

# 获取历史记录
GET /api/chat/history
Authorization: Bearer <token>

安全配置建议

1. 服务器安全

   • 使用防火墙限制端口访问
   • 启用HTTPS
   • 定期更新系统和依赖包

2. 应用安全

   • 所有API使用JWT认证
   • 密码加密存储
   • 输入验证和过滤
   • XSS和CSRF防护

3. 数据安全

   • 数据库访问控制
   • 敏感信息加密
   • 定期备份

常见问题

1. 环境配置问题

   • 确保所有必要服务都已启动
   • 检查端口占用情况
   • 验证配置文件正确性

2. 部署问题

   • 检查日志文件
   • 确认网络连接
   • 验证权限设置

3. 性能优化

   • 使用Redis缓存
   • 数据库索引优化
   • 静态资源CDN

开发计划

1. 近期计划

   • 优化AI问答系统
   • 增加更多CTF题目
   • 完善文档系统

2. 长期规划

   • 支持更多漏洞类型
   • 添加实时协作功能
   • 开发iOS版本

贡献指南

1. 提交规范

   • 使用清晰的commit信息
   • 创建功能分支
   • 编写测试用例

2. 代码规范

   • 遵循各语言标准规范
   • 添加必要的注释
   • 进行代码审查

联系方式

• 邮箱：zhaoqsnyah@gmail.com
• 项目地址：在线演示
• GitHub源码下载：GitHub
• App下载：Android版本

致谢

感谢所有贡献者的付出，让这个项目能够不断完善和进步。

---

免责声明：本项目仅供学习交流使用，任何未经授权的访问、攻击或数据窃取行为均属违法，必将追究法律责任。