通过Javascript访问Github Pages秘密Api密钥或包含在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]
将会话密钥添加到您的请求网址中，例如& authSessionKey =会话密钥

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，之后观看了

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秘密Api密钥或包含在html标记中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！