通过 Javascript 访问 Github Pages Secret Api Keys 或包含在 html 标记中 [英] Access Github Pages Secret Api Keys via Javascript or include in html mark-up

问题描述

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

I have created an opensource project that i have been working on slowly for a couple of week's,
I started looking into apis that could be used and was interested in using
WikiArt Api
but was not sure how to go about using the API keys which are supposed to remain secret

我最初的想法是创建一个配置文件并将密钥放在那里
但随后它们仍将公开可用..

my initial thought was to create a config file and have the keys in there
but then they would still be publically available..

这两个问题:
如何开源一个使用 api 密钥的项目 &
如何保护 Google Api 密钥在一个开源项目 github
建议创建秘密 ENV 变量并以加密格式存储密钥.
我的问题是我如何访问或包含我的 html &
同样在我的 Javascript 中，它需要包含在此处:

These two questions:
how to opensource a project that uses api keys &
How to protect Google Api Keys in an open source project github
suggested Creating Secret ENV Variables and storing the keys in an encrypted format.
My question is how do i then access or include that hidden key within my html &
also in my Javascript it needs to be included here:

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

&可能在我的 Html 或 Javascript 中的其他一些地方.

& possibly a few other places in my Html or Javascript.

我不是 100% 确定预取链接是包含它的正确位置，但由于 Api 将抓取图像数据，这是我首先想到的初始化位置.这是错误的方法吗?

I'm not 100% sure a prefetch link was the right place to include this, but since the Api will be grabbing image data, that was my first thought of where to initialize it. Is this the wrong approach?

作为次要问题，wikiart Api 的文档不是很好，并且没有给出任何示例代码.任何人都可以通过以下含义更好地解释一下

As a secondary question, the documentation for the wikiart Api isn't very good and it doesn't give any example codez. can anyone explain a little bit better by what it means in the following

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

Create session when your application starts:
https://www.wikiart.org/en/Api/2/login?accessCode=[accessCode]&secretCode=[secretcode]
Add session key to your request url, e.g. &authSessionKey=sessionKey

创建会话是什么意思?我只熟悉 php 会话，而不是 Api 会话.这是在 Html 或 Javascript 中完成的.这是我第一次尝试使用任何 api，在观看了一些 Traversy Medias Tutorial 所以如果有人能提供一些代码示例将不胜感激，他关于 fetch() api 的教程只抓住了一个文本文件.不是外部网址..

How does it mean to create a session? i'm only familiar with php sessions, not Api sessions.. is this done in the Html or Javascript.. This is the first time i've ever tried to use any api's, after watching a few of Traversy Medias Tutorial so if anyone could give some code examples would be greatly appreciated, his tutorial on fetch() api only grabs a text file. Not an external url..

推荐答案

如果您使用的是 GitHub Pages，那么它仅为静态站点提供托管.换言之，GitHub Pages 站点仅托管 HTML 和 JavaScript，不提供任何后端(服务器端)支持.

If you're using GitHub Pages, then that provides hosting for static sites only. In other words, a GitHub Pages site hosts only HTML and JavaScript and doesn't provide any backend (server-side) support.

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

As for how to securely use secrets in a static site, you cannot. Since all of the content in a static site is sent to the browser with no server-side components, there is no place you can put a secret that isn't sent to the client. In order to securely use secrets, you need some sort of backend server to hold them so that clients cannot see them.

如果您需要持有秘密 API 密钥或其他秘密，您需要创建一个非静态站点，从而将其托管在 GitHub Pages 以外的其他地方.

If you need to hold secret API keys or other secrets, you need to create a non-static site and therefore to host it somewhere other than GitHub Pages.

这篇关于通过 Javascript 访问 Github Pages Secret Api Keys 或包含在 html 标记中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！