GitHub Pages部署的vanilla JS项目如何安全隐藏第三方API密钥？

首先明确核心前提：所有运行在浏览器端的前端代码默认都是公开可查的，无论怎么加密、隐藏，直接写在前端代码里的密钥最终都能被用户通过控制台、网络请求等途径获取，仅做Git隐藏只能解决代码仓库泄露的问题，无法解决生产环境暴露风险。

方案1：本地配置文件（仅适合开发/个人测试场景） #

可以解决你当前Git忽略后无法引用的问题，操作步骤如下：

• 在项目根目录新建config.js文件，写入密钥配置：

// 注意：此文件绝对不要提交到Git仓库
const API_CONFIG = {
  LOCATION_IQ_KEY: "替换为你的Location IQ密钥",
  OPEN_WEATHER_KEY: "替换为你的Open Weather密钥"
}

• 在.gitignore文件中添加一行config.js，确保该文件不会被Git追踪提交
• 在入口index.html中，先引入config.js，再引入你的main.js文件：

<script src="./config.js"></script>
<script src="./main.js"></script>

完成后你就可以在main.js中直接使用API_CONFIG对象读取密钥了。

方案2：打包工具环境变量（仅解决Git提交问题，仍有生产暴露风险） #

如果你使用了Vite、Rollup等打包工具，可以用框架内置的环境变量能力：

• 项目根目录新建.env文件，变量名按打包工具要求加前缀（比如Vite要求前缀为VITE_）：

VITE_LOCATION_IQ_KEY=你的密钥
VITE_OPEN_WEATHER_KEY=你的密钥

• 将.env添加到.gitignore中
• 在main.js中通过对应语法读取变量，比如Vite下用import.meta.env.VITE_LOCATION_IQ_KEY调用即可

方案3：后端代理（生产环境唯一安全方案） #

密钥仅存储在后端服务中，所有第三方API请求由后端转发，前端完全不接触密钥：

• 可以用Node.js、Python等写极简后端服务，示例Express代码如下：

// 后端代码，密钥仅存在服务端，永远不会暴露到前端
const express = require('express')
const app = express()
const fetch = require('node-fetch')

const API_KEYS = {
  LOCATION_IQ: "你的Location IQ密钥",
  OPEN_WEATHER: "你的Open Weather密钥"
}

// 允许前端跨域（开发阶段用，生产可关闭）
app.use(require('cors')())

// 封装Location IQ查询接口
app.get('/api/location-search', async (req, res) => {
  const { keyword } = req.query
  const resp = await fetch(`https://us1.locationiq.com/v1/search?key=${API_KEYS.LOCATION_IQ}&q=${keyword}&format=json`)
  const data = await resp.json()
  res.json(data)
})

app.listen(3000)

• 前端main.js直接调用你自己的后端接口即可，不需要携带任何密钥：

fetch('http://localhost:3000/api/location-search?keyword=北京')
  .then(res => res.json())
  .then(data => console.log(data))

如果不想维护完整的后端服务，也可以用无服务函数替代，逻辑完全一致，部署更简便。

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