我正在开发一个 Gatsby 应用程序，该应用程序实现了一些第 3 方 API，所有这些都需要个人凭据。稍后我还计划添加一个数据库，因此也需要凭据。 由于我的所有代码都提交给 GitHub，因此我正在寻找一种以安全方式存储和访问这些代码的方法。
虽然我还没有部署我的应用，但该解决方案应该适用于本地开发和生产。
我想提一下，我过去从未（有机会）处理过类似的问题，因此我什至不知道在哪里寻找或应该寻找什么来解决这个问题.
【问题讨论】：
在 Gatsby 中区分两种类型的秘密很重要：构建时和运行时。
您可以将构建时机密存储为环境变量 (Gatsby docs)。
简而言之，您将使用您的开发环境变量创建一个 .env.development 文件，并为您的生产环境创建一个 .env.production 文件。
然后，在 gatsby-config.js 的开头添加：（无需安装 dotenv，它已经是 Gatsby 依赖项）
require("dotenv").config({
path: `.env.${process.env.NODE_ENV}`,
})
还要确保您的 .env 文件在您的 .gitignore 中，以避免将它们提交到源代码管理：
# ignore env variables files
.env*
作为最后一步，您需要手动将变量添加到您正在使用的每项服务中，这些服务需要构建您的网站。通常这将是您的主机（例如Netlify）和您的 CI（例如GitHub Actions）。
Gatsby 的优势在于在构建时获取数据并生成静态内容。如果您可以使用 Gatsby 源插件在构建时提取您的内容，那么您应该更喜欢在运行时获取内容。 （有关详细信息，请参阅 Build-time vs Runtime Data Fetching 上的 Gatsby 文档。）
但是，在某些情况下，您无法在构建时获取数据，例如在获取动态内容或渲染 Mapbox 地图时。
在这种情况下，将您的秘密保存为环境变量是不够的，因为这些秘密仍会在网络调用中公开。
您有几个备选方案，例如：
Gatsby 中的运行时机密显然比构建时机密更复杂。如果您的应用程序严重依赖运行时数据获取，您还可以考虑将 Gatsby 替换为 Next.js，它通过 API routes（本质上是框架中捆绑的无服务器函数）很好地支持运行时机密。
感谢 HaberdashPI 和 JakobAttk 的反馈，改进了这个答案！
【讨论】：
JakobAttk 是对的...如果您不使用服务器或无服务器函数将获取的数据提供给客户端，那么每个人（具有一些开发控制台知识）都可以看到 API 密钥。 就像 1,2,3 一样简单...您只需要在 DEV-Tools 中打开网络选项卡并查找 xhr 连接。找出 API 的 fetch 并检查请求发送的 headers 的值。
如果您不想（而且您永远不应该这样做！！！）将敏感数据放在 git 存储库中，ENV 变量也可以，但它们在运行时并未完全隐藏。
至少，api-service 的最后一英里保留了它的凭据，所以永远不要对敏感的 API 密钥使用不安全的客户端连接。如果您的 API 服务有额外的安全层（例如检查引用 IP），它可能没问题。
【讨论】：
我个人不喜欢将机密存储在 .env 文件中的想法，因此这些天我通常会使用 AWS Secrets Manager 之类的东西。您可以使用 AWS 开发工具包轻松设置密钥存储和获取密钥。当然，这一切都假设您在某个时候使用 AWS，但我喜欢这样做，因为我可以控制哪些角色可以访问我的密钥 - 所以如果您正在设置构建管道，这可能是一个这样做的好方法。在构建时，我可能会做这样的事情
import AWS from "aws-sdk";
const region = "us-east-1";
const creds = new AWS.SharedIniFileCredentials({ profile: "some-profile-name" });
AWS.config.credentials = creds;
export class SecretsManagerService {
private static _client: AWS.SecretsManager;
static get client(): AWS.SecretsManager {
if (!SecretsManagerService._client) {
SecretsManagerService._client = new AWS.SecretsManager({
region,
});
}
return SecretsManagerService._client;
}
static async getSecretValue(secretId: string): Promise<string> {
try {
const secret = await SecretsManagerService.client
.getSecretValue({ SecretId: secretId })
.promise();
return secret.SecretString!;
} catch (e) {
throw e;
}
}
}
而且，这一切都很好，除了你需要使用 Gatsby 中的秘密，所以我做了这样的事情（假设我使用 Contentful 作为我的 CMS）
import { SecretsManagerService } from "./aws-secrets.service";
import { execSync } from 'child_process';
(async () => {
const { CONTENTFUL_ENV } = process.env;
const secretPath = CONTENTFUL_ENV === 'qa' ? 'qa-secret-path' : 'prod-secret-path';
const values = await SecretsManagerService.getSecretValue(secretPath);
const parsed = JSON.parse(values);
process.env.CONTENTFUL_KEY = parsed.contentfulSecretKey;
const command = CONTENTFUL_ENV === 'qa' ? 'gatsby develop' : 'gatsby build';
execSync(command, { stdio: 'inherit'});
})();
这样我可以像这样在我的 Gatsby 配置中继承我的环境变量（再次假设我使用 Contentful 作为 CMS）。
{
resolve: "gatsby-source-contentful",
options: {
accessToken: process.env.CONTENTFUL_KEY,
environment: process.env.CONTENTFUL_ENV,
spaceId: "my-space-id",
},
},
并将你的 package.json 脚本修改成这样
"scripts": {
"develop": "CONTENTFUL_ENV=qa ts-node ./tools/index.ts",
"start": "gatsby develop",
"build": "CONTENTFUL_ENV=master ts-node ./tools/index.ts",
"serve": "gatsby serve",
"clean": "gatsby clean"
},
【讨论】：