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 commu

Answer 1

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 2

Hashing is a decent option and should be done anyway, but for a fully secure method that wouldn't add too much complexity, you could simply abstract away from the authorization/API key by building your own API to interface with the API. This way you could both limit the kinds of things that can be done with the API key and also completely obscure the API key from the user

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!

Answer 4

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 5

You can use JWT tokens in my opinion. On the basis of username, password or any other info you can generate unique jwt tokens for different users. Anyone can decipher these jwt tokens but not he unique security token.

If you want to add more more security to tokens, use JWE, encrypted web tokens.

More about these schemes can be found at https://medium.facilelogin.com/jwt-jws-and-jwe-for-not-so-dummies-b63310d201a3