在Github页面中隐藏API密钥

44

我有一个组织的 Github 页面,想要从第三方 API 调用数据,但需要授权令牌。我能否在不显示授权令牌的情况下发布此 Github 页面到公共代码库?

4个回答

67
简而言之,如果你的GitHub仓库是公开的,那么它的所有资产都是公开的。你可以使仓库变为私有,并且如果按照username.github.io的约定进行命名或者有一个gh-pages分支,它仍将发布在GitHub Pages上。虽然这是一种选择,但不一定是正确的选择。
如果你的key在你的GitHub Pages仓库中,看起来它是用于JavaScript中的客户端API调用。如果是这样,无论它是在你的公共仓库中还是在发送到浏览器的客户端文件中,你的授权令牌都是公开可见的。这通常是没有问题的。第三方API可能会根据你网站的域生成授权令牌,并限制使用该令牌调用来源于你域的页面。否则,他们可能仅要求授权令牌用于记录请求和监控使用情况。
如果授权令牌真的应该是私有的,那么你可能需要编写私有服务器端代码来调用第三方API。然后你的GitHub Pages网站可以通过调用你的服务来获取所需的数据。我以前曾经不得不做过这件事,因为Web API存在安全问题,但我仍然需要从客户端检索非敏感数据。

5
这正是我需要听到的。谢谢! - Connor Leech

18
简而言之,是的,你可以将授权令牌存储在环境变量中,并在.env文件上使用gitignore来隐藏公共repo中的授权令牌。在客户端API上刷新授权令牌,然后将更改推送到公共repo并重新部署更新到gh-pages分支。下面提供了这个过程的示例。
注 如果你提交了密码或API密钥,请更改! 如果您提交了一个密钥,请生成一个新的密钥。 参考GitHub的一般最佳实践。
如果您正在使用React构建应用程序,则跳过第1和第2步,因为React已经预安装了自定义环境变量。请参考Create React App
完整的解释如下:
1. 在应用程序根目录中安装dotenv依赖项(此示例将使用Node.js)参考npm,运行以下命令: npm install dotenv 2. 将以下代码添加到index.js文件中的导入语句中。

require('dotenv').config();

3. 在应用的根目录下创建 .env 文件,并将认证令牌作为变量添加进去。请注意,当使用 React 时,您必须在变量名前加上 REACT_APP_

AUTH_TOKEN=987asc8iks0lenv7

4. 使用 console.log() 语句打印出 process.env 变量,以检查变量是否被正确存储。

console.log(process.env.AUTH_TOKEN);

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

旧变量:const auth_token = '987asc8iks0lenv7';

新变量:const auth_token = process.env.AUTH_TOKEN;

6. 在应用程序的根目录中创建并添加.gitignore文件,并添加以下代码以使git忽略存储认证令牌的.env文件。

.env

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

8. 要部署或重新部署更新到gh-pages分支,请使用以下命令。

npm run deploy


1
你的 AUTH_TOKEN 不还是会作为请求的一部分暴露出来吗?这可以从浏览器开发工具中的网络选项卡中查看。这似乎并没有解决直接从客户端代码调用的根本问题。 - A N
不会的,你的 AUTH_TOKEN 不会暴露出来因为它会被存储在环境变量中。同时,你也将 .env 文件加入到了 .gitignore 文件中,这样就可以隐藏它,不会出现在提交历史记录中。 - Webalation
6
在公共代码库中不会被公开(这就是问题所问的,当然),但正如Will Klein在他的答案中提到的,它仍然可以在浏览器中访问和查看。这仍然值得注意。 - A N

5

Ashen的答案对于这种用例不起作用。通过Github配置的机密仅适用于Github Actions(请参阅文档),因此在实践中主要针对CI / CD等应用程序,而不是客户端API调用等其他用例。


2

GitHub Actions应该能够满足您的需求。

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

然而,GitHub Actions目前处于公共测试版阶段,因此在此测试期间应避免使用它来处理高价值的工作流程和内容。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接