2

I am working on angular js app,and tried to make a simple login page and tried to request my server API for authenticate my login call.Here what and how i planned to do.

Note: I am assuming that server is responsible for validating my token and request.

Provide username password to server via API call. On getting authenticated the server will generate a token for my App(through which i made a call). I stored this in my browser's COOKIE. This Cookie (auth token) will be further used by app to to make each and every HTTP call to API.

Now this approach is working fine for me,but I believe it is openly available for CSRF attack.

In order to avoid the CSRF attack from my browser,i provide APP id or (version id) to my code which also travel with cookie to the API for http call.

The idea behind using this version id or App id,is this can be treated as a signature of my code,ie request is coming from the signed (verified) app who has alloted token=cookie value.

i just want to know how better my approach is and how much secure it is for my basic app point of view and for my major (wide project) app.

Here i am trying to show via a rough diagram

apologies for this tiny view and bad handwriting of the diagram. enter image description here

anujayk
  • 544
  • 7
  • 31
  • *"I stored this in my browser's COOKIE"* stop that. By providing this information via a cookie, any requests sent by 3rd party extensions (or the user's console) will also contain that cookie automatically without even needing to read it. – Kevin B Sep 24 '15 at 19:35
  • Don't save the token as a cookie, instead pass it with each request through a TLS connection. – Devon Bessemer Sep 24 '15 at 19:35
  • i am having a single page app,how will my app understand weather the user is already logged in,when the page get reloaded. – anujayk Sep 24 '15 at 19:40
  • @amoeba once you don't use to cookie to storage the token you are going to be protected against CSRF. For the reloaded case use a local storage to persist the token. https://github.com/gsklee/ngStorage for example – pedrofs Sep 25 '15 at 18:37
  • @PedroFernandesSteimbruch i guess this dependencies will going to help me ,let met try this out ,i'll reopen this issue if i found its not working as i am looking. – anujayk Sep 26 '15 at 18:25

2 Answers2

0

Backend frameworks like Laravel have this pretty built in: csrf-protection.

You can pass the token to Angular by using angular's constant function: $provide#constant.

So after you initialize your app you could say: angular.module('myApp').constant('<?php echo csrf_token(); ?>'); and Laravel would do the rest. If you would want to implement a technique like this yourself, you should look into Laravel's source code: https://github.com/laravel/framework/blob/a1dc78820d2dbf207dbdf0f7075f17f7021c4ee8/src/Illuminate/Foundation/Http/Middleware/VerifyCsrfToken.php.

Pepijn
  • 1,204
  • 1
  • 11
  • 25
  • thanks for your reply,i am developing a client side app,how php is coming into scene constant(''); , my app is just holding a token which it received from the API server once authenticated – anujayk Sep 24 '15 at 19:47
  • That could be obtained via an $http request the same way, you would just need to store it for future use, for example, in a variable or a constant. – Kevin B Sep 24 '15 at 19:48
  • 1
    You could make your token short-lived and just store it in Javascript and refresh the token every time. – Pepijn Sep 24 '15 at 19:51
  • @KevinB :i agree i can store it,but what when i reload the page?all my stored value get cleared and previously logged in user will be shown as logged out now. – anujayk Sep 24 '15 at 19:57
  • that i guess is the downside of building just a client side app. You would have to find a way to store it somewhere, there are many options, like `localStorage`. – Pepijn Sep 24 '15 at 19:58
  • what if i want to clear my login by clearing the browsing data of the browser,i guess using `localstorage` wont be helpfull if user needs to clear login just by clearing data of browser,only script can clear the localstorage data. – anujayk Sep 24 '15 at 20:10
0

Adding App ID + Version ID to each request won't protect your system from a CSRF attack, unless these are in a custom header - and if they are you might as well just use X-Requested-With because any non standard header is protected going cross domain, provided you haven't enabled CORS with an open policy.

The reason that checking App ID + Version if set in the query string or POST data is that the attacker can readily gain this information to add the App ID + Version ID to their cross site requests. Another method that would work for you is the Double Submit Cookies technique. Generate a random 128 bit string using a CSPRNG and then set this as a cookie value (e.g. CSRFCookie). On each request to your API, also pass this value. e.g. in the query string: CSRFCookie=<generated value>. On the server side you simply check that the values match. An attacker does not know the cookie value, therefore they cannot add the same value to the query string.

This method does have some minor vulnerabilities, only really exploitable in a MITM scenario or if you do not control all subdomains. Short answer: Use HTTPS only for all your subdomains and implement HSTS.

Community
  • 1
  • 1
SilverlightFox
  • 32,436
  • 11
  • 76
  • 145