隐藏 Github 页面的 api 密钥答案

【问题标题】：hide api key for a Github page隐藏 Github 页面的 api 密钥
【发布时间】：2014-03-23 06:42:24
【问题描述】：

我的组织有一个 github 页面，我想从需要身份验证令牌的第 3 方 api 调用数据。我可以在公共 repo 上不显示身份验证令牌的情况下发布此 github 页面吗？

【问题讨论】：

标签： ajax github authorization github-pages

【解决方案1】：

简而言之，没有。如果您的 GitHub 存储库是公开的，则其所有资产都是公开的。您可以将 repo 设为私有，如果使用 username.github.io 约定命名或具有 gh-pages 分支，它仍将在 GitHub Pages 上发布。虽然这是一种选择，但不一定是正确的做法。

如果您的密钥在您的 GitHub Pages 存储库中，则听起来它用于 JavaScript 中的客户端 API 调用。如果是这样，您的身份验证令牌是公开可见的，无论它是在您的公共存储库中还是在您的客户端文件中发送到浏览器。这通常很好。第三方 API 可能已根据您网站的域生成身份验证令牌，并将使用该令牌的调用限制在源自您的域的页面。否则，他们可能只需要身份验证令牌来记录请求和监控使用情况。

如果身份验证令牌确实是私有的，那么您可能需要编写私有的服务器端代码来调用第三方 API。然后，您的 GitHub Pages 站点可以访问您的服务以获取所需的数据。在 Web API 存在安全问题之前，我必须这样做，但我仍然需要从客户端检索非敏感数据。

【讨论】：

这是我需要听到的。谢谢！

【解决方案2】：

简而言之，您可以将身份验证令牌存储在 环境变量 中，并在 .env 文件中使用 gitignore 来隐藏身份验证公共回购中的令牌。刷新客户端 API 上的身份验证令牌，然后将更改推送到公共存储库并将您的更新重新部署到 gh-pages 分支。我在下面提供了此过程的示例。

注意

如果您提交了密码或 API 密钥，请更改它！如果您提交了密钥，请生成一个新密钥。参考GitHub 上的一般最佳实践。

如果您的应用使用 React，则 SKIP 步骤 1 和 2 因为 React 已经预先安装了自定义环境变量。参考Create React App。

完整的解释如下：

1. 在应用根目录下安装dotenv依赖（本例将使用Node.js）参考npm，运行命令：

npm install dotenv

2. 在下面添加代码以在 index.js 文件中导入语句。

require('dotenv').config();

3. 在app根目录下创建.env文件，并添加auth token作为变量。请注意，使用 React 时，您必须在变量名前加上 REACT_APP_

AUTH_TOKEN=987asc8iks0lenv7

4. 在 process.env 上使用 console.log() 检查变量是否存储正确。

console.log(process.env.AUTH_TOKEN);

5. 更新应用程序代码中对身份验证令牌的所有引用。

OLD VARIABLE: const auth_token = '987asc8iks0lenv7';

NEW VARIABLE: const auth_token = process.env.AUTH_TOKEN;

6. 创建 .gitignore 文件并将其添加到应用程序的根目录并在下面添加代码以使 git 忽略 .env 存储身份验证令牌的文件。

.env

7. 向 GitHub 上的应用程序 master 分支添加、提交和推送更新。

8. 将更新部署或重新部署到 gh-pages 分支。使用下面的命令。

npm run deploy

【讨论】：

您的AUTH_TOKEN 是否仍会作为请求的一部分公开，可以从浏览器开发工具的“网络”选项卡中查看？这似乎并没有解决直接从客户端代码进行调用的根本问题。
不，您的AUTH_TOKEN 不会被公开，因为它将存储在环境变量中。您还将 .env 文件添加到您的 .gitignore 文件中，这会将其隐藏在您的提交历史记录中。
它不会在公共存储库中公开（这是问题所要求的，当然），但正如 Will Klein 在他的回答中提到的，它仍然可以在浏览器中访问和查看。这仍然是一个值得注意的问题。

【解决方案3】：

Ashen 的答案不适用于这个用例。通过 Github 配置的 Secret 仅对 Github Actions (see documentation) 可用，因此——在实践中——主要用于类似 CI/CD 的应用程序。不是为了例如客户端 API 调用。

【讨论】：

【解决方案4】：

GitHub Actions 应该满足您的需求。

您可以使用可视化工作流编辑器或存储库设置添加机密。创建密钥后，GitHub 会立即加密该值，您将无法再查看或编辑该值。任何对存储库具有写入权限的人都可以在该存储库中创建和使用机密。

但是，GitHub Actions 目前处于公开测试阶段，因此在此测试期间应避免用于高价值工作流程和内容。

【讨论】：