Quickest Way to Secure API Keys on the Frontend (In Minutes)

There are often times when we are building websites that leverage the benefits of being delivered on a CDN (security, performance, no backend infrastructure required), but we want more powerful, dynamic functionality. The best way to increase functionality is through APIs; i.e. email contact forms, processing of outside data, or present information like the weather forecast, flight schedules, currency exchange rates, etc. How would we make these API integrations quickly and securely if we do not want to build out a backend or add infrastructure to handle these API calls? Where do we secure the private API keys? What if we don't want user authentication prior to allowing our users to interact with the 3rd party APIs? The answer is KOR Connect, KOR Connect is a middleware platform that allows CDN front ends to secure API Keys in a quick and simple way, while automatically deploying security layers during the API integration process. The bonus is that it is also free to use!

We will talk through an example of integrating a Covid 19 tracker.

Let's create a COVID-19 tracker. In order to do this, we have to pick the API that we want to use. I decided on the COVID-19 Statistics API that uses data from John Hopkins University.

If you already have a KOR Connect account you can sign in here or you can create a new account.
Let’s start by creating an API connection on KOR Connect by clicking on the “+ Connect API” button:

The connection details were all copied directly from RapidAPI. More information regarding the API connection module here.

Done! After making the connection, go to View Details for your new API connection.

Now you will see the Secure API and Public API key, both generated by KOR Connect. You can also adjust your per-user rate limit for your API calls at the top left of the screen (the default is 5 calls per second). In this example, we will be using the Single URL Security Type provided by KOR Connect.

If you want, here is a great video tutorial by Traversy Media walking you through building the site on Vue.js. (Here is the code for his COVID-19 tracker). Note: In the tutorial he uses a public API, we will use KOR Connect to easily integrate the private API into our site.

Now, all you have to do is grab the Secure URL and Public API Key provided by KOR Connect (refer to the image above) and use them to make an API request. Here's an example of the fetch request.

fetch("<YOUR-SECURE-URL>", {
    "method": "GET",
    "headers": {
        "x-rapidapi-key": "<YOUR-PUBLIC-API-KEY>"
    }
})
.then(response => {
    console.log(response);
})
.catch(err => {
    console.error(err);
});

That’s it, now you are ready to start testing/ using your API integration. KOR Connect automatically sets the Connection Mode to Testing. When you are ready to go to production make sure you remember to switch the Connection Mode to Production, this will activate security and remove localhost from the allowed domains (more information here).

It was as simple as that, now your API integration works without any additional libraries or configurations.

If you're interested in adding even more security through an attestation service, click here for additional instructions.

In case you are interested in what happens automatically on KOR Connect’s end after you make a connection. Bot controls are activated that inspect for miscellaneous bots, security-related bots, calls coming from automated browsers, black listed origins, and user agents that don’t seem to be coming from a browser; these calls are blocked if they don’t pass inspection. Furthermore, KOR Connect validates the access-control-allow-origin header from your allowed origins, as well as provides a per-user rate limiter that can block malicious actors abusing calls without causing any interruptions to other users.