2

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.

Kins
  • 547
  • 1
  • 5
  • 22
Ryan Stone
  • 345
  • 4
  • 19

1 Answers1

3

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.

bk2204
  • 64,793
  • 6
  • 84
  • 100
  • Although github say's it is for static sites only there are ways to host dynamics sites as I have seen other repo's that use both php and node.js and have somehow hacked a working dynamic site on github pages.. Not 100% sure how but have to look into those other repos more.. if it wasn't possible then github itself wouldn't have the option to hold ENV variables or secret keys.. – Ryan Stone Nov 10 '20 at 02:47
  • When you upload php file to github pages repo it tags it as a hack in the languages used section. so must be was around it.. – Ryan Stone Nov 10 '20 at 02:52
  • GitHub _Actions_ has the ability to use environment variables and secret keys. Those values are not exposed to GitHub _Pages_, which has only the ability to host static sites. I know; I used to maintain Pages. You could have a backend on another server, which would be secure, but that can't be done on Pages. – bk2204 Nov 10 '20 at 02:55
  • what if you kept the github pages then loaded an external backend from somewhere within an iframe? could the two interact? if iframe was set to allow scripts & top navigation? – Ryan Stone Nov 10 '20 at 04:36
  • 'https://cors-anywhere.herokuapp.com has partially got round the Cors warnings but still not the keys which are necessary.. – Ryan Stone Nov 10 '20 at 04:37
  • & also i thought github actions was just an extension of github pages to allow you to manage your pages in various different was.. I'm still fairly new to github so still learning what its all about. – Ryan Stone Nov 10 '20 at 04:39
  • 1
    GitHub Actions is designed to perform automated workflows, such as for running CI (e.g., tests and deployments) and periodic jobs. It's possible an external backend would work, but I'm not familiar enough with iframes to tell you whether it would or not. – bk2204 Nov 10 '20 at 23:08