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
Brian Clark _clarkio
Insecure Heroes
An attack that injects malicious code into a trusted web
site such that it may be executed unintendedly by other
users
Cro...
Prevention
Content Security PolicyInput Handling
Control what resources
the browser is allowed to
load
Ensure data is alig...
Input Handling
Input Handling
Input Handling
Validation
Input Handling
SanitizationValidation
Input Handling
EscapingSanitizationValidation
Sanitization EscapingValidation
Ensure the data is legit
Invalid Email
Result
:
Validation EscapingSanitization
Clean the bad data
BC
Result
:
SanitizationValidation Escaping
Encode the bad data
B<script>alert(1);</script>C
Result
:
Do not trust user input
Where should we apply
input handlers?
Where should we apply
input handlers?
Client? Server?
Browser
http://insecureheroes.com
Server
http://insecureheroes.com
Security
Boundary
Browser
http://insecureheroes.com
Server
http://insecureheroes.com
Security
Boundary
Untruste
d
Browser
http://insecureheroes.com
Server
http://insecureheroes.com
Security
Boundary
Truste
Both
https://angular.io/guide/security
https://angular.io/guide/security
?
https://www.npmjs.com/package/express-
validator
https://www.npmjs.com/package/xss-
filters
Content Security Policy
<script>var x = “yz”;</script>
Content Security Policy
Content-Security-Policy: default-src 'self '
Describes sources type...
https://www.npmjs.com/package/hel
met
https://www.npmjs.com/package/hel
met
Summary
XSS Attack
XSS Mitigation
Angular Assistance
Node.js
Assistance
© AngularMIX All rights reserved.
https://www.angularmix.com
References
 https://owasp.org
 https://github.com/Azure-Sam...
© AngularMIX All rights reserved.
https://www.angularmix.com
Please use EventsXD to fill out a session evaluation.
Thank y...
Malicious Input: Angular Has Our Back
Malicious Input: Angular Has Our Back
Upcoming SlideShare
Loading in …5
×

Malicious Input: Angular Has Our Back

154 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

×