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

Question

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?

Answer 1

If you're providing this sublet for authenticated users, then it's fairly trivial to give them unique keys (something that hashes their user ID or session against the API key and an initial timestamp, and checks it / logs it / looks for brutes before accessing the API). If you're doing it on the open web, without any kind of user authentication, then rate limiting gets very tricky indeed. Generally you'd want to use a combination of session hashes, IP address, operating system and browser data to create an anonymous profile that gets a temporary key on the frontend. One fairly solid way to do this is to force users through a CAPTCHA before serving a temporary key that allows them a limited number of uses of the permanent key. Any user whose ip/browser/session matches the existing attributes of a known client key is shunted to that one (and gets to skip the CAPTCHA); anyone who doesn't match an existing profile gets the CAPTCHA. That makes you a less attractive target for spoofing. On top of that, you should always rate-limit the entire thing, within a reasonable number of hits per day based on what kind of traffic you expect (or can afford), just so you don't have any surprises. This is the minimal security you'd want if your client's money is on the line every time their API key is used. It will require a simple database to store these "profiles", track usage, check for brutes and maintain the currently valid client keys. Client keys should always be expired regularly - either with a time diff against when they were created, or a regular cron process, or a maximum number of uses, etc.

One other thing I frequently do is rate-limit based on a curve. If I think 5 uses per minute is reasonable, for example, then after 5 uses in a minute from a session, each usage adds a delay of a fraction of a second * the number of uses in the last minute, squared, before the data is served.

The best answer would be to put this all behind a login system and secure that.

Answer 2

Assuming that you are using OAuth kind of system, In that case, make use of Access Token Mechanism that provides access to private API/User's data on behalf of User(Client) without exposing his/her credentials or API Key(Authentication key), also the access token can be expired based on the time/usage.

Example: The access token is generated against a single endpoint that can be the Html Conversion endpoint and will be expired once the action completion.

https://auth0.com/docs/tokens/access-token

And following blog post would be helpful to architect your authentication system https://templth.wordpress.com/2015/01/05/implementing-authentication-with-tokens-for-restful-applications/

Answer 3

there is no good way to do front-end secure storage but my recommendation is :

is an API that used HMAC signing of requests in combination with OAuth authentication. The API key is actually a signing key. they key does not get transferred. The API key can still get found on the front-end but it becomes useless because you still need the OAuth token to send a valid request.

i know users will have to login in, but you can see this as an advantage because atleast you can log who is using the app by getting information from oauth.

please consider back-end secure storage!