如何整合OWASP ZAP与Cypress，同步运行并获取两者测试结果？

一、准备工作 #

• 确保已安装Node.js（v16+ 推荐）
• 已有Cypress E2E测试项目（若没有，执行npm init -y && npm install cypress --save-dev初始化）
• 安装OWASP ZAP：推荐用Docker版（无需手动安装桌面端），也可使用官方桌面版

二、启动并配置OWASP ZAP代理 #

Docker版启动命令 #

执行以下命令启动ZAP容器，暴露代理端口（8080）和API端口（8090），设置API密钥并允许远程访问：

docker run -d -p 8080:8080 -p 8090:8090 owasp/zap2docker-stable zap.sh -daemon -port 8080 -host 0.0.0.0 -api-key YOUR_CUSTOM_API_KEY -config api.addrs.addr.name=.* -config api.addrs.addr.regex=true

替换YOUR_CUSTOM_API_KEY为你自己的密钥（可任意设置，或用ZAP生成的密钥）

桌面版配置 #

1. 打开ZAP桌面端，依次点击Tools -> Options -> API
2. 勾选Allow remote access，设置API Key
3. 点击Network -> Local Proxies，确认代理端口为8080

三、配置Cypress通过ZAP代理访问应用 #

修改项目根目录下的cypress.config.js，添加代理配置：

const { defineConfig } = require("cypress");

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      // 后续可在此扩展ZAP结果处理逻辑
    },
    // 指向ZAP代理地址
    proxyUrl: "http://localhost:8080",
    // 忽略测试环境自签SSL证书错误（按需开启）
    ignoreCertificates: true,
    // 设置你的应用基础地址
    baseUrl: "http://your-test-app-url"
  },
});

四、同步执行测试并收集结果 #

创建一个Node.js脚本zap-cypress-run.js，实现Cypress测试与ZAP扫描的联动：

const axios = require('axios');
const { execSync } = require('child_process');
const fs = require('fs');

// 配置参数
const ZAP_CONFIG = {
  apiKey: 'YOUR_CUSTOM_API_KEY',
  apiUrl: 'http://localhost:8090',
  contextName: 'Cypress-E2E-Context'
};
const APP_BASE_URL = 'http://your-test-app-url';

// 初始化ZAP扫描上下文
async function initZapContext() {
  // 创建新上下文
  await axios.get(`${ZAP_CONFIG.apiUrl}/JSON/context/action/newContext/`, {
    params: {
      apikey: ZAP_CONFIG.apiKey,
      contextName: ZAP_CONFIG.contextName
    }
  });
  // 将测试应用纳入扫描范围
  await axios.get(`${ZAP_CONFIG.apiUrl}/JSON/context/action/includeInContext/`, {
    params: {
      apikey: ZAP_CONFIG.apiKey,
      contextName: ZAP_CONFIG.contextName,
      regex: `${APP_BASE_URL}/.*`
    }
  });
}

// 运行Cypress E2E测试
function runCypress() {
  console.log('\n=== 启动Cypress功能测试 ===');
  execSync('npx cypress run', { stdio: 'inherit' });
}

// 生成ZAP漏洞报告
async function generateZapReports() {
  console.log('\n=== 生成ZAP漏洞报告 ===');
  
  // 生成HTML可视化报告
  const htmlReport = await axios.get(`${ZAP_CONFIG.apiUrl}/HTML/report/`, {
    params: {
      apikey: ZAP_CONFIG.apiKey,
      contextName: ZAP_CONFIG.contextName
    },
    responseType: 'stream'
  });
  htmlReport.data.pipe(fs.createWriteStream('./zap-vulnerability-report.html'));
  console.log('HTML漏洞报告已保存至 ./zap-vulnerability-report.html');

  // 生成JSON格式漏洞列表（便于自动化分析）
  const alerts = await axios.get(`${ZAP_CONFIG.apiUrl}/JSON/alerts/view/alerts/`, {
    params: {
      apikey: ZAP_CONFIG.apiKey,
      baseurl: APP_BASE_URL
    }
  });
  fs.writeFileSync('./zap-alerts.json', JSON.stringify(alerts.data, null, 2));
  console.log('JSON漏洞列表已保存至 ./zap-alerts.json');
}

// 主执行流程
async function main() {
  try {
    await initZapContext();
    runCypress();
    await generateZapReports();
    console.log('\n=== 测试与扫描全部完成 ===');
  } catch (err) {
    console.error('执行出错:', err);
    process.exit(1);
  }
}

main();

执行步骤 #

1. 安装依赖：npm install axios --save-dev
2. 确保ZAP已启动（Docker容器或桌面端）
3. 运行脚本：node zap-cypress-run.js

五、结果查看 #

• Cypress功能测试结果：控制台会输出测试通过率，同时在cypress/videos和cypress/screenshots目录下生成测试视频与截图
• ZAP漏洞结果：
  • zap-vulnerability-report.html：可视化漏洞报告，包含漏洞等级、描述、修复建议
  • zap-alerts.json：结构化漏洞数据，可用于后续CI/CD流水线的自动化漏洞检查

注意事项 #

• 确保ZAP在Cypress测试启动前已完全就绪（Docker启动需等待约30秒）
• 若测试应用有身份验证，需在ZAP中配置会话令牌或让Cypress的登录请求通过代理传递给ZAP，确保ZAP能扫描需授权的页面
• 生产环境建议限制ZAP API的访问权限，避免未授权调用

内容的提问来源于stack exchange，提问作者Dev Patel