Security with Angular JS

[@liamma1990]

Awesome tutorial. Two thumbs up! Without your videos, I almost gave up on Angularjs due to its unique learn curve.

[@DavidMosher]

You are correct Daryll; I only covered it in the context of general good security practices and to highlight another feature of Angular, but my intent was not to connect it to the Authentication Service in the example. I think I discussed the nature of $sanitize only being useful in the context of displaying user input within your app.

[@JasonHeathArtist]

Great series of videos on Angular! Thanks for sharing these concepts, they are really helping me get my head wrapped around Angular.

[@noducks100]

Great Screencast... Very helpful. Thanks. Would also love to see something on Jasmine/Karma testing. Particularly on automating e2e and unit tests with Grunt.

[@strandloper]

Interesting video. I particularly liked the pointer to Troy Hunt's video. After watching that it was enlightening to look at how some sites I'm familiar with fare in that regard.

[@DavidMosher]

Hey Domenico, I'm glad the cast was helpful! I'm going to explore testing strategies (both unit and e2e - end to end) in my next screencasts, but perhaps I will return to doing a node/express backend in the future. You may want to checkout the new cast I released yesterday "Frontend Workflows with Grunt and Angular" as it does cover some express setup in the latter half. Cheers! :)

[@DavidMosher]

Hi Tolga, there are multiple strategies for dealing with securing your templates, rendering server-side is definitely one of them. The only potential problems in doing this arise when you get a large number of templates requested per route being loaded; Angular mitigates this somewhat by caching subsequent calls for templates within $templateCache, but it's something to be aware of. My ideal is to precompile into the $templateCache to avoid any extra XHR's where possible.

[@DavidMosher]

No problem at all, thanks for watching the video :)

[@kenyee88]

Would love to see a cast on how you handle roles in AngularJS as well. Thanks for this one though I don't use PHP for the back end.

[@tolgay.ozudogru9862]

Hi David, thanks for the great series. I really enjoyed them and they were very helpful. I have question if I might. Instead of exposing the partial HTML files in the public folder and injecting CSRF protection, do you think would it be possible to keep them in Laravel's views folder and provide a GET route for each of them with a before Auth filter? The routes would render the templates and Angular would retrieve them using these routes and they will be inaccessible to unauthenticated users.

[@LEXdiAMoNDz732]

again i love this whole screencast thanks!! i would really like to see a screencast on maybe the same sort of thing like an end to end with angular using node and express as the backend and how that all works... just a thought :)

[@DavidMosher]

Thanks, Jason! I'm glad the series is helping :D

[@NitzanB]

Thank you very much, David! May I ask what program you use for screencasting?

[@DavidMosher]

Noted, seems like the next evolution in my series of screencasts will have to tackle build/dev automation and test integration... I started to feel that would be a good direction to go after having to navigate 1 big file in this screencast ;)

[@DavidMosher]

If you're building a full on API for a client-side app to consume then I would recommend full SSL and a security token attached to each request that comes into the API. There is a great article on this linked in the sources within the video description :)

[@achang28]

Hi David, with your invocation of csrf_token() in timeframe 13:42, did you build out this method (to return the CSRF token)? In other words, how did you get the CSRF_token? Also, i'm not understanding the reasoning behind allowing your Angular app server to "freely" obtain this CSRF_token. As I am understanding your Laravel app to give a right of passage to your Angular app through this CSRF token, shouldn't there be a process to somehow "register" the app beforehand?

[@DavidMosher]

Hey Albert Chang, the point of granting the CSRF token to the client-side is to establish the notion of a semi-trusted means of communicating between the client/server. If the client has a valid token that the server granted then all communications can be considered reasonably (but not 100%) authentic and not fraudulent. ***** links a decent video that should explain the concept in more detail :)

[@nolanrosen5725]

Albert, in Laravel when you use the blade templating engine you can insert {{Form.token()}} into your html and it will automatically generate the CSRF as well as verify when a form is submitted. If you go into session and change the hashed 60 char token manually and then submit it will throw an exception and depending on routes send you somewhere.You can also generate a VSRF with a input hidden field in any HTML and then the route or elsewhere verify the CSRF token. Laravel also use Eloquent which protects again SQL injection etc. The problem is Laravel blade engine and Angular are both template engines so they don't really work well together and also Laravel is a PHP server request cycle and sucks with Ajax. I use both, but honestly the power of Laravel is mostly lost with Angular.

[@nolanrosen5725]

Another comment, might help. The token is generated as a hidden field with '_token'=name. You can use Jquery or Angular to look for form or _token at submit. Then parse it out as in the above videos and then in your Laravel Controller check with a create / update function (form, etc.) ... if ( Session::token() !== Input::get( '_token' ) ) {return Response::json( array,'msg' => 'Unauthorized attempt to create setting') ) }. Hope it helps

[@DavidMosher]

Yep, that's what I discussed in the screencast; I was mostly showing ng-sanitize just to demonstrate how you can use it. :)

[@MrLarryQ]

Looks like a great video, but do I need to watch it before viewing the next (grunt) one in the series? I ask because I don't use Laravel...

[@DavidMosher]

Hi David, there is nothing PHP specific about the concepts discussed, and in fact you can use the same techniques in the video with an ASP.net Web API. Just google "CSRF Token" + "ASP.NET" and you'll find some examples. I chose PHP as my API in the video purely to appeal to the widest audience possible, but the techniques discussed will work with any server side that provides authentication and CSRF protection via a token.

[@daxxander]

Awesome I found out how and it is working now. This is great! I love angular js and laravel. They play very nice!

[@zackzr]

Thanks for a really great compilation and detailed walkthrough. One thing I am curious about is: how would you prevent users to change values in their SessionStorage, so that the Angular app can not be spoofed by lets say setting the "authenticated" key in your app simply to true ?

[@rhamalho]

For that reason that you need some server security.

[@DavidMosher]

Hi alchemikification, my next screencast will cover precompiling angular templates and a general look at some of the tools you can use to build your own workflow when creating an angular app; I agree with you that serving up template partials over XHR isn't ideal, but it is pretty nice that you _can_ do that when starting out with Angular :)

[@DavidMosher]

Hi daxxander, regarding the CSRF_TOKEN if you are loading the app assets asynchronously then you will want to do a manual bootstrap (checkout the angular docs on bootstrapping to find out how to do this). You'll need to fetch the CSRF_TOKEN via AJAX first, then set the constant, then bootstrap the app. Coincidentally, this is exactly what I'll be covering in my next video "Frontend Workflows with Angular JS" :)

[@g8g4v9jd4]

the link to first episode doesn't work in this episode description. besides, i can only give you praise :) thanks for the tutorial!

[@eccreativ]

an idea for a future of screencast: in depth TDD/BDD with jasmine and maybe karma. Examples of how to properly start a project by laying out tests first. Testing services like Factories as well as testing Controller logic.

[@tomstom31]

Hi David really great video like always :) ! I've got a question : How to get a CSRF Token from the server when the login process is not manage by AngularJS (SSO for example) ?

[@eamonngahan4259]

Nice one. Thanks for taking the time to make this. - E

[@christopherwerby7564]

Excellent screencasts! If the list of protected pages is merely an array in client-side javascript or set with an auth method in that same javascript, couldn't a determined hacker modify the angular javascript (even if uglified) and see the pages that were supposed to be protected?

[@DavidMosher]

Hi Christopher Werby, any attempt to "secure" the client-side is of course going to be subject to the potential for people to modify that code. The key takeaway of this screencast was intended to be a better understanding of how to utilize current best practices around securing web applications in general (using CSRF tokens, etc..). Securing the client-side routes works fine for protecting access to template rendering in a limited way; additional server-side security would also need to be put in place to make sure that the API endpoints for those "secure" client-side routes weren't able to respond to an unauthenticated user.

[@christopherwerby7564]

***** Hi David, I thought I might have missed some magic about protecting the client-side code. If I wanted to protect it, I might consider the login one app and not deliver the code for the real app until after login. I can't tell you how much I've learned the last few days by watching you code in your screencasts. I don't know where you live, but if you come to San Francisco, I owe you a dinner!

[@DavidMosher]

Christopher Werby Yeah the "hybrid" approach you describe (login.html + singlepage.html) is totally viable, and lots of apps use it. It's probably simpler in the long run than trying to do client side route "security" as well :) I'll be sure to ping you if I'm back in the SF area, Cheers!

[@MrAndr3s2]

Hi David, first that all, you videos are great. I have a question, you are not allowed to enter to /books because an error is thrown when you try to access to the server via $http.get(), but what if the page doesn't have any request to the server (imagine just an HTML) in this case it is impossible to the server execute the auth filter (i't won't throw any exception). and the storegeSession approach is not secure. so, how protect completely routes that doesn't have any request to the server ?

[@DavidMosher]

Hi hen3hao3, in the video I added a line to the controller to assign the $scope onto the window object: window.scope = $scope; should do the trick for you. As for $resource, it's been my experience that $htto works much better, but don't let that stop you from trying out $resource to see if it suits your needs :)

[@DavidMosher]

Thanks Viktor, the youtube editing interface for video descriptions often mangles links, I'll fix them though :)

[@daxxander]

Thanks this is an answer that will help me find some what of a solution in the next couple of hours :) Thanks for pointing in the right direction.

[@tolgay.ozudogru9862]

Thanks David for clarification.

[@DavidMosher]

The security knowledge is general in nature, so I would say it's probably worthwhile, Laravel was just used to be consistent. The principles will apply to any server-side technology stack :)

[@DavidMosher]

Yeah, they do work pretty nicely together :)

[@LarsRyeJeppesen]

Hey David, great video. I was wondering why it's necessary to use $sanitize.. after all, it's all happening on the client. If you have good server side input validation, why do it on the client as well? Yes, you can fsck up your client if you display input values - but so what? It only affects the current user ..

[@DavidMosher]

Hi Lars, I was mostly covering $sanitize to showcase how to use it, in this example it's entirely unnecessary. The most likely place to need to sanitize user input is when you are displaying it on the screen within your app and where it has the potential to be viewed by other users.

[@LarsRyeJeppesen]

***** Thanks for clearing that up.. totally agree.. I'm not sure about this, but I believe ng-bind automatically sanitizes input (at least in Angular 1.2.x).. although I could be wrong on this one.. Anyway, thanks again

[@daxxander]

Hi there. Thanks for the eye-opener. I do have a question about the CSRF_TOKEN, when loading the app through require.js. Right now the contant is created before angular is defined. Do you have any ideas how I get this working?

[@DavidMosher]

You're welcome! I use Screenflow to record my screen and voice :)

[@jorge55609]

hi david, you are very good, you should do a simple CRUD tutorial where we can see how can we implement anjularjs MVC but with ruby on rails or with java would be fantastic...!! otherwise you helped me a lot with your videos, keep doing it you are great, Many thanks.

[@serhioromano]

Why we have ti insert token with PHP into meta. Can I simply get token with $http on angular app run method? Because I do not use laravel to generate first page. I only use it to create API server. But index is a pure HTML.

[@MilanZivkovic]

Thanks David, your tutorial is great, like always :)

[@UrbanBDKNY]

Dave, why did you choose to add the CSRF token as a CONSTANT and did not alter Angularjs to send the value on each HTTP request using $httpProvider.defaults.headers.post['My-Header'] or $http.defaults.headers.post['My-Header'] or something similar? Is the 'cookie' approach not safe. I have read some posts online that suggest it is not as safe.

[@jasonpanugaling]

Hi, can we use ui-router for the routes?

[@pm_calabrese]

Superb explanation!

[@alchemication]

Thx David! This is exactly what I was thinking about since a good while (I mean security in Ng apps), superb! one thing is people being able to directly access partials from url, any comment on that? (I know, they will see {{ }}'s - but still balls ;D) ... Other than that as others mentioned Testing, Grunt-ing and maybe some lazy load approach would be fantastic to see ;) Again, thanks a lot.

[@sonofjack00]

Really great stuff. Many thanks

[@venuzrg]

Hi David I am having trouble with the gist 6141699 in angular 1.2 and I believe it might be due to a race condition during registration. If I register a hardcoded constant in the injector above the call to http.get, I have no issues and can inject it into my service/controller. However if I try to inject a constant like you did, I get an 'error [$injector:unpr]...' Btw, thanks for the video. Very insightful -RV

[@DavidMosher]

I'll take a look and see if I can replicate Rao Venugopal :)

[@DavidMosher]

Ok, so the issue is that if you are going to use the code in the gist you'll need to avoid automatic bootstrapping which happens when you include `ng-app="app"` in your markup. The gist is intended to be used when you want to manually bootstrap. Rao Venugopal

[@RaoVenu]

***** That was it! Thanks for your quick response.

[@DiegoBarahona]

The problem that I can see is that your client application needs to be served by the server apps, so in the case that you need to separate the client from the service, or just thinking in a mobile application is impossible. How do you solve this problem? I have serious issues thinking in how to protect my REST server, and every solution I found is not a real solution, it's just a patch. I'd like to hear your opinion.

[@DavidMosher]

As long as the domain which you have CSP enabled on is whitelisted in the policy then you should be fine. If you want to examine an approach that manually bootstraps the Angular application shown in this video _after_ remote loading the CSRF token then check out my other video "Frontend Workflows with Angular JS"; a suitable technique that would work with a CSP enabled is covered in that video :)

[@DaryllStrauss]

It seems to me Sanitize is really only useful for cleaning untrusted data being displayed by angular. It's not useful for data submitted to the server. The problem is that I can synthesize a request (with curl for example) that bypasses the sanitizing. If your backend doesn't sanitize the data, then the polluted data is inserted, and can later be displayed b angular.

[@MrDeerings]

thanks mate, helped me heaps.

[@B3DFire]

I am curious about the CRSF token, does a new unique token get generated on each login. If not, couldnt an attacker just log in grab the token, and send it as well?

[@DavidMosher]

Hi Paul, a unique token would be generated per session.

[@aklilzeleke8905]

Great Video! Thanks!

[@B3DFire]

Hi there, I have a question regarding how you inject the CSRF token into your laravel template. How does laravel get loaded so that csrf_token is actually called?

[@DavidMosher]

In the followup screencast I go through the 'manual bootstrap' technique with Angular that involves making an initial request to Laravel to set the context of the CSRF-TOKEN, but if you want to check out the code you can see it here: github.com/davemo/frontend-workflows-with-grunt-and-angularjs/commit/1f64fcd53b996bbd47875ab3cbc6252f6775c4db#diff-d5affc60293123828e0411aff7a77bbcR7

[@DavidMosher]

Alternatively, angular does provide the ability to set this as a header on all requests by configuring $httpProvider and setting `$httpProvider.defaults.headers.common`; see: gist.github.com/davemo/5806100 for an example in a Rails application context.

[@todmhilton]

I’m getting an error related to logging in with invalid credentials. I’m getting a 500 error (localhost:8000/auth/login) rather than the 401 that happens when trying to browse to a page the requires authentication. Shouldn’t it be 401 rather than 500? How do you pass in the “authenticated” value to another controller? Specifically, I want to display information in a navbar based on the users authenticated status. I’m really struggling with out how to do this.

[@todmhilton]

Okay, never mind. I figured out where the 500 error was being set. I also figured out where to set the logged-in/logged-out status in the controller.

[@commandantp]

***** The token changes between the time I load (throught bootstrap) it and I do the call to check it... any lead on the issue? -- UPDATE I sent a pull request to your code to avoid that see the github rep if you have that issue

[@LizardanNet]

What sublime theme is that?

[@DavidMosher]

HI LizardanNet, I believe at the time of recording I was using the Cobalt theme (lighter version). I've since moved to using Cobalt2 :)

[@LizardanNet]

***** Just installed it but in windows looks totally different :s ... background color is blue ... oh well..

[@DavidMosher]

LizardanNet I just remembered the name, it was the Soda Theme github.com/buymeasoda/soda-theme/ :D

[@LizardanNet]

***** Cool! that's what I'm talking about.... Thanks.

[@DavidMosher]

Hey Thomas, you can always remote load a token from another API prior to bootstrapping your angular application. There's an example at gist . github . com / davemo / 6141699

[@DavidMosher]

You're welcome :)

[@tomstom31]

Oh I see ! Really good :) Thx

[@bartlebob]

Nice dude!

[@dacanetdev]

Looks good but that is more implementation in PHP than AngularJS, I meant works but not for someone that has ASP.NET Web API as Server Side. With the Title of the Video I expected pure AngularJS implementation. Thanks anyway

[@Xxp0r]

I don't agree with sanitizing input, rather you should sanitize output when it is displayed to the user.

[@DavidMosher]

Should be fixed now! :)

[@LightProgramming]

Why would you sanitize something client side? cant they just alter the sanitize function so it does nothing, then you have a security hole? I found the solution, stackoverflow.com/questions/23839173/how-safe-is-client-side-html-sanitization

[@B3DFire]

I have posted an entry into the YII forum that shows you how to inject the CSRF token into a Yii app using Angular.js here: www.yiwork.com/forum/index.php/topic/10152-csrf-help/page__gopid__248330#entry248330 Hope this helps anyone... thanks Dan for making this video

[@Xxp0r]

My bad, maybe I should comment after the video is done not during haha.

[@commandantp]

***** Thank you so much for the amazing ressource! It's been really helpful. For those who have headers problem check out github.com/barryvdh/laravel-cors for your Laravel app to solve that.