如何在 JS 文件中使用 GitHub 秘密环境变量？

Question

我正在尝试在 GitHub Pages 网站中使用的 JS 文件中使用 GitHub Secrets，我试图用它来隐藏 API 密钥，但是，我找到并理解了很多研究任何可以帮助我的东西......不要评判我，我是 GitHub 的新手，无论如何：这是我正在使用的代码：

document.getElementById("submit").addEventListener("click", function() {
    ...
    if (...) {
        var request = new XMLHttpRequest();
        request.open("GET", `https://script.google.com/macros/s/${process.env.API_KEY}/exec?...`, false);
        ...
    }
});

有没有办法做到这一点？ 谢谢！

Answer 1

Github 机密用于工作流操作。 它们不会自动注入 Github 页面。

例如，您可以编写一个工作流，通过运行一些代码来响应对主分支的提交，这些代码在您用于 Github 页面的任何分支中生成新内容。 您编写的工作流程可以将秘密传递给生成页面的程序，并且可以将字符串注入其中。

但是，该秘密随后在 Github 页面上发布的客户端代码中可见，因此它在很大程度上使 Github 秘密的使用毫无意义。

Answer 2

如果您想隐藏您在 github-pages 中使用的信息，它可能会有所帮助：1）在前端 React 应用程序上作为示例：在您的根目录中创建一个名为.env.local 的文件，并在其中创建另一个名为.gitignore 的文件root 并在.env.local 中写入您的密码，当您在 GitHub 存储库中推送代码时，它将自动隐藏。

In .env.local:
REACT_APP_API_KEY = ANCCC.....
REACT_APP_AUTH_DOMAIN = my-app.firebaseapp.com

Using in another file:
apiKey:process.env.REACT_APP_API_KEY,
authDomain: process.env.REACT_APP_AUTH_DOMAIN,

现在，如果您推送它，它将自动隐藏您的 firebase 凭据。

2）以节点express Bankend为例：首先：

然后在根目录下创建一个名为.env 和.gitignore 的文件。 在.env 中写入秘密凭证：

in .env file:
DB_USER=dbuser
DB_PASS=39T6.......

在 index.js 文件/您要使用的位置：

require('dotenv').config();

而不是密码和数据库名称：

${process.env.DB_USER}:${process.env.DB_PASS}

现在最后在.gitignore 中写入文件名如下：

.env
node_modules

推送GitHub中的代码。 希望它有效。谢谢。