CODEWITHSUNDEEP
javascriptapigithubkeysecret-key
Ryan Stone
Ryan Stone

Reputation: 383

Access Github Pages Secret Api Keys via Javascript or include in html mark-up

I have created an opensource project that I have been working on slowly for a couple of weeks. 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 publicly available.

These two questions:

  1. how to opensource a project that uses API keys
  2. 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 and also in my JavaScript code. It needs to be included here:

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

and possibly a few other places in my HTML or JavaScript.

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?

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

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

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 APIs, after watching a few of Traversy Medias Tutorial so if anyone could give some code examples it would be greatly appreciated, his tutorial on fetch() API only grabs a text file, not an external url.

Upvotes: 3

Views: 3522

Answers (1)

bk2204
bk2204

Reputation: 76409

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.

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.

Upvotes: 3

Related Questions