在Javascript Web App中保护私有API密钥

Question

How can I securely store the keys to my private API in my web based (javascript) application?

I've thoroughly researched this but am yet to find a solid answer or any kind of standard procedure.

My API implements HMAC authentication, and every member of my site has a public/secret key to authenticate their use of the API and sign their request.

On a mobile app, the server would send the public/secret keys over an encrypted connection to be stored on the device after a successful login request. Subsequent requests would be signed using these keys.

So where should I store the keys on the client in this case, considering that the source code is visible to anyone who knows how to use a web inspector? In reality it's not an issue if the authenticated user sees their own keys, as they're unlikely to share them just like they'd be unlikely to share their account username/password with anyone else.

---

Possible Solutions?

Store the public/secret keys in cookies, and retrieve using javascript - Probably not too secure, can the cookies be reliably cleared when the user logs out/their session ends?

Store the public/secret keys in the web-page itself - Only real solution I can think of - Javascript can access the keys through the DOM, and they can only be compromised(seen) if the user leaves their account logged in, and somebody knows where to look for them.

Note: The web app is not a single-page app, so storing the public/secret keys within the memory is not an option.

---

Not sure if i'm on the right track at all (something tells me I'm not), hopefully someone can set me straight on this.

Thanks

Answer 1

I've come to the conclusion that what i'm trying to protect against here is CSRF..

I'm using laravel, so my solution was to add the csrf nonce (Session::token()) in the head as seen here .

<meta name="token" content="32947fh2834fgkhgfr8724234f">

And send it along in the request header:

$.ajaxSetup({
    headers: { 'session_token': '32947fh2834fgkhgfr8724234f' }
});

When authorising the api request it's a case of checking for the 'session_token' header and validating it's authenticity. If the session_token isn't there it'll fall back to the HMAC check.

Coupled with ssl this should be enough, Thoughts?

Answer 2

Not sure there's a clear solution at all. It sounds like you're trying to store a "secret" in a browser? There will aways be a way to view it, even if you try to obfuscate it.

Answer 3

Greeting,

Using API key and Token on the frontend applications always has a demand for storing key or token securely, unfortunately, the browser(client) has no such storage. This scenario can be overcome by using Access token (if Oauth) instead of API key after the authentication and these access token also can have their own expiration.

if really need an additional security against the stored Key/Token in the client side, In that case, we would have come up with a solution like encrypting our tokens using base64 kind of method with some hashing algorithm and decrypting and validating in the API endpoint would be the solution.

The following blog post may be helpful in this case:

https://www.wolfe.id.au/2012/10/20/what-is-hmac-authentication-and-why-is-it-useful/