javascript - Hiding API access credentials from an AngualrJS app - Stack Overflow

admin管理员组

文章数量:1401673

This is a design question for AngularJS websites that access a REST API. Since all the AngularJS code can be viewed from the client side (assuming obfuscation is not pletely secure) how do you hide the API access credentials (the API key and password or even a JWT)?

This can be extended to a broader question about how other application logic can be hidden in an AngularJS website?

My research led me to some insights, one of which was

/

But this has me more confused now, since the post suggests an SPA connecting to a REST API is not a good architecture. I thought it was and now can't figure what the right approach is.

This is a design question for AngularJS websites that access a REST API. Since all the AngularJS code can be viewed from the client side (assuming obfuscation is not pletely secure) how do you hide the API access credentials (the API key and password or even a JWT)?

This can be extended to a broader question about how other application logic can be hidden in an AngularJS website?

My research led me to some insights, one of which was

http://billpatrianakos.me/blog/2016/02/15/securing-api-keys-in-a-javascript-single-page-app/

But this has me more confused now, since the post suggests an SPA connecting to a REST API is not a good architecture. I thought it was and now can't figure what the right approach is.

• javascript
• angularjs
• rest

Share Improve this question Follow asked Mar 21, 2017 at 0:39 Vikas MujumdarVikas Mujumdar 31266 silver badges1010 bronze badges 3

• I'm confused. This question seems like you want an opinion, rather than an answer. Personally, I agree with the author who posted it. However, I'm sure other people would disagree – cjds Commented Mar 21, 2017 at 0:43
• I apologize. I originally had a question, about hiding API access credentials but ended with a request for opinions on the architecture. But if the latter is true (that the architectural approach is wrong) then my original question is moot. And then my question would be "what then is the correct architecture for SPAs and server side code (or database access)?". Sorry if this is not in line with SO discussion rules, don't know how exactly to ask this. – Vikas Mujumdar Commented Mar 21, 2017 at 0:46
• On your second question I added a general explanation below. It's a bit rambling, but should hopefully elucidate – cjds Commented Mar 21, 2017 at 1:04

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

The closest I can e to an answer is this resource:

https://developers.facebook./docs/facebook-login/security#appsecret

Facebook, is pretty good with their security and say:

1. Never include your App Secret in client-side or depilable code.
2. Use unique short-term tokens on clients.

In short, do not keep API secrets on the client side

---

Answering the discussion in ments for sake of not being brief:

And then my question would be "what then is the correct architecture for SPAs and server side code (or database access)?".

There's no one correct architecture, it depends on the size and scope of your project. It will also depend on what frontend and backend frameworks you choose. Those choices also will depend on how many other APIs you are calling, or what other developers or you are most familiar with.

Speaking more specifically about security though, ideally you'd like to set up a session for the user which consists of a token that the user uses to identify himself. This is usually generated for each user by the server when they login. Generally this is provided by the framework you are working in, but even if it isn't, it's fairly simple to build. You will want to prevent cross origin requests (making sure the user is actually on YOUR frontend) and have secure connections (setting up SSL and https, though this can get plicated). You will generally want to run your JS code through something like Uglify to prevent it from being too easy to look through, but this does NOT guarantee that people cannot take that code and un-uglify it.

As the other answers have suggested, you should never keep API keys or any secrets in the client source code. There is no way to hide anything on the client, and obfuscation != security.

If you are looking to architect secure authentication/authorization into your app, you will want to return a JWT to the AngularJS application. You can then pass this JWT as a Bearer token to your API which will verify the validity of the token and allow the API to authorize access to the AngularJS application.

As for where to store the JWT token, you can store it in either Local Storage or in a cookie. There are serious considerations between choosing whether to store the token in either of these locations.

If security is your concern, I would look into the OAuth 2.0 Implicit Flow.

Don't put API keys in your client side source code. Keep them on your server, and have your client make a request to YOUR server, which then calls out to external APIs for data.

本文标签： javascriptHiding API access credentials from an AngualrJS appStack Overflow