Is there a way to secure an API key on a frontend page?

[dragonite]

My service allow any HTML documents to be converted to PDF using a POST request. It is mostly used on the backend of my client’s server and thus, the API key used for the communication is kept private.

Now, I’m thinking of a way to let my client’s visitors be able to call my service on behalf of my client API key, without exposing this secure API Key.

My main issue here is security. If my client add an XHR POST requests that contains the API key, someone can take that API key and use it for their own purpose and abusing my client’s account.

I could filter by domain, but this is easily spoofed so it’s not possible.

I was wondering if there was a way to call a private service and be identified without risking its identity to be stolen, from the client ('s client) side?

[jose]

If complexity is not an issue I would rather use an infrastructure approach, I’m most familiar with AWS so I’ll focus on that. Assuming you can change the host of your front end you can have your site hosted on an S3 bucket, served through a CDN, and create a proxy Lambda function that will hold the logic to call your API and store the API key as an encrypted environment variable. This Lambda you call through an API Gateway that can only be called by a specific IAM role which the S3 bucket also uses. You can also use a Cognito User Pool without authentication.

Going back to a simpler alternative the Captcha approach can be implemented as an attestation provider. I know of two services that do this, Firebase and KOR Connect. Due to Firebase using this approach only for their own resources as of the time of this writing I much rather use KOR Connect as it’s a very simple middleware that basically solves this issue.

KOR Connect uses recaptcha as an attestation service and has additional security validation, what sets it apart is the ease of use. It is easier to implement than the alternatives and you are able to get started in no time while keeping your endpoint safe.