How to hide/secure API keys in an Angular 2 client side application?

Question

I am developing an Angular 2 application. I am making several API calls from my service, but I don't want to publish the keys.

I know that using the keys from the backend is the preferred method, but surely there must be a way to do this from the frontend.

I have been researching how to effectively hide the API keys in the frontend, but have not found any well-explained resources on how to do so.

What is the best way to do this?

Answer 1

Well, the truth is that anything sent down to the client, including info used in HTTP calls, can be reverse engineered. Having an API key in a URL will by its own nature not be able to be obscured. The only true way to hide this completely from the client is to keep it on the backend, as you've mentioned. The most you can do is make it difficult to trace, like providing it encrypted in an environment variable and having your app decrypt it before sending, but it's still going to be in the HTTP call in plain text.

The good news is that the APIs you've mentioned in your comments are public APIs, so there is really no need to hide them. The information they provide is public to begin with, and if anyone really wanted an API key they could just sign up for one. The keys are mostly used by the services themselves to track usage (so stealing it would have no benefit, as usage would just increase and run out more quickly). If you do end up buying one and the service does not offer obfuscation methods themselves (i.e. session tracking / cookies), you'd have to mitigate it through your backend.

Your head is in the right place, but in this case it doesn't seem like a necessary step.