目录

• 写在前面
• 代码提交
• 合并 PR 以及 CI/CD

写在前面

基于 Vite + Vue3 的前端项目，在路由配置里使用glob，按照/src/views/**/*.{vue,tsx} 的规则批量导入页面组件。由于组内成员在开发阶段于/src/views目录下编写测试页面，硬编码了开发用的第三方系统密钥，打包构建没有及时排除，导致系统上线之后被检测出密钥泄露，算是个安全事故。

以往组内人员提交代码时还能人工进行审查，引入AI工具之后，每天生成的代码量巨大，审查已力不从心。

需要做一些工程手段，将密钥泄露的发生阻挡在代码提交之前。目前已有成熟工具用来检测Git仓库敏感信息泄露，如 Gitleaks 和同一作者的 Betterleaks，后者为前者的续作。

经过实际测试，Betterleaks 相比 Gitleaks 速度更快，误报更少，支持更多特性，另外作者表示今后将开发重心全面转向前者，后者仅维护和发布安全相关的更新。所以新项目，使用 Betterleaks 更为适合，不过由于遗留原因，我这里仍然使用 Gitleask，它们两个的命令是高度兼容的，可以直接替换。

理想的处理流程为 pre-commit --> [PR] --> CI/CD，其中PR阶段可选。我觉得在提交前已经做了检测，合并时再做一遍有点多余，不过也不排除会出现越过检查强制提交的情况。

我主要负责前端相关事项，所以主要聚焦在前端项目如何执行上述流程。

代码提交

pre-commit钩子，它在Git提交前执行，失败时返回非零码会终止提交，完美契合此应用场景。

前端项目可以使用 Husky 来运行 pre-commit，它是一个npm包，跨平台，支持GUI和命令行，以及完备的13种钩子。

安装

pnpm add --save-dev husky

执行初始化命令之后，根目录会出现一个.husky目录

pnpm exec husky init

pre-commit为钩子文件，后续会在该文件内写入检测逻辑，文件会被提交到Git里和源代码一块做版本控制。

”-“ 目录为Husk内部文件，不用管。

同时Husky会往”packge.json“文件的scripts对象里新增一个prepare字段，作为npm的一个生命周期钩子，执行”pnpm install"命令安装依赖后，会自动执行该钩子初始化Husky，确保Git钩子在团队的每个人所用的机器上自动生效。

{
  "scripts": {
    "dev": "vite --host 0.0.0.0",
    ...,
    "prepare": "husky"
  }
}

前往 Gitleaks 下载可执行的二进制文件，保存在本地计算机，将路径添加到环境变量。

在“package.json"文件里添加对应的检查Git暂存区的命令。

{
  "scripts": {
    "dev": "vite --host 0.0.0.0",
    ...,
    "prepare": "husky",
    "check:staged": "gitleaks git --staged --verbose "
  }
}

运行命令测试能否正常执行检测

pnpm run check:staged

每次新机器克隆仓库，都需要在本地重新手动安装配置一遍Gitleaks，太麻烦，考虑写个自动化脚本，执行“pnpm install"命令之后，可以和Husky一样自动化配置。

我用AI糊了一份js（install-gitleaks.mjs）脚本，实现根据操作系统下载对应二进制文件，创建gitleaks配置，更新 .gitignre 规则。

同时因为 gitleaks下载之后没有写入环境变量，所以又糊一份js脚本，执行”gitleaks git --staged --verbose“命令，并输出美观的提示。

更新”package.json"文件，在prepare钩子中，自动初始化Husky及安装Gitleaks。

{
  "scripts": {
    "dev": "vite --host 0.0.0.0",
    ...,
    "prepare": "husky && node scripts/install-gitleaks.mjs",
    "check:staged": "node scripts/run-gitleaks.mjs"
  }
}

最后在 pre-commit 文件中写入检测命令，如下：

pnpm run check:staged
if [ $? -ne 0 ]; then
  echo "Secret detected"
  exit 1
fi

除检测代码提交前的暂存区外，还应将构建后输出的产物目录—dist，检测一遍，尤其是打包流程不规范，直接在开发环境下打包的情况。代码还没commit，push呢，就先build，绕过了后续检查。

当然这些都可以借助npm钩子来实现自动化。

合并 PR 以及 CI/CD

我记得Github提供有密钥泄露检测功能，检测到会发送邮件通知，但是使用自建的Git 服务，例如Gitea，需要自行配置。

首先需要安装好 Gitea Act Runner ，最好Runner所在的服务器上安装好Gitleaks，省的执行工作流还要再重复下载。

这是一份简单工作流配置文件，创建PR时触发，会自动检测代码中是否存在密钥泄露。

# .gitea/workflows/pr-check.yaml
name: PR Check

on:
  pull_request:

jobs:
  check:
    runs-on: ubuntu

    steps:
      - uses: https://gitea.com/actions/checkout@v4
        with:
          fetch-depth: 0

      - name: Fetch base branch
        run: |
          # 确定要合并的目标分支
          git fetch origin main

      - name: Scan PR commits
        run: |
          # 找到共同提交点，只检查PR新增的提交
          BASE=$(git merge-base origin/main HEAD)
          echo "BASE=$BASE"
          git log --oneline $BASE..HEAD
          gitleaks git \
            --log-opts="$BASE..HEAD" \
            --exit-code 1

CI/CD 基本就是重复上述过程，在工作流中，构建打包之后，执行之前提到的自定义npm命令，检查输出目录dist，不再赘述。

切记，尽量流程化，标准化，自动化！！！