如何在纯前端JavaScript中访问GitHub Secrets存储的API密钥

前置说明：该方案仅能避免明文密钥被提交到公开代码仓库，所有最终运行在用户浏览器中的前端代码，无论通过什么方式注入密钥，用户都可以通过浏览器开发者工具查看到密钥值，对于课程项目场景该方案足够使用，若要彻底规避密钥被恶意盗用，需要额外搭建后端代理层，不属于你当前技术栈需要处理的范畴

具体实现步骤 #

你不需要掌握后端技术，也不需要引入复杂的打包工具，核心逻辑就是：本地写代码时用特殊占位符代替真实密钥，GitHub Actions部署时自动把占位符替换成存在Secrets里的真实密钥，再把替换后的静态文件部署出去即可。

1. 编写GitHub Workflow配置 #

在你的代码仓库中新建路径.github/workflows/deploy.yml，写入以下配置（记得按注释改成你自己的仓库配置）：

name: 前端静态页部署
on:
  push:
    branches: [ main ] # 如果你主分支是master就改成master
permissions:
  contents: read
  pages: write
  id-token: write

jobs:
  build-deploy:
    runs-on: ubuntu-latest
    environment:
      name: github-pages
      url: ${{ steps.deploy.outputs.page_url }}
    steps:
      - name: 拉取仓库代码
        uses: actions/checkout@v4

      - name: 注入API密钥到JS文件
        env:
          # 把SECRET_API_KEY替换成你自己在GitHub Secrets里存的密钥名
          REAL_API_KEY: ${{ secrets.SECRET_API_KEY }}
        run: |
          # 把./js/main.js替换成你自己项目中存API密钥的JS文件路径
          # 如果密钥包含/、&这类特殊字符，就把sed的分隔符换成#，即s#API_KEY_TEMP#$REAL_API_KEY#g
          sed -i "s/API_KEY_TEMP/$REAL_API_KEY/g" ./js/main.js

      - name: 初始化Pages配置
        uses: actions/configure-pages@v4

      - name: 上传待部署的静态文件
        uses: actions/upload-pages-artifact@v3
        with:
          path: '.'

      - name: 部署到GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

2. 修改本地JS代码 #

本地开发时，把原来硬编码的明文密钥删掉，换成和配置里一致的占位符即可，原有API调用逻辑完全不需要改动：

// 原来的明文密钥写法（删掉，别提交到仓库）
// const apiKey = "sk-abcdef123456";

// 替换成占位符
const apiKey = "API_KEY_TEMP";

// 你原来写的原生JS/jQuery API调用逻辑保持不变
$.ajax({
  url: "目标API地址",
  method: "GET",
  headers: {
    "Authorization": `Bearer ${apiKey}`
  },
  success: (resp) => {
    console.log("接口返回结果", resp);
  }
})

3. 本地调试注意事项 #

本地跑代码的时候，你可以临时把API_KEY_TEMP换成你自己的测试密钥调试，记得不要把带真实密钥的代码提交到仓库就行。如果怕误提交，可以在本地新建一个单独的config.local.js文件存本地调试用的密钥，把这个文件名加到.gitignore里，HTML里引入这个本地文件存密钥即可，部署时Workflow会自动忽略这个没提交的文件，用替换后的正式密钥运行。

常见问题说明 #

• 不要直接在前端JS里写process.env.XXX读环境变量，这个对象是Node.js环境才有的，浏览器运行环境不存在，没有打包工具做编译替换的话，写了会直接报错
• 提交代码后可以去仓库的Actions页看部署日志，如果替换失败优先检查JS文件路径是否写对、Secrets的名称是否和Workflow里的配置一致
• 如果部署后接口报密钥错误，可以直接打开部署后的线上页面，按F12看源码里的apiKey值是不是已经被替换成真实密钥，排查是替换环节问题还是接口本身的权限问题

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