修复React TypeScript项目中存在漏洞的NPM依赖包

我正在用Node.js开发一个项目，执行npm install后发现大量依赖漏洞。以下是我的package.json内容：

{
  "name": "pretty-chat-react-typescript",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^13.0.0",
    "@testing-library/user-event": "^13.2.1",
    "@types/jest": "^27.0.1",
    "@types/node": "^16.7.13",
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "antd": "^4.21.5",
    "axios": "^1.7.7",
    "npm-force-resolutions": "^0.0.10",
    "react": "^18.2.0",
    "react-chat-engine-advanced": "0.1.21",
    "react-dom": "^18.2.0",
    "react-scripts": "^5.0.1",
    "resolve-url-loader": "^5.0.0",
    "typescript": "^4.4.2",
    "web-vitals": "^2.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

我已经尝试过以下操作：

• 执行npm audit查看漏洞详情
• 执行npm audit fix修复了大部分漏洞，但仍有10个未解决
• 执行npm audit fix --force导致部分包损坏
• 尝试使用overrides配置后情况恶化

分步解决方案 #

1. 先恢复到未损坏的依赖状态 #

如果npm audit fix --force破坏了依赖，先回滚到正常状态：

# 用Git恢复之前的package-lock.json（有版本控制时）
git restore package-lock.json node_modules
# 重新安装依赖
npm install

2. 升级核心依赖到兼容稳定版 #

项目中多个核心依赖版本偏旧，优先升级这些包以减少漏洞，同时保证兼容性：
修改package.json的dependencies部分：

"dependencies": {
  "@testing-library/jest-dom": "^5.17.0",
  "@testing-library/react": "^14.0.0",
  "@testing-library/user-event": "^14.4.3",
  "@types/jest": "^29.5.5",
  "@types/node": "^20.8.0",
  "@types/react": "^18.2.34",
  "@types/react-dom": "^18.2.14",
  "antd": "^4.24.15",
  "axios": "^1.7.7",
  "react": "^18.2.0",
  "react-chat-engine-advanced": "0.1.21",
  "react-dom": "^18.2.0",
  "react-scripts": "5.0.1",
  "resolve-url-loader": "^5.0.0",
  "typescript": "^4.9.5",
  "web-vitals": "^3.5.0"
}

注：保留react-chat-engine-advanced固定版本，避免盲目升级引发兼容性问题，后续单独处理它的潜在漏洞

3. 精准配置overrides修复剩余漏洞 #

执行npm audit定位剩余10个漏洞的具体依赖包，然后在package.json中添加overrides字段强制升级有漏洞的子依赖。例如常见漏洞包的配置示例：

"overrides": {
  "glob": "^10.3.10",
  "minimatch": "^9.0.3",
  "nth-check": "^2.1.1",
  "postcss": "^8.4.31"
}

务必根据npm audit的实际结果针对性添加，不要盲目复制示例

4. 清理并重新安装依赖 #

# 删除旧依赖和锁文件
rm -rf node_modules package-lock.json
# 重新安装
npm install
# 再次检查漏洞
npm audit

5. 处理react-chat-engine-advanced的潜在问题 #

如果剩余漏洞来自这个固定版本包：

• 查看该包是否有更新版本，尝试升级到最新兼容版
• 若无更新，评估漏洞风险，低风险漏洞可考虑忽略（仅在确认不影响项目安全时）
• 必要时替换为功能类似的维护活跃的包

额外注意事项 #

• 禁止随意使用npm audit fix --force，它会强制升级包，极易破坏依赖兼容性
• 定期用npm outdated查看可升级的依赖，保持核心包在稳定版本
• 执行npm audit --production可只检查生产环境依赖的漏洞，忽略开发环境的低风险问题

内容的提问来源于stack exchange，提问作者ekraj singh toor