DEV Community

Cover image for Quickest Way to Secure API Keys on the Frontend (In Minutes)
KOR Connect for KOR Connect

Posted on

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.

Corona_Tracker_GIF

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:

Connect_API

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

Connection_module

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

View_Details

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.

API_Details

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);
});
Enter fullscreen mode Exit fullscreen mode

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).

Connection_Modes

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

Finished_Tracker

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.

Discussion (28)

Collapse
jeremybradbury profile image
Jeremy Bradbury • Edited on

So this is only if you don't have your own server and you want to connect to a 3rd party API client to server?

These are all server features, you didn't actually secure any API keys at all. You just used another api key to a service which also enforces throttling & whitelisting domains... Now you've replicated the original problem, the key is visible.

Most servers can throttle requests & send server to server api calls (not able to be intercepted) on behalf of their client as a minimum requirement.

This is essentially a simple ExpressJS middleware or perhaps an Nginx Only solution that you seem to be selling as a service?

Is there any indication this article is an advertisement?

Do you work for this company?

If so/not why isn't any of that mentioned above?

Collapse
kor_connect profile image
KOR Connect Author

The purpose of KOR Connect is to allow users the ability to do backend tasks ( as of right now integrate 3rd party APIs) without a backend. So yes, KOR Connect is meant to allow developers to connect 3rd party APIs without having to build or maintain a server.

The API key that KOR Connect provides is a public API key similar to the ones that are provided by firebase, and is only used on KOR Cornnect’s end to identify each user’s project. The developers' 3rd party API keys are secured on a proxy within an AWS Lambda. The new secure URL that KOR Connect provides has a number of additional security features added to it to validate the origin of the call, limit exposure to automated attacks, as well as limiting call access (in the way of per-user and global rate limiters).

KOR Connect is meant to be a service that allows CDN/ static sites/ JAMStack/ single page applications, that don’t require servers, to continue not requiring any backend infrastructure, but allowing these developers the ability to connect to 3rd party APIs, as well as a place to secure the 3rd party API keys. To answer your question, yes, these are server features without a server, or in our case it's actually an infrastructure abstraction layer. The public key provided is to identify a users project, having access to this public key doesn't grant you access to the specific API you are using or to your API's key

This article is not meant to be an advertisement, it is meant to walk users through the steps of using KOR Connect. It is posted within the KOR Connect organization account, and is meant to serve as a quicker alternate way of integrating 3rd party APIs.

This article is written by a collaboration of team members from the KOR Connect company, as it states within the organization account. None of which is hidden.
We don’t want this to seem like an advertisement, we use this organization channel so that more than 1 team member can contribute to each blog, would you suggest we post using individual accounts? We are very new to using Dev.to, and would love to hear some feedback.

It would be great to hear your thoughts on this space. What have been the challenges you’ve faced when hosting without a server i.e CDN only? Have you tried hosting on a CDN in the past?

Collapse
jeremybradbury profile image
Jeremy Bradbury • Edited on

Well I'm a server engineer but I've worked with static CDN sites. There are several solutions for obfuscating keys including browsifying expressjs (etc). Many CDN's already offer a similar service to what you're selling.

Ideally, any third party services also have domain whitelists for the client api calls. So even though its a public key, they're useless elsewhere (even in postman), because it's paired to your domain. Centralizing all client API calls through a third party relay is a high risk, low reward situation with latency we cannot optimize and could possibly be intentionally latent depending on service level (how much is charged).

The only use case I see for this service would be to implement some server to server API in a web client, which you shouldn't have a need to do, esp on a static CDN site.

As for the other topic of my first comment and your comment about being new to Dev. Your article may have an author profile but it has no disclosure in the content. Typically ethics / law / regulation require a disclosure statement the bottom, identifying the connection the author(s) has/have with the product featured. It's very possible for anyone else to make an account with your company name. Make sure to put a disclosure at the bottom. Perhaps add some details about which authors contributed to this article and what their role in the company is.

When that stuff is not there, it seems dishonest and/or could be a fake article and/or advertisement (marketing content with no stated author).

Thread Thread
luncht1me profile image
Colin

Lol.

Jesus Christ dude.

Thread Thread
kor_connect profile image
KOR Connect Author

Hi Jeremy,

I see your point of view. Being a server engineer you work with backends, servers, and cloud providers for a living so securing an API hosted by a CDN would not be a significant task for you. However, for many front-end specific engineers dealing with cloud providers can be a difficult task that requires a steep learning curve. To implement a secure connection via a CDN provider it often requires a combination of many components from the cloud provider. We are also aware that there are other ways of integrating 3rd party APIs and only want to provide an alternative that is quicker to use than other options. Furthermore, we are aware that there are different levels of security depending on the approach taken; KOR Connect provides different options for security levels depending on what the project is and the amount of security the connection requires.

If I understand you correctly when you said “Ideally, any third party services also have domain whitelists for the client api calls. So even though its a public key, they're useless elsewhere (even in postman), because it's paired to your domain.” So if you mean that the public API keys that are provided are not used for security but are paired with the domain, then that is how KOR Connect works also.

Reducing latency is very important for us, and we are constantly working to improve this. Once again, given your expertise, optimizing latency may not be as simple for all engineers. As far as KOR Connect throttling performance, we do not have plans to ever do this, but I can see your concerns surrounding this.

Regarding the disclosure of content; this article is published under the KOR Connect organization that requires the company Dev.to account to allow the publishing. The authors are also listed within the Organization page. We will be sure to list who contributed to articles in the future, and maybe publish content on a single account within the organization to prevent this issue in the future. Thank you and we appreciate this advice.

Collapse
anilsansak profile image
Yaşar Anıl Sansak

The author's username is KOR Connect... so yeah you are totally right. This is an advertisement. And as you mentioned it does not even solve the problem. It just replicates the problem.

Collapse
kor_connect profile image
KOR Connect Author

This article is not meant to be an advertisement, it is meant to walk users through the steps of using KOR Connect and is meant to serve as a quicker alternate way of integrating 3rd party APIs.
You do have a valid point, we don’t want this to seem like an advertisement, we use this organization channel so that more than one team member can contribute to each blog, would you suggest we use individual accounts? We are very new to using Dev.to, and would love to hear some feedback.

To address the replication of the problem, as mentioned above:
Yes, if you have your own server you can implement this through your backend. However KOR Connect is meant for services hosted on a CDN that don’t require servers, allowing these developers the ability to connect to 3rd party APIs, as well as a place to secure the 3rd party API keys without having to setup or maintain a backend.

Furthermore, The public key provided is to identify the user's project within KOR Connect. Having access to this public key doesn't grant you access to the specific API you are using or to your API's key,

Collapse
drdamour profile image
chris damour

So scary that there are devs who wont see the problem with this use it and expose this “public” secret.

Could you imagine a financial app using this? Total chaos

Collapse
kor_connect profile image
KOR Connect Author

There is no secret being exposed; the API Key that is provided by KOR Connect is meant for identifying users' projects and the usage of the service, as well as troubleshooting when developers run into issues. Having access to this public key doesn't grant you access to the specific API you are using or to your API's key. The public URL that is provided by KOR Connect has a number of security layers implemented when it is being called to reduce the likelihood of malicious activity making it through to the integrating API, preventing automated attacks, and disruptions of service.

KOR Connect, as stated by the article, is meant to integrate APIs that are for public facing websites/ applications that don’t require user authentication. Financial applications would require some kind of user auth before allowing access to sensitive information which KOR Connect does not currently offer.

Thread Thread
drdamour profile image
chris damour • Edited on

The KOR api key IS a secret, any secret that lets you leverage other secrets is transitively a secret. And its exposed, no matter how good this fraud detection is..unless its leveraging the equivalent of client certificates it can be hacked. You can never really know the client, you can NOT track ips cause botnets. You can NOT profile api requests you dont understand for maliciousness. And now kor has your secret..so youve opened you secret to an attack on kor.

Your wrong about financial institutions, they have app to app api keys all the time all it takes is one dev to use this product for that use case and boom..chaos

Im guessing youll delete this comment, but this is a flawed and dangerous product.

Thread Thread
luncht1me profile image
Colin

CORS is pretty tight. If the allowed origin is strictly from the host domain you're not going to have any problems with people poking around from postman.

Besides, the API you're connecting to should be secure in its own right if it's dealing with sensitive information lol. It's not up to a relay to protect data which is what this is, a weak bastion of sorts.

Thread Thread
drdamour profile image
chris damour

my curl/wget cares nothing about CORS. KOR is positioning positioning itself as a secure way to connect to http services requiring a secret by issuing a different KOR key and saying they'll detect miss-use. anyone can go to a site using KOR and see the KOR key, and curl the same request. it's a broken idea, and scary that there are tech folks out there such as yourself who don't understand it as such immediately

Collapse
luncht1me profile image
Colin • Edited on

Lol what?
A CORS protected middleware isn't a vulnerability.

Collapse
edifysocial profile image
Edify Social

This looks like a very quick and simple way to connect many different APIs to public web apps. I like it, I will give it a try.

Collapse
kor_connect profile image
KOR Connect Author

Our aim is to create content with the intentions of providing knowledge as well as a quicker and secure alternative for developers to use when connecting an API. Our intentions are to provide information to help developers simplify their projects.

Collapse
rob117 profile image
Rob Sherling • Edited on

I understand that a few other comments have brought this up, but I feel like you haven't really addressed it:

I think it would be a good thing for you to state either at the beginning of the article that you work for this company.

I understand that this is supposed to be a guide, and that you have a few people sharing the same account. Regardless, you are promoting the use of your product on a public forum.

I'm already skeptical about how much this product could help, but it seriously increases my skepticism because there was no real transparency that you benefit from people signing up.

I think that offering a security service without being transparent is a bad look, and I would seriously consider editing the article and putting a clear disclaimer that you benefit from people using the service.

Collapse
kor_connect profile image
KOR Connect Author

Hi Rob,

It was mentioned previously when others shared your same concern. We posted this under the KOR Connect organization as a group collaboration, so that more than one team member could work on it. The KOR Connect organization account has the team members listed within the group; we published the article by KOR Connect in the KOR Connect organization, we had no intentions of misleading anyone regarding whether the company published it. We were given the suggestion to list the contributors, we will be doing that from now on, as well as to prevent any confusion in the future we will publish the articles on an individual account within the organization. Apologies for any issues this may have caused.

Collapse
luncht1me profile image
Colin

It's literally posted by the company lol. What more do you need? A guide made by the creators of the product.

What's got you skeptical or confused lol.

Collapse
outfrost profile image
Outfrost

The problem is this:
"A guide to the product made by the creators of the product"
vs
"How do you solve this problem quickly and easily? Well our product is the way to go!"

Collapse
codesushil profile image
Code With Sushil

Awesome

Collapse
ppanigrahy profile image
ppanigrahy

This is a good option if you do not want to host a backend server. However, Korconnect is not doing anything groundbreaking. It just acts as a backend server for the SPAs. These days when you can create server with a couple of lines of code in Javascript, creating a server is not a big task anymore. Hosting and maintaining servers is still not trivial, hence these product come to the rescue.

Companies that use cloud infrastructure services do not need such kind of a service.

Collapse
ruchiray918 profile image
Ruchi Ray

i am not able to connect my api even after entering all the details the website keeps saying loading.
also what do i have to enter in the domain field as i am in the development phase, the website is not hosted yet so i dont have a domain.
please help

Collapse
kor_connect profile image
KOR Connect Author

Hi Ruchi Ray,

Let us provide some assistance, can you send us an email: support@getkor.io

Also, did you post this in the community forum? I may have seen it this morning, if so we will get back to you as soon as possibe.

Collapse
ruchiray918 profile image
Ruchi Ray

yes i have posted this query on community forum

Collapse
codewithpom profile image
Padmashree Jha

It is good but a hacker can send bulk request to the secure url but very less know how to do this 😂😂

Collapse
kor_connect profile image
KOR Connect Author

As a layer of security, KOR connect has a ‘rate limiter’ implemented where you can select the maximum number of requests that can be sent per second by an individual IP, that IP will be blocked if it exceeds the call number permitted by the developer such as with DoS attacks. There is also a Global rate limiter set in place to guard against distributed attacks such as DDoS attacks. This should be sufficient for most use cases but if you want a more robust approach KOR Connect also provides additional security utilizing Google’s Recaptcha as an attestation layer along with other security validations. Some more information regarding KOR Connect’s security here kor-comunity.gitlab.io/kor-connect...

Collapse
ptakpatryk profile image
Patryk Ptak

Looks like KOR Connect has some of their own security in place. I'd assume they would stop bulk requests.