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.
Top comments (6)
Looks great, I started to do Netlify functions just today but this looks like a nice alternative. I just wonder if this is safe enough though...
How are the Netlify Functions going? I also looked into this route for securing my APIs but I was concerned about the exposed endpoints with Netlify Functions. A malicious actor can reach this endpoint and use a bot to cause damage/ have the API shut down. I ended up using KOR Connect for the extra protection on the public endpoint that is created to prevent unwanted calls with or without the browser
At the end Netlify functions worked just fine to me. We could secure the function to accept only wanted connections without issues. This kor tool looks nice but there is no info about how the security works nor their datacenter security, info handling or even penetration testings. At the place I work at, this things are key values for us to choose a provider.
I have seen some local proxies around, I wonder if putting them into an ec2 would work haha
Hi Elliot,
We are currently working on putting more information on our web explaining the security side of our app. Once we update this during the coming weeks, feel free to give it a look!
I assure you can have a better experience than doing functions.
We understand that concern and we are currently preparing more documentation to go in-depth about our security measures. To summarize our security at a high level, we have encryption at rest and in transit for all sensitive information; the cool part lies in securing the requests to your API. To accomplish this we use Google's reCaptcha as an attestation service to validate where the traffic is coming from, i.e. your front end. We have some additional validations in place to make the requests more secure. It’s super easy to set up, try it out and let us know if you have any questions. You'll find you are right about this being a nice alternative to Netlify when looking for a quick and safe way to connect you FE and API.
If you have any specific questions feel free to post them here or you can email us at info@getkor.io
this code is not secure, you are exposing the api key directly on the code and besides that, it's going to be visible on the network tab everytime that the client does a request