前端项目安全审计工具

🛡️ 开源了一个前端项目安全审计工具：支持本地和远程仓库的全面漏洞检测

前言

作为前端开发者，你是否曾经担心过项目中使用的 npm 包存在安全漏洞？是否想要快速审计一个 GitHub 开源项目的安全性？今天分享一个我开发的前端安全审计工具 mcp-web-audit，它可以帮你全面检测项目中的安全风险。

🎯 工具特色

核心功能

🛡️ 全面审计：检测所有直接和间接依赖的安全漏洞
🌐 多源支持：支持本地项目和远程 GitHub 仓库
📊 详细报告：生成标准 Markdown 格式的安全报告
🔌 MCP 集成：作为 Model Context Protocol 服务器提供 AI 集成
⚡ 零安装：通过 npx 直接使用，无需全局安装
🚀 自动化：全流程自动化，无需手动干预

技术栈

运行环境：Node.js (ES Modules)
核心依赖 ：
- @modelcontextprotocol/sdk：MCP 协议支持
- ejs：模板引擎用于报告生成
- zod：数据验证

🚀 快速体验

零安装使用

最简单的使用方式，无需安装任何包：

bash 复制代码

# 审计本地项目
npx mcp-web-audit /path/to/your/project

# 审计远程仓库（比如想看看 React 项目的安全性）
npx mcp-web-audit https://github.com/facebook/react

# 指定输出文件
npx mcp-web-audit ./my-project -o ./security-report.md

安装使用

bash 复制代码

# 全局安装
npm install -g mcp-web-audit

# 使用
mcp-web-audit /path/to/your/project

💡 使用场景

1. 项目安全检查

开发过程中，定期检查项目依赖的安全性：

bash 复制代码

# 检查当前项目
npx mcp-web-audit .

# 检查生产环境项目
npx mcp-web-audit /path/to/production/project -o security-audit.md

2. 开源项目评估

想要使用某个开源项目，但担心其安全性？

bash 复制代码

# 评估 Vue.js 的安全性
npx mcp-web-audit https://github.com/vuejs/vue

# 评估 Webpack 的安全性
npx mcp-web-audit https://github.com/webpack/webpack -o webpack-security.md

3. CI/CD 集成

在持续集成流程中加入安全检查：

yaml 复制代码

# GitHub Actions 示例
name: Security Audit
on: [push, pull_request]

jobs:
  security:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: "16"
      - name: Run security audit
        run: npx mcp-web-audit . -o security-report.md
      - name: Upload report
        uses: actions/upload-artifact@v2
        with:
          name: security-report
          path: security-report.md

🔍 技术实现深度解析

架构设计

工具采用模块化设计，主要包含以下模块：

bash 复制代码

src/
├── audit/              # 审计核心模块
├── parseProject/       # 项目解析（支持本地和远程）
├── generateLock/       # Lock 文件生成
├── render/             # 报告渲染
├── workDir/            # 临时工作目录管理
└── mcpServer.js        # MCP 服务器

核心流程

让我们看看 auditPackage 函数的实现：

javascript 复制代码

export async function auditPackage(projectRoot, savePath) {
  // 1. 创建工作目录
  const workDir = await createWorkDir();

  // 2. 解析项目，支持本地和远程仓库
  const packageJson = await parseProject(projectRoot);

  // 3. 生成 lock 文件
  await generateLock(workDir, packageJson);

  // 4. 执行安全审计
  const auditResult = await audit(workDir, packageJson);

  // 5. 渲染审计结果为 Markdown
  const renderedResult = await render(auditResult, packageJson);

  // 6. 清理临时文件
  await deleteWorkDir(workDir);

  // 7. 保存报告
  await fs.promises.writeFile(savePath, renderedResult);
}

远程仓库支持

工具的一个亮点是支持直接审计远程 GitHub 仓库，无需手动克隆：

javascript 复制代码

// 自动识别远程 URL 并处理
if (projectPath.startsWith("http://") || projectPath.startsWith("https://")) {
  // 远程仓库处理逻辑
  await parseRemoteProject(projectPath);
} else {
  // 本地项目处理逻辑
  await parseLocalProject(projectPath);
}

MCP 协议集成

作为 Model Context Protocol 服务器，可以与 AI 系统集成：

javascript 复制代码

const server = new McpServer({
  name: "audit-server",
  title: "前端工程安全审计服务",
  version: "0.1.0",
});

server.registerTool(
  "auditPackage",
  {
    title: "审计前端工程",
    description: "审计前端工程的所有直接和间接依赖...",
    inputSchema: {
      projectRoot: z.string().describe("项目根路径或远程仓库URL"),
      savePath: z.string().describe("审计报告保存路径"),
    },
  },
  async ({ projectRoot, savePath }) => {
    await auditPackage(projectRoot, savePath);
    return {
      content: [{ type: "text", text: `审计完成，结果已保存到: ${savePath}` }],
    };
  }
);

📊 审计报告示例

生成的报告包含丰富的安全信息：

markdown 复制代码

# 项目安全审计报告

## 📊 审计概要

- **项目名称**: my-awesome-project
- **审计时间**: 2024-12-02 10:30:00
- **依赖总数**: 1,234 个

## 🚨 漏洞汇总

- **Critical**: 2 个
- **High**: 5 个
- **Moderate**: 12 个
- **Low**: 8 个

## 🔍 详细漏洞列表

### Critical 级别漏洞

#### 1. Prototype Pollution in lodash

- **影响包**: lodash@4.17.15
- **修复版本**: >= 4.17.19
- **描述**: 原型污染漏洞可能导致拒绝服务攻击
- **修复建议**: 升级到 lodash@4.17.19 或更高版本

🎯 应用场景实践

企业级安全审计

在企业环境中，可以配合内部工具链使用：

bash 复制代码

# 批量审计多个项目
for project in project1 project2 project3; do
  npx mcp-web-audit "/company/projects/$project" -o "reports/$project-audit.md"
done

开源项目贡献前检查

在给开源项目提 PR 之前，先检查其安全性：

bash 复制代码

# Fork 仓库后审计
npx mcp-web-audit https://github.com/yourusername/forked-project

技术选型参考

评估不同技术栈的安全性：

bash 复制代码

# 比较不同框架的安全性
npx mcp-web-audit https://github.com/angular/angular -o angular-audit.md
npx mcp-web-audit https://github.com/vuejs/vue -o vue-audit.md
npx mcp-web-audit https://github.com/facebook/react -o react-audit.md

🔧 高级用法

编程式调用

在 Node.js 项目中直接使用：

javascript 复制代码

import { auditPackage } from "mcp-web-audit";

// 审计并处理结果
try {
  await auditPackage("/path/to/project", "./audit-result.md");
  console.log("✅ 审计完成");

  // 可以进一步处理审计结果
  const auditContent = await fs.readFile("./audit-result.md", "utf8");
  // 发送到企业安全平台等
} catch (error) {
  console.error("❌ 审计失败:", error.message);
}

与其他工具集成

结合其他安全工具形成完整的安全检查流程：

bash 复制代码

#!/bin/bash
# security-check.sh

echo "🔍 开始安全检查..."

# 1. 依赖安全审计
npx mcp-web-audit . -o dependency-audit.md

# 2. 代码静态分析
eslint src/ --ext .js,.ts,.jsx,.tsx

# 3. 许可证检查
npx license-checker --summary

echo "✅ 安全检查完成"

🚀 未来规划

即将推出的功能

多语言支持：计划支持 Python、Go 等其他语言的项目审计
可视化报告：提供 HTML 格式的可视化安全报告
风险评分：为项目提供综合安全评分
修复建议：自动生成修复脚本
持续监控：定期检查并通知新的安全漏洞

贡献指南

欢迎大家参与项目开发：

bash 复制代码

# 克隆项目
git clone https://github.com/shenzhihao/mcp-web-audit.git
cd mcp-web-audit

# 安装依赖
npm install

# 运行测试
npm test

# 本地调试
node bin/cli.js /path/to/test/project

💭 总结

mcp-web-audit 是一个简单易用但功能强大的前端安全审计工具。它的主要优势在于：

使用简单：零安装，一行命令即可开始审计
功能全面：支持本地和远程项目的深度安全检查
集成友好：可以轻松集成到 CI/CD 流程中
报告详细：提供清晰的 Markdown 格式报告

在当今网络安全威胁日益增加的环境下，定期进行依赖安全审计是每个前端项目的必要实践。希望这个工具能够帮助大家更好地保护项目安全。

如果你觉得这个工具有用，欢迎：

⭐ GitHub 点个 Star
🐛 提交 Issue 反馈问题
🔧 提交 PR 贡献代码
📢 分享给更多的开发者

项目地址 ：github.com/Shen-zhihao...

让我们一起为前端生态的安全贡献力量！ 🛡️✨

你使用过哪些前端安全工具？对这个工具有什么建议或想法？欢迎在评论区分享交流！