Secure API Keys on the Frontend - Vue JS

Rodrigo — Fri, 17 Sep 2021 04:08:27 +0000

Why are we going to use KOR Connect?

APIs keys / secrets have been traditionally stored in an application’s backend but this requires control of your own server as well as specialized infrastructure knowledge to set up properly. On CDN hosted, or serverless client side applications it is often not possible to gain access to the server that is hosting the project. If the developer hardcodes the API keys to their frontend anyone is able to access the keys and steal them. When API keys are stolen the malicious agent is able to do whatever they want with the APIs. This could rack up costs for the developer, use all of the allowed calls, or if the APIs are used against the TOS the dev’s credentials may be revoked. The other route that is often suggested to hide API keys for client side applications is to set up serverless functions to store the API keys and act as a proxy for the frontend. The developer could also use CORS to identify the header origin to make sure that only the allowed domains are calling the proxy (so that not anyone is able to call the proxy url from anywhere). This may seem secure but CORS only verifies browser calls and can be easily spoofed or can be called from outside of the browser. A malicious agent could easily run up costs with a bot or have the endpoint shut down as well. KOR Connect has a system that automatically protects against these vulnerabilities as well as allows the developer to integrate any API in the simplest and quickest possible way.

Now let me walk you through an example!

I have wanted to create a COVID-19 tracker for sometime; I wanted to create the app in a way where I consume an API but without a backend. In order to do this, I had a couple of options.The approach that initially came to mind was to use public APIs on a static site, but during my planning phase I came across https://rapidapi.com. Here I found an array of different options for Covid data APIs, the caveat was that the APIs required authentication.

I could have spun up a small backend and dealt with authentication there but a simple COVID-19 tracker webapp didn’t warrant such efforts.

In the end I ended up using https://korconnect.io/, a connection middleware that allows you to connect APIs without a backend. This is how I did it:

I created an account on https://korconnect.io/
Also created an account on https://rapidapi.com/

First, I needed to choose an API to consume. I decided on this one which uses Johns Hopkins public data:

I started by creating an API connection on KOR Connect by clicking on the “+ Connect API” button:

I added the connection details, all of this information was copied directly from RapidAPI. More information about that here: https://kor-comunity.gitlab.io/kor-connect/adir/GETSTARTED.html

Done! After making the connection I went to the code snippets to see how I would consume the API in my frontend. In my case I wanted to use VueJS to create my tracker so I went to the VueJS snippets section and retrieved the information I needed for the framework.

Ok, all good! Now, the tricky part…making the site. I don’t have much experience coding on React or Vue but I found a great video tutorial that walked me through building a COVID-19 tracker.

Check this excellent tutorial by Traversy Media: https://www.youtube.com/watch?v=m-MAIpnH9ag (Here is the code for his COVID-19 tracker https://github.com/bradtraversy/vue-c...).

One thing of note, in that tutorial he uses a public API. So I had to figure out how to use the Kor Connect snippet in my code. Thankfully, it was very easy!

First, let’s take a look at how Kor Connect provides the snippet:

This is how I integrated it into my project:

Something to note is how I modified the KOR Connect URL with the paths I received from RapidAPI. For example, to get the summary report I needed to add this to the end of my URL:

/reports/total

Pay attention to the paths that your API provider gives you and put them at the end of your KOR Connect URL.

Now, all the calls can be made to the link that KOR Connect provides, KOR Connect will act as a proxy to authenticate as well as send back the API information. Furthermore, thanks to reCaptcha enterprise’s (which is implemented automatically) layers of security several malicious attack vectors are blocked, this enhances KOR Connects security.

What does the final project look like?

Best of all, for this quick and safe API consumption I don’t need to expose my API token to the public nor do I have to spin up a backend.

DEV Community: Rodrigo

Secure API Keys on the Frontend - Vue JS