How to secure an API connection from a static site hosted on a CDN?

Implementation
,
#1

Use case: A single page application using react is hosted on S3 + Cloudfront. The site calls the Yahoo Finance API to request some market data. The third-party API uses an API key to authenticate the requests. I can only store the third party API key in the static site making it available for anyone.

Considerations:

  • The static site and the API are not in the same cloud provider or service, so a solution using roles wouldn’t work.
  • A Lambda (Function) proxy solution is my best choice at the moment IMO but this would still allow a request to be sent directly to the Lambda (Function).
  • The request to the function should also be secure, making the above option still vulnerable. This means that getting the URL to the Proxy Function from the source code and calling the Function is not acceptable either.

Looked around at some other questions posted but I haven’t found one that addresses the particular circumstances stated here.

#2

You are correct about the proxy solution not being able to block traffic. This problem is very common one and there is no bullet proof answer but you can definitely reduce your exposure significantly by connecting your application with KOR Connect.

To address your considerations:

  • KOR Connect is vendor agnostic meaning it will work regardless of where you are hosting your site / application / front end. Same goes for the APIs you can connect to by the way.
  • For your second and third points you can consider KOR Connect connections as proxies but these connections come with some additional validations to secure the requests to your function. Basically KOR Connect uses recaptcha as an attestation service to ensure traffic comes from the domain your are hosting your site, it detects suspicious traffic and it also expires requests automatically.

Now, about storing your API key, you can store it and manage it through KOR Connect securely and it won’t get exposed on your site. KOR Connect will give you a secure URL which you can use to replace the base URL of the API your front end will consume, this is also beneficial as it obscures the calls.

That’s it, go through the snippets to get info on how to set it up correctly and if you’re curious about how does KOR Connect manage security this should be covered in the documentation site.

2 Likes