如何在GitHub Pages的JS文件中使用GitHub Secrets隐藏API密钥

不可能直接在GitHub Pages的前端JS中使用GitHub Secrets隐藏API密钥，原因和可行方案如下：

为什么不可行？ #

GitHub Secrets是存储在GitHub服务器端的敏感信息，仅能在GitHub Actions工作流、GitHub Codespaces这类后端运行环境中调用，不会被自动注入到静态页面的前端代码里。

• GitHub Pages部署的是纯静态资源，所有JS代码最终都会明文发送到用户浏览器，process.env.API_KEY这种写法在前端环境中完全不生效（前端没有Node.js的process.env对象）。
• 就算你用构建工具（比如Webpack）尝试在构建时注入Secrets，打包后的JS文件里依然会把密钥明文写入，用户查看页面源码就能直接获取。

可行替代方案 #

方案1：搭建后端代理服务 #

这是最安全的做法：自己搭建一个简单的后端服务，在后端代码中调用API密钥，前端只请求你的后端接口，由后端代为调用目标API（比如你的Google Apps Script），再把结果返回给前端。密钥只会存在于后端环境中，前端完全接触不到。

示例后端代码（Node.js + Express）：

const express = require('express');
const axios = require('axios');
const app = express();

app.get('/api/proxy', async (req, res) => {
  // 从后端环境变量/部署平台的Secrets中获取API密钥
  const apiKey = process.env.API_KEY;
  try {
    // 后端代为调用目标API
    const response = await axios.get(`https://script.google.com/macros/s/${apiKey}/exec?...`);
    res.send(response.data);
  } catch (error) {
    res.status(500).send(error.message);
  }
});

app.listen(3000, () => console.log('代理服务运行在3000端口'));

前端代码修改为请求代理接口：

document.getElementById("submit").addEventListener("click", function() {
    // ...
    if (...) {
        var request = new XMLHttpRequest();
        // 请求你的后端代理地址
        request.open("GET", `https://你的代理服务器域名/api/proxy`, false);
        // ...
    }
});

方案2：限制目标API的访问权限 #

如果不想搭建后端，可以给你的Google Apps Script设置严格的访问控制：

• 仅允许你的GitHub Pages域名发起请求
• 给请求添加自定义验证参数（比如一个简单的密钥，虽仍在前端，但能降低被滥用的风险）
  这种方式无法完全隐藏密钥，但能减少恶意调用的可能性。

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