📊 结果分析器

更新: 7/29/2025 字数: 0 字 时长: 0 分钟

📈 Api-Finder 结果分析器

深度分析扫描结果，生成详细的API报告和可视化图表

📁

上传扫描结果文件

支持 JSON、CSV、TXT 格式的扫描结果文件

或将文件拖拽到此区域

<div class="sample-data">
  <h4>🎯 或使用示例数据</h4>
  <div class="sample-buttons">
    <button class="btn-sample" data-sample="ecommerce">🛒 电商网站</button>
    <button class="btn-sample" data-sample="blog">📝 博客系统</button>
    <button class="btn-sample" data-sample="api">🔌 API服务</button>
    <button class="btn-sample" data-sample="admin">⚙️ 管理后台</button>
  </div>
</div>

📊 分析结果

<!-- 概览统计 -->
<div class="overview-stats">
  <div class="stat-grid">
    <div class="stat-card primary">
      <div class="stat-icon">🔍</div>
      <div class="stat-content">
        <div class="stat-number" id="total-endpoints">0</div>
        <div class="stat-label">API端点总数</div>
      </div>
    </div>
    <div class="stat-card success">
      <div class="stat-icon">✅</div>
      <div class="stat-content">
        <div class="stat-number" id="high-confidence">0</div>
        <div class="stat-label">高置信度API</div>
      </div>
    </div>
    <div class="stat-card warning">
      <div class="stat-icon">⚠️</div>
      <div class="stat-content">
        <div class="stat-number" id="potential-issues">0</div>
        <div class="stat-label">潜在问题</div>
      </div>
    </div>
    <div class="stat-card info">
      <div class="stat-icon">🏷️</div>
      <div class="stat-content">
        <div class="stat-number" id="unique-paths">0</div>
        <div class="stat-label">唯一路径</div>
      </div>
    </div>
  </div>
</div>

<!-- 图表分析 -->
<div class="charts-section">
  <div class="chart-grid">
    <div class="chart-card">
      <h4>📊 HTTP方法分布</h4>
      <canvas id="methods-chart" width="300" height="200"></canvas>
    </div>
    <div class="chart-card">
      <h4>📈 置信度分布</h4>
      <canvas id="confidence-chart" width="300" height="200"></canvas>
    </div>
    <div class="chart-card">
      <h4>🌐 端点类型分析</h4>
      <canvas id="endpoints-chart" width="300" height="200"></canvas>
    </div>
    <div class="chart-card">
      <h4>📍 路径深度分析</h4>
      <canvas id="depth-chart" width="300" height="200"></canvas>
    </div>
  </div>
</div>

<!-- 详细分析 -->
<div class="detailed-analysis">
  <div class="analysis-tabs">
    <button class="tab-btn active" data-tab="endpoints">🔗 端点详情</button>
    <button class="tab-btn" data-tab="security">🛡️ 安全分析</button>
    <button class="tab-btn" data-tab="patterns">🔍 模式识别</button>
    <button class="tab-btn" data-tab="recommendations">💡 建议</button>
  </div>

  <div id="tab-endpoints" class="tab-content active">
    <div class="endpoints-table">
      <div class="table-controls">
        <input type="text" id="search-endpoints" placeholder="🔍 搜索端点..." class="search-input">
        <select id="filter-method" class="filter-select">
          <option value="">所有方法</option>
          <option value="GET">GET</option>
          <option value="POST">POST</option>
          <option value="PUT">PUT</option>
          <option value="DELETE">DELETE</option>
        </select>
        <select id="filter-confidence" class="filter-select">
          <option value="">所有置信度</option>
          <option value="high">高 (>90%)</option>
          <option value="medium">中 (70-90%)</option>
          <option value="low">低 (<70%)</option>
        </select>
      </div>
      <div class="table-container">
        <table id="endpoints-table">
          <thead>
            <tr>
              <th>方法</th>
              <th>端点</th>
              <th>置信度</th>
              <th>来源</th>
              <th>参数</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody id="endpoints-tbody">
            <!-- 端点数据将在这里显示 -->
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <div id="tab-security" class="tab-content">
    <div class="security-analysis">
      <div class="security-alerts">
        <h4>🚨 安全警告</h4>
        <div id="security-alerts-list">
          <!-- 安全警告将在这里显示 -->
        </div>
      </div>
      
      <div class="security-recommendations">
        <h4>🛡️ 安全建议</h4>
        <div id="security-recommendations-list">
          <!-- 安全建议将在这里显示 -->
        </div>
      </div>
    </div>
  </div>

  <div id="tab-patterns" class="tab-content">
    <div class="patterns-analysis">
      <div class="pattern-card">
        <h4>🔍 URL模式</h4>
        <div id="url-patterns">
          <!-- URL模式将在这里显示 -->
        </div>
      </div>
      
      <div class="pattern-card">
        <h4>📊 参数模式</h4>
        <div id="parameter-patterns">
          <!-- 参数模式将在这里显示 -->
        </div>
      </div>
      
      <div class="pattern-card">
        <h4>🏷️ 命名约定</h4>
        <div id="naming-patterns">
          <!-- 命名约定将在这里显示 -->
        </div>
      </div>
    </div>
  </div>

  <div id="tab-recommendations" class="tab-content">
    <div class="recommendations">
      <div class="recommendation-card">
        <div class="recommendation-icon">🚀</div>
        <div class="recommendation-content">
          <h4>性能优化建议</h4>
          <ul id="performance-recommendations">
            <!-- 性能建议将在这里显示 -->
          </ul>
        </div>
      </div>
      
      <div class="recommendation-card">
        <div class="recommendation-icon">📚</div>
        <div class="recommendation-content">
          <h4>文档改进建议</h4>
          <ul id="documentation-recommendations">
            <!-- 文档建议将在这里显示 -->
          </ul>
        </div>
      </div>
      
      <div class="recommendation-card">
        <div class="recommendation-icon">🔧</div>
        <div class="recommendation-content">
          <h4>开发改进建议</h4>
          <ul id="development-recommendations">
            <!-- 开发建议将在这里显示 -->
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

📖 使用指南

🚀 快速开始

1. 上传文件 - 选择或拖拽Api-Finder生成的结果文件
2. 自动分析 - 系统自动解析并分析API数据
3. 查看报告 - 浏览详细的分析结果和可视化图表
4. 导出报告 - 将分析结果导出为PDF、Excel或HTML格式

📊 分析功能

🔍 基础统计

• API端点总数 - 发现的所有API端点数量
• 高置信度API - 置信度超过90%的可靠API
• 潜在问题 - 可能存在问题的端点
• 唯一路径 - 去重后的API路径数量

📈 可视化图表

• HTTP方法分布 - GET、POST、PUT、DELETE等方法的分布情况
• 置信度分布 - API发现置信度的分布直方图
• 端点类型分析 - REST、GraphQL、WebSocket等类型分析
• 路径深度分析 - API路径层级深度统计

🛡️ 安全分析

• 敏感端点检测 - 识别可能包含敏感信息的API
• 认证缺失检测 - 发现可能缺少认证的端点
• 参数注入风险 - 检测可能存在注入风险的参数
• CORS配置检查 - 分析跨域资源共享配置

🔍 模式识别

• URL命名模式 - 分析API命名约定和模式
• 参数模式 - 识别常见的参数命名和类型模式
• 版本控制模式 - 检测API版本控制策略
• RESTful合规性 - 评估API设计的RESTful程度

📋 支持的文件格式

JSON格式

{
  "scan_info": {
    "target": "https://example.com",
    "timestamp": "2024-01-01T00:00:00Z"
  },
  "apis": [
    {
      "method": "GET",
      "endpoint": "/api/users",
      "confidence": 0.95,
      "source": "main.js"
    }
  ]
}

CSV格式

method,endpoint,confidence,source
GET,/api/users,0.95,main.js
POST,/api/login,0.98,auth.js

TXT格式

GET /api/users (95%) - main.js
POST /api/login (98%) - auth.js

💡 分析建议

🎯 最佳实践

• 定期分析 - 定期对API进行扫描和分析
• 关注安全 - 重点关注安全分析结果
• 文档同步 - 根据分析结果更新API文档
• 性能优化 - 根据建议优化API性能

⚠️ 注意事项

• 数据隐私 - 上传的文件仅在本地处理，不会发送到服务器
• 文件大小 - 建议文件大小不超过10MB
• 浏览器兼容 - 建议使用现代浏览器以获得最佳体验