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? We will go over the best ways of executing these API integrations. Then we will provide links to some projects that walk you through how this is done via KOR Connect.
Ways of integrating 3rd party APIs without backend infrastructure:
Serverless Functions as a backend proxy (AWS Lambda):
It is often recommended to use serverless functions to hide API keys for client side applications. Then the client can use this serverless function as a proxy to call the API through a new endpoint. The developer should also incorporate CORS to identify the header origin so that only the allowed domains are calling the proxy (to prevent unwanted calls to 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 actor can still run up costs with a bot and have the endpoint shut down. Further issues with this technique can arise around provisioning AWS services to support the lambda functions like API gateways, roles, and permissions between cloud services, this can be very time consuming if you are not familiar with the cloud provider.
Netlify Functions (built on AWS Lambda):
Netlify Functions is a wrapper around AWS Lambdas, the main advantage to using this approach over the AWS provisioned proxy is an improved user experience and Netlify helps streamline the deployment for you. Netlify Functions remove the tasks associated with setting up an AWS account and other AWS services required to correctly integrate the API. Similar security issues persist with Netlify Functions as they do with setting up your own AWS provisioned proxy. Even with CORS setup the new Netlify endpoint can be called in unwanted ways and by unwanted agents. This leaves your API susceptible to being shut down, or having costs run up. Furthermore if you are not familiar with writing functions this could present an additional learning curve.
KOR Connect:
KOR Connect is a new way for client-side web apps to integrate APIs. KOR Connect is the quickest way to secure API Keys and connect 3rd party APIs because you do not need to build infrastructure (AWS/ other cloud providers), or code functions (AWS and Netlify Functions). KOR Connect also uses AWS Lambda to secure API keys but the similarities between KOR Connect and the other options end there. The API key is secured on KOR Connect through a one click integration, then a public URL and header are generated by KOR Connect that is copy- pasted into the frontend code. This third party API integration process takes less than a minute for the developer to complete and automatically comes with a number of security features. These features include bot control which inspects 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, and blocks these calls if they don’t pass inspection. As well as validates the access-control-allow-origin header from the developer’s allowed origins, and provides a per user rate limiter that can block malicious actors abusing calls without causing any interruptions to other users.
If the developer wants even more security after this simple single URL integration is completed KOR Connect offers a more robust origin validation and an attestation layer provided by Google’s Recaptcha. Depending on the framework that the developer is working with (e.g. Reactjs, Vue, Angular etc) the corresponding snippets of code that KOR Connect provides will need to be placed into the code of the project.
KOR Connect prevents endpoint calls from malicious actors with and without the browser, secures API keys, and blocks bot attacks. The public URL that is used in the code does not need to be hidden so this frees the developer from having to worry about API secrets ending up in the git repository, API secrets being exposed on the client, having to manually create wrappers around lambda functions, and worrying about unwanted endpoint calls being made. The current feature set offered by KOR Connect is the best option for client-side web apps that want dynamic functionality but may not necessarily want user authentication. (Bonus it’s also free)
Here are some tutorial links walking you through API integrations with KOR Connect:
Try them out!
Music Downloader API Integrated on the Frontend
Quickest way to Secure API Keys on the Frontend- Building a Vue.js Covid tracker.
Top comments (1)
nice job bady