Keeping an API Shared Secret secure while using Angular

4
votes

We have an existing API that used by some of our external apps (Docker Containers, etc) to call back to our server. It's secured using an HMAC (Shared Secret) system. This works great when making calls from one server to another.

But, we are about to begin the process of slowly converting our website form .NET Web Forms to Angular (v6), and we are hoping that Angular will be able to use the same API's and the same security.

What we envision is a single Angular library, called something like AngularAPICall, that is instantiated at the start of every session which accepts the public key and the shared secret as parameters. Then, everytime Angular needs to call back to the server, it makes a call to a method inside AngularAPICall, which uses the public key and the shared secret to create the needed hash values and build the API call headers.

But, we're unsure of how to keep the Shared Secret safe and secure when using it on a natively client-side platform like Angular. Where / how do we store the Shared Secret? Putting it in the web.config won't do any good. And in addition to storing it, how do we pass it into the client side library AngularAPICall and keep it secure? And how do we persist it so that it's maintained between calls?

Or... are we going about this the wrong way? Should we re-think how we handle our API security for use in Angular?

2
c#asp.net.netangular
Yep, no secrets can ever be truly secured in a client side application I'm afraid, as all the code is going to be downloaded onto the users machine. There's nowhere to hide so to speak - user184994
not sure why it would have a close vote, it is a valid and detailed question. - Josh Stevens

2 Answers

2
votes

Having any sensitive data in the client is a huge security issue. The client can be manipulated by any user using the developer tools and it should NEVER contain any shared secrets of any sort.

At the end of the day adding a framework like Angular or React makes it easier for you to build a nice UI, It does not protect you in any way.

Any kind of web application needs a extra layer of authentication as a simple secret can be intercepted by any person viewing the network.

I would recommend using oAuth or JWT tokens to authenticate valid requests. In theory the API endpoints should only be protected if they bring back sensitive information. I am assuming people are logging into this platform on this regard. These tokens are generated from the server and they are used in the client to make requests. You can make the assumption if the user is logged in and generated the first JWT token from that point you can pass them to your API requests as it is only viewable on the client of the authenticated user.

When you enter the big world of the web you need some authentication to protect your APIs and there are loads out there. What you are doing above can be hacked by anyone very quickly. Rethink your authentication modal, remember the server should NEVER trust the client!

1
votes

I would rethink how you use your API from the frontend. Maybe look into an API Gateway that the angular app can authenticate against.

The accepted answer to this question: https://softwareengineering.stackexchange.com/questions/361949/how-to-secure-web-services-when-authentication-is-done-at-client-side-frontend seems extremely relevant here but ymmv as to exactly how you implement it.