如何将npm audit漏洞报告以HTML格式展示？

当然有啦！我来给你分享几个实用的方法，帮你把npm audit的JSON报告转成直观的HTML页面：

方法1：用现成的npm包（最省心） #

有个专门的工具npm-audit-html可以直接帮你完成转换，步骤超简单：

• 先安装工具（推荐本地安装，避免全局污染）：

  npm install npm-audit-html --save-dev
  

• 然后把npm audit的JSON输出直接管道给这个工具：

  npm audit --json | npx npm-audit-html
  

• 执行完之后，当前目录会生成一个npm-audit.html文件，打开就能看到排版清晰的HTML报告了——它会按漏洞严重程度（Critical/High/Medium/Low）分类展示，还包含修复建议和漏洞详情，非常直观。

方法2：自己写Node.js脚本定制HTML #

如果不想依赖第三方包，或者需要完全自定义HTML样式和内容，可以自己写个简单的Node.js脚本处理：

1. 先把npm audit的JSON输出保存到文件：

   npm audit --json > audit.json
   

2. 创建一个audit-to-html.js脚本，内容如下：

   const fs = require('fs');
   
   // 读取JSON数据
   const auditData = JSON.parse(fs.readFileSync('audit.json', 'utf8'));
   
   // 构建HTML内容，可自定义样式
   let htmlContent = `
   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <title>NPM Security Audit Report</title>
       <style>
           body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; max-width: 1200px; margin: 0 auto; padding: 20px; }
           .header { padding-bottom: 20px; border-bottom: 1px solid #eee; }
           .vuln-section { margin-top: 30px; }
           .vuln-item { padding: 15px; margin: 10px 0; border-radius: 8px; border-left: 4px solid; }
           .critical { border-color: #dc3545; background-color: #f8d7da; }
           .high { border-color: #fd7e14; background-color: #fff3cd; }
           .medium { border-color: #ffc107; background-color: #fff3cd; }
           .low { border-color: #28a745; background-color: #d4edda; }
           .severity { font-weight: bold; font-size: 1.1em; }
           .pkg-name { font-size: 1.2em; margin-bottom: 8px; }
       </style>
   </head>
   <body>
       <div class="header">
           <h1>NPM Security Audit Report</h1>
           <p>扫描时间: ${new Date(auditData.metadata.timestamp).toLocaleString()}</p>
           <p>总漏洞数: ${auditData.metadata.vulnerabilities.total} | Critical: ${auditData.metadata.vulnerabilities.critical} | High: ${auditData.metadata.vulnerabilities.high} | Medium: ${auditData.metadata.vulnerabilities.medium} | Low: ${auditData.metadata.vulnerabilities.low}</p>
       </div>
   `;
   
   // 遍历所有漏洞信息
   Object.values(auditData.advisories).forEach(advisory => {
       htmlContent += `
       <div class="vuln-item ${advisory.severity}">
           <div class="pkg-name">${advisory.module_name}</div>
           <div class="severity">${advisory.severity.toUpperCase()} Severity</div>
           <p><strong>修复建议:</strong> ${advisory.recommendation}</p>
           <p><strong>漏洞描述:</strong> ${advisory.overview}</p>
           <p><strong>修复版本:</strong> ${advisory.patched_versions}</p>
       </div>
       `;
   });
   
   htmlContent += `</body></html>`;
   
   // 写入HTML文件
   fs.writeFileSync('custom-audit-report.html', htmlContent);
   console.log('自定义HTML报告已生成: custom-audit-report.html');
   

3. 运行脚本生成HTML：

   node audit-to-html.js
   

这样你就能得到完全自定义的HTML报告，样式和内容都可以根据自己的需求调整。

方法3：CLI工具组合（进阶玩法） #

如果你熟悉jq（一个JSON处理CLI工具）和模板引擎，也可以用它们组合生成HTML。比如先用jq提取关键数据，再用mustache或handlebars等模板引擎渲染成HTML。不过这个方法需要额外安装工具，步骤相对繁琐，适合有CLI工具使用经验的同学。

总的来说，第一种方法最适合快速生成标准HTML报告，第二种方法适合需要定制化的场景，你可以根据自己的需求选择~

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