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.

Malicious Input: Angular Has Our Back

137 views

Published on

Building an Angular application and want to make sure you create it securely? We'll cover one of the security features built into Angular and how it helps protect your web applications. We'll see the vulnerability in a sample web app and learn of the broader defense techniques used to mitigate it. We'll then see how Angular enables us to implement this method with little to no effort needed easily.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Malicious Input: Angular Has Our Back

  1. 1. Malicious Input: Angular Has Our Back Brian Clark _clarkio
  2. 2. Insecure Heroes
  3. 3. An attack that injects malicious code into a trusted web site such that it may be executed unintendedly by other users Cross-site Scripting (XSS)
  4. 4. Prevention Content Security PolicyInput Handling Control what resources the browser is allowed to load Ensure data is aligned with the expectations for its intended use
  5. 5. Input Handling
  6. 6. Input Handling
  7. 7. Input Handling Validation
  8. 8. Input Handling SanitizationValidation
  9. 9. Input Handling EscapingSanitizationValidation
  10. 10. Sanitization EscapingValidation Ensure the data is legit Invalid Email Result :
  11. 11. Validation EscapingSanitization Clean the bad data BC Result :
  12. 12. SanitizationValidation Escaping Encode the bad data B<script>alert(1);</script>C Result :
  13. 13. Do not trust user input
  14. 14. Where should we apply input handlers?
  15. 15. Where should we apply input handlers? Client? Server?
  16. 16. Browser http://insecureheroes.com Server http://insecureheroes.com Security Boundary
  17. 17. Browser http://insecureheroes.com Server http://insecureheroes.com Security Boundary Untruste d
  18. 18. Browser http://insecureheroes.com Server http://insecureheroes.com Security Boundary Truste
  19. 19. Both
  20. 20. https://angular.io/guide/security
  21. 21. https://angular.io/guide/security
  22. 22. ?
  23. 23. https://www.npmjs.com/package/express- validator
  24. 24. https://www.npmjs.com/package/xss- filters
  25. 25. Content Security Policy
  26. 26. <script>var x = “yz”;</script> Content Security Policy Content-Security-Policy: default-src 'self ' Describes sources types in directives (css, image, etc.) <div style=“{margin-top:10px;}”> 1 3 4 2
  27. 27. https://www.npmjs.com/package/hel met
  28. 28. https://www.npmjs.com/package/hel met
  29. 29. Summary XSS Attack XSS Mitigation Angular Assistance Node.js Assistance
  30. 30. © AngularMIX All rights reserved. https://www.angularmix.com References  https://owasp.org  https://github.com/Azure-Samples/angular-cosmosdb  (branch: insecure-heroes)  https://angular.io/guide/security  https://www.npmjs.com/package/express-validator  https://www.npmjs.com/package/xss-filters  https://www.npmjs.com/package/helmet
  31. 31. © AngularMIX All rights reserved. https://www.angularmix.com Please use EventsXD to fill out a session evaluation. Thank you! Brian Clark _clarkio

×