DeepNetVisibility - 内网资产可视化系统

基于 React Flow 构建的渗透测试内网资产管理和可视化系统，支持节点管理、标签系统和JSON数据导入导出。

功能特性

✨ 核心功能

• 节点类型支持

  • 🌐 CIDR网段 (Network)
  • 🖥️ 服务器 (Web、Database、Domain Controller等)
  • 💻 个人计算机 (Windows、Linux等)
  • ⚙️ 网络设备 (Firewall、Router、Switch等)

• 灵活的标签系统

  • 操作系统标签 (Windows、Linux、macOS等)
  • 域信息标签 (Domain Controller、Domain Member、Workgroup)
  • 关键服务标签 (Exchange、SQL Server、SharePoint等)
  • 风险状态标签 (Compromised、Unpatched、Exposed、Secured)
  • 自定义标签支持

• 数据管理

  • 📥 从JSON导入资产数据
  • 📤 导出为JSON格式
  • 节点和关系的实时编辑
  • 批量清除功能

🎨 用户界面

• 交互式拓扑图

  • 拖拽节点
  • 缩放和平移
  • 小地图预览
  • 自动布局适配

• 便捷的控制面板

  • 快速添加节点
  • 视图调整
  • 数据导入导出
  • 资产统计信息

快速开始

安装和运行

# 安装依赖
npm install

# 启动开发服务器
npm run dev

打开浏览器访问 http://localhost:5173

生产构建

npm run build
npm run preview

数据格式

JSON 数据结构

应用程序使用标准的JSON格式存储资产和关系数据：

{
  "version": "1.0",
  "timestamp": "2026-02-03T00:00:00.000Z",
  "nodes": [
    {
      "id": "dc-1",
      "type": "server",
      "position": { "x": -200, "y": 150 },
      "data": {
        "label": "DC01",
        "description": "Domain Controller",
        "ip": "192.168.1.10",
        "subType": "dc",
        "tags": {
          "os": ["windows"],
          "domain": ["domain_controller"],
          "risk": ["secured"]
        },
        "metadata": {
          "hostname": "DC01.corp.com",
          "osVersion": "Windows Server 2022"
        }
      }
    }
  ],
  "edges": [
    {
      "id": "edge-cidr-1-dc-1",
      "source": "cidr-1",
      "target": "dc-1",
      "data": {
        "label": "contains",
        "type": "contains"
      }
    }
  ]
}

节点类型和子类型

Server (服务器)

• web - Web服务器
• database - 数据库服务器
• dc - 域控制器
• file - 文件服务器
• mail - 邮件服务器
• other - 其他

Network Device (网络设备)

• router - 路由器
• switch - 交换机
• firewall - 防火墙
• ids_ips - IDS/IPS
• waf - WAF
• other - 其他

Operating System (操作系统)

• windows - Windows
• linux - Linux
• macos - macOS
• cisco_ios - Cisco IOS
• other - 其他

使用指南

添加节点

1. 点击左下角 "+ Add Node" 按钮
2. 选择节点类型（CIDR、Server、PC或Device）
3. 选择子类型（如适用）
4. 输入标签和IP地址
5. 点击 Add 确认

添加关系（边）

在React Flow中，连接两个节点的方式：

• 从一个节点的下方handle拖拽到另一个节点的上方handle

导出数据

1. 点击右上角面板的 "📥 Export to JSON" 按钮
2. 系统会自动下载包含当前所有节点和关系的JSON文件
3. 文件名格式：asset-map-YYYY-MM-DD.json

导入数据

1. 点击右上角面板的 "📤 Import from JSON" 按钮
2. 选择合法的JSON数据文件
3. 导入成功后会显示确认信息

查看统计信息

右上角的导入导出面板实时显示：

• 节点总数
• 关系总数
• 各类型节点统计

项目结构

src/
├── components/          # React组件
│   ├── nodes/          # 自定义节点组件
│   │   ├── CIDRNode.jsx
│   │   ├── ServerNode.jsx
│   │   ├── PCNode.jsx
│   │   ├── DeviceNode.jsx
│   │   └── NodeStyles.css
│   ├── FlowCanvas.jsx   # 主画布组件
│   ├── ImportExport.jsx # 导入导出面板
│   ├── ControlPanel.jsx # 控制面板
│   └── *.css            # 组件样式
├── store/
│   └── useFlowStore.js  # Zustand状态管理
├── types/
│   └── index.js         # 类型定义和常量
├── data/
│   └── sampleData.json  # 示例数据
├── App.jsx              # 主应用程序
└── index.css            # 全局样式

技术栈

• React 18 - UI框架
• Vite - 构建工具和开发服务器
• React Flow - 图可视化库
• Zustand - 状态管理
• CSS - 样式

对渗透测试的适用场景

✓ 推荐使用场景

• 经过授权的内网渗透测试
• 资产探测和整理
• 拓扑关系分析
• 风险评估和标记
• 渗透路径规划
• 测试报告的可视化展示

数据安全提示

• ⚠️ JSON数据仅存储在本地浏览器
• 导出前确保文件安全存储
• 不要包含真实的密码或凭据信息
• 使用安全的通道传输数据
• 考虑对敏感信息进行加密

示例场景

假设你在一个Windows域环境中进行渗透测试：

{
  "nodes": [
    { "id": "cidr-1", "type": "cidr", "data": { "label": "10.0.0.0/24" } },
    { "id": "dc-1", "type": "server", "data": { "label": "DC01", "subType": "dc", "tags": {"os": ["windows"], "domain": ["domain_controller"]} } },
    { "id": "ex-1", "type": "server", "data": { "label": "EX01", "subType": "mail", "tags": {"os": ["windows"], "service": ["exchange"], "risk": ["exposed"]} } },
    { "id": "db-1", "type": "server", "data": { "label": "DB01", "subType": "database", "tags": {"os": ["windows"], "service": ["sqlserver"], "risk": ["unpatched"]} } },
    { "id": "pc-1", "type": "pc", "data": { "label": "WORK-01", "tags": {"os": ["windows"], "domain": ["domain_member"]} } }
  ],
  "edges": [
    { "source": "cidr-1", "target": "dc-1", "data": { "type": "contains" } },
    { "source": "dc-1", "target": "pc-1", "data": { "type": "auth" } },
    { "source": "pc-1", "target": "ex-1", "data": { "type": "connects" } },
    { "source": "ex-1", "target": "db-1", "data": { "type": "depends_on" } }
  ]
}

常见问题

Q: 数据会被保存吗？ A: 数据仅存储在当前浏览器会话中。刷新页面会丢失数据，需要通过导出JSON来持久化。

Q: 可以编辑已有节点吗？ A: 目前版本支持拖拽移动节点。直接编辑功能在规划中。

Q: 最多支持多少个节点？ A: React Flow性能足以支持数百个节点，具体取决于浏览器性能。

Q: 支持什么浏览器？ A: 现代浏览器（Chrome、Firefox、Safari、Edge）

开发和贡献

本地开发

npm run dev      # 开发模式
npm run build    # 构建生产版本
npm run preview  # 预览生产构建

扩展节点类型

编辑 src/types/index.js 添加新的节点类型，然后在 src/components/nodes/ 中创建对应的组件。

许可证

该项目仅用于经过授权的安全测试和研究。

---

⚠️ 责任声明: 本工具仅用于经过授权的安全测试和防御性用途。任何未经授权的访问、测试或修改他人系统均属违法行为。使用者需自行承担所有法律责任。