Samuel-DD07/secure-react-pipeline
GitHub: Samuel-DD07/secure-react-pipeline
一个集成SAST、SCA和密钥检测的React CI/CD流水线，在GitHub Actions中自动阻断含安全风险的构建。
Stars: 0 | Forks: 0
# 安全 React 流水线
一个完全自动化的安全流水线，直接集成到 GitHub Actions 中。
该项目展示了如何将自动化安全检查（SAST、SCA 和 Secrets 检测）嵌入到 React 开发工作流中，以便在漏洞进入生产环境之前捕获它们。
## 在线部署
* **开发环境（持续部署）：** [https://secure-react-pipeline-dev.vercel.app](https://secure-react-pipeline-dev.vercel.app)
* **生产环境（手动触发）：** [https://dorismond.fr](https://dorismond.fr) （也可通过 [https://samuel.dorismond.fr](https://samuel.dorismond.fr) 访问）
## 架构与工作流
以下是安全检查如何集成到开发生命周期中：
```
graph TD
A[Developer] -->|git push / PR| B(GitHub Repository)
B --> C{GitHub Actions}
C -->|Parallel Scan 1| D[Gitleaks: Secrets & API Keys]
C -->|Parallel Scan 2| E[Semgrep: Static Analysis SAST]
C -->|Parallel Scan 3| F[OWASP Dependency-Check: SCA]
D & E & F --> G{Critical Vulns Found?}
G -->|Yes| H[Break the Build & Block PR]
G -->|No| I[Build Successful & Deploy]
```
## 集成安全工具
每次推送和拉取请求都会自动触发以下扫描：
| 扫描器 | 类别 | 检查内容 | 范围 |
|---|---|---|---|
| **Semgrep** | **SAST**（静态应用程序安全测试） | JavaScript/TypeScript 中的漏洞模式（XSS、不安全的 DOM 插入、错误配置） | React 代码库 |
| **OWASP Dependency-Check** | **SCA**（软件成分分析） | 过时或不安全的包以及 npm 依赖项中的已知 CVE | `package.json` 和 `package-lock.json` |
| **Gitleaks** | **Secrets 检测** | 硬编码的 API 密钥、私钥、数据库凭据和令牌 | 完整 Git 历史记录和提交差异 |
## 关键 DevSecOps 功能
### 中断构建策略
安全只有在阻止不良代码交付时才有效。此流水线配置了严格的质量门禁：
* **Gitleaks**：如果检测到任何暴露的密钥，立即以非零退出码退出。
* **Semgrep**：如果触发了 `Error` 类别中的规则（例如 CSRF 缺陷、DOM-XSS），则运行失败。
* **SCA**：标记包含高或严重级别 CVE 的构建。
### 性能与缓存优化
缓慢的流水线会让开发者感到沮丧。此流水线针对速度进行了优化：
* **数据库缓存**：OWASP Dependency-Check CVE 数据库在运行之间通过 GitHub Actions 缓存进行缓存，将扫描时间从 10 分钟减少到 2 分钟以下。
* **增量扫描**：Gitleaks 仅扫描拉取请求的提交范围，防止在较大的仓库上扫描缓慢。
### 左移（本地 Git Hooks）
在安全问题到达远程仓库之前捕获它们：
* 使用 **Husky** 和 **lint-staged** 在提交之前对暂存文件本地运行 Gitleaks。
## 实际发现与修复
以下是在测试 React 应用程序上使用此流水线检测并修复的实际发现：
| 工具 | 发现内容 | 严重性 | 实际影响 | 修复措施 |
| :--- | :--- | :---: | :--- | :--- |
| **Gitleaks** | 硬编码的 Stripe API 密钥 | **严重** | 潜在的财务风险和未授权后端访问 | 撤销密钥，将凭据移至 GitHub Actions Secrets 或环境变量 |
| **Semgrep** | 不安全地使用 `dangerouslySetInnerHTML` | **高** | 通过用户输入注入导致跨站脚本（XSS） | 替换为安全的 JSX 渲染或使用 `dompurify` 进行清理 |
| **OWASP SCA** | `axios < 1.6.0` (CVE-2023-45857) | **高** | SSRF（服务端请求伪造）漏洞 | 运行 `npm install axios@latest` 以升级到修补版本 |
## 如何设置
### 1. 复制配置
将工作流配置文件复制到您的项目中：
```
cp .github/workflows/security.yml your-project/.github/workflows/
```
### 2. 配置 GitHub Secrets
将任何必要的令牌或环境变量添加到您的仓库中的 **Settings > Secrets and variables > Actions**。
由 [Samuel Dorismond](https://www.dorismond.fr) 构建 — 自由职业 DevSecOps 工程师和安全顾问
标签：DevSecOps, GitHub Actions, Gitleaks, OWASP Dependency-Check, React, SAST, Semgrep, Syscalls, WordPress安全扫描, 上游代理, 二进制发布, 前端安全, 安全, 安全扫描, 开源工具, 开源框架, 持续部署, 持续集成, 数据可视化, 时序注入, 盲注攻击, 秘密检测, 管道, 网络调试, 自动化, 自动笔记, 自定义脚本, 超时处理, 软件组成分析, 错误基检测, 静态代码分析