在 html 文件中使用 Github 环境机密

Question

我有一个托管在 Github 页面上的个人网站。我在 Github 的环境机密中插入了一个名为

FORMSPREE_TOKEN

的令牌。我在我的

index.html

文件中使用了以下代码（位于根目录的

main branch

中）：

<form action="https://formspree.io/f/{{ secrets.FORMSPREE_TOKEN }}" method="POST" class="contact__form grid" id="submit_form">
                        <div class="contact__inputs grid">
                            <div class="contact__content">
                                <label for="name" class="contact__label">Name</label>
                                <input type="text" id="name" name="name" class="contact__input" required>
                            </div>
                           ...

但这不起作用。我该如何解决它？

Answer 1

您遇到的问题是由于对 GitHub Actions 机密和环境变量在工作流程中的公开方式以及如何在静态站点的 HTML 中使用它们的误解造成的。具体来说，GitHub 机密（如

FORMSPREE_TOKEN

）无法直接嵌入或使用在 GitHub 页面的 HTML 文件中，因为这些机密仅在工作流程执行期间可用（如 CI/CD 流程），并且不会暴露给前端代码或出于安全原因静态站点文件。

解决此问题的方法如下：

1. 重新考虑令牌暴露：如果您的

   FORMSPREE_TOKEN

   旨在保密，那么确保它不会在可公开访问的前端代码中暴露是至关重要的。通常，API 令牌不应直接放置在前端代码中，以防止未经授权的使用。

2. 服务器端代理：实现一个服务器端组件（例如 Vercel、AWS Lambda 或其他云函数提供商上的小型无服务器函数），该组件可以安全地使用令牌代表您的前端与 Formspree 进行交互。您的前端将数据发送到此服务器端函数，然后附加令牌并将数据转发到 Formspree。

3. 更改 Formspree 用法：如果令牌是 URL 的一部分，只是为了标识您的表单端点并且不需要保密，则 Formspree 可能不一定需要操作 URL 中的令牌。您通常可以使用 Formspree 提供的直接端点，可能看起来像

   https://formspree.io/f/myformid

   。

如果令牌实际上不是秘密，这里有一个简化的方法：

• 修改表单操作 URL 以使用设置表单时提供的直接端点 Formspree（您可以在 Formspree 仪表板中找到它）。

<form action="https://formspree.io/f/myformid" method="POST" class="contact__form grid" id="submit_form">
    <div class="contact__inputs grid">
        <div class="contact__content">
            <label for="name" class="contact__label">Name</label>
            <input type="text" id="name" name="name" class="contact__input" required>
        </div>
        ...
</form>

将

myformid

替换为您的实际 Formspree 表单 ID。这样，您就不需要在 HTML 代码中使用秘密令牌，从而使您的前端更简单、更安全。

如果令牌确实是秘密的并且每个请求都需要，那么使用服务器端代理是安全地包含它的最安全的选择。