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.

1. Malicious Input: Angular Has Our Back
Brian Clark _clarkio

2. Insecure Heroes

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. 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. Input Handling

6. Input Handling

7. Input Handling
Validation

8. Input Handling
SanitizationValidation

9. Input Handling
EscapingSanitizationValidation

10. Sanitization EscapingValidation
Ensure the data is legit
Invalid Email
Result
:

11. Validation EscapingSanitization
Clean the bad data
BC
Result
:

12. SanitizationValidation Escaping
Encode the bad data
B<script>alert(1);</script>C
Result
:

13. Do not trust user input

14. Where should we apply
input handlers?

15. Where should we apply
input handlers?
Client? Server?

16. Browser
http://insecureheroes.com
Server
http://insecureheroes.com
Security
Boundary

17. Browser
http://insecureheroes.com
Server
http://insecureheroes.com
Security
Boundary
Untruste
d

18. Browser
http://insecureheroes.com
Server
http://insecureheroes.com
Security
Boundary
Truste

19. Both

22. https://angular.io/guide/security

23. https://angular.io/guide/security

24. ?

25. https://www.npmjs.com/package/express-
validator

26. https://www.npmjs.com/package/xss-
filters

27. Content Security Policy

28. <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

29. https://www.npmjs.com/package/hel
met

30. https://www.npmjs.com/package/hel
met

31. Summary
XSS Attack
XSS Mitigation
Angular Assistance
Node.js
Assistance

32. © 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

33. © AngularMIX All rights reserved.
https://www.angularmix.com
Please use EventsXD to fill out a session evaluation.
Thank you!
Brian Clark _clarkio