通过Javascript访问Github Pages秘密Api密钥或包含在html标记中

如何解决通过Javascript访问Github Pages秘密Api密钥或包含在html标记中

我创建了一个开源项目，我已经在缓慢的工作了两个星期，
我开始研究可以使用的api，并对使用
感兴趣 WikiArt Api
但不确定如何使用应该保密的API密钥

我最初的想法是创建一个配置文件并在其中放置密钥
但是它们仍然可以公开使用。.

这两个问题：
how to opensource a project that uses api keys＆
How to protect Google Api Keys in an open source project github
建议创建秘密ENV变量并以加密格式存储密钥。
我的问题是我该如何在html＆
中访问或包含该隐藏键？ 在我的Javascript中也需要包含在这里：

<link rel="prefetch" href="https://www.wikiart.org/en/Api/2/login?accessCode=[]&secretCode=[]"/>

以及我的HTML或Javascript中的其他位置。

我不是100％肯定预取链接是包含此内容的正确位置，但是由于Api将获取图像数据，因此这是我首先想到的初始化位置。这是错误的方法吗？

作为第二个问题，Wikiart Api的文档不是很好，并且没有提供任何示例代码。 任何人都可以通过以下含义解释得更好一点

在应用程序启动时创建会话：
https://www.wikiart.org/en/Api/2/login?accessCode=[accessCode]&secretCode=[secretcode]
将会话密钥添加到您的请求网址中，例如＆authSessionKey =会话密钥

创建会话意味着什么？我只熟悉PHP会话，不熟悉Api会话..这是在HTML还是Javascript中完成的。这是我第一次尝试使用任何api，在观看了Traversy Medias Tutorial之后，如果有人可以提供一些代码示例，将不胜感激，他有关fetch（）api的教程只能获取一个文本文件。不是外部网址。

解决方法

如果您使用的是GitHub Pages，则仅为静态站点提供托管。换句话说，GitHub Pages网站仅托管HTML和JavaScript，不提供任何后端（服务器端）支持。

关于如何在静态站点中安全使用机密，您不能。由于静态站点中的所有内容都被发送到不带服务器端组件的浏览器，因此您没有地方可以放置未发送给客户端的机密。为了安全地使用机密，您需要某种后端服务器来保存它们，以使客户端无法看到它们。

如果您需要保留API密钥或其他秘密，则需要创建一个非静态站点，并将其托管在GitHub Pages之外的其他地方。