1. Building and Deploying Secure Angular Apps
9/17/2018 4:52 AM
BRK3288
Building and Deploying Secure Angular Apps
John Papa
Brian Clark
@john_papa
@_clarkio
BRK3288
9:00 AM - 10:15 AM ET
OCCC S330
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

2. Try it Out https://github.com/Azure-Samples/angular-cosmosdb
use the develop branch

3. Building , Deploying, Securing Angular1 1 2 2 3 3 4 4 5 5
Building , Deploying, Securing Angular

4. Building , Deploying, Securing Angular1 1
Building , Deploying, Securing Angular 2 2
Creating Apps 3 3 4 4 5 5

5. Building , Deploying, Securing Angular1
Building , Deploying, Securing Angular 2 2 1
Creating Apps 3 3 4 4 5 5

6. Building , Deploying, Securing Angular1
Building , Deploying, Securing Angular 2 1 2
Creating Apps
Building Apps 3 3 4 4 5 5

7. Building , Deploying, Securing Angular1
Building , Deploying, Securing Angular 2 1 2 3
Creating Apps
Building Apps
Deploying Apps 3 4 4 5 5

8. Building , Deploying, Securing Angular1
Building , Deploying, Securing Angular 2 1 2 3
Creating Apps
Building Apps
Deploying Apps 3 4 4
Access Control 5 5

9. Building , Deploying, Securing Angular1
Building , Deploying, Securing Angular 2 1 2 3
Creating Apps
Building Apps
Deploying Apps 3 4 4 5
Access Control
Securing Apps 5

10. 9/17/2018 4:52 AM
Angular CLI
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

11. Create, build, test and run with consistency

12. Friction Points to Modern Web Development
Getting started 1
Dev and debug cycle 2
Optimized and consistent build process 3

13. Friction Points to Modern Web Development1
Getting started
Dev and debug cycle 2
Optimized and consistent build process 3

14. Friction Points to Modern Web Development1
Getting started 2
Dev and debug cycle
Optimized and consistent build process 3

15. Friction Points to Modern Web Development1
Getting started 2
Dev and debug cycle 3
Optimized and consistent build process

16. Installing the Angular CLI
npm install
Installed globally with npm

17. Generating a New App ng new my-app --routing --prefix ma --style scss
--dry-run
Add routing
Set your prefix
Define your styles
Verify the file names
Remove when ready

18. Generating from Blueprints
ng generate component customer
ng generate service customer-data
ng generate class customer-model
customer.component.ts
customer-data.service.ts
customer-model.ts
Syntax: ng generate <blueprint> <options> Use the --dry-run option to practice

19. When it’s Time to Build
ng build
Development build
Output to /dist folder, by default (see .angular-cli.json)
ng build --prod
Minified, optimized, and cache busting

20. Comparing Dev and Prod Build Targets
ng build
ng build --prod
Environment
environment.ts
environment.prod.ts
Cache-busting
only images referenced in css
all build files
Source maps
generated
not generated
Extracted CSS
global CSS output to .js
yes, to css file(s)
Uglification no
yes
Tree-Shaking no
yes
AOT no
yes
Bundling
yes
yes

21. Analyze and Optimize https://www.npmjs.com/package/source-map-explorer
ng build --prod --build-optimizer -sm
Optimized build with source maps
source-map-explorer dist/main.xxx.js
Analyze the source

22. Keep Our Apps Safe

23. 9/17/2018 4:52 AM
Casterly Rock
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

24. Casterly Rock
9/17/2018 4:52 AM
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

25. Casterly Rock
9/17/2018 4:52 AM
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

26. Casterly Rock “an impregnable fortress” 9/17/2018 4:52 AM
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

27. Casterly Rock
9/17/2018 4:52 AM ?!
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

28. Casterly Rock
9/17/2018 4:52 AM
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

29. Deter your enemies

30. Defending against…

31. Defending against…
Infantry

32. Defending against…
Infantry
Arrows

33. Defending against…
Infantry
Arrows
Mortars

34. O W A S P

35. O
pen W eb A
pplication
owasp.org S
ecurity P
roject

36. Control Access to Our Apps

37. permissions for the request
9/17/2018 4:52 AM
Authenticatio n
Authorization
You are who you
say you are
You have the required
permissions for the request
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

38. permissions for the request
Authenticatio n
Authorization
You are who you
say you are
You have the required
permissions for the request

39. permissions for the request
Authenticatio n
Authorization
You are who you
say you are
You have the required
permissions for the request

40. permissions for the request
Authenticatio n
Authorization
You are who you
say you are
You have the required
permissions for the request

41. permissions for the request
Authenticatio n
Authorization
You are who you
say you are
You have the required
permissions for the request

42. Browser http://localhost:3001 Server http://localhost:3001 id=1
9/17/2018 4:52 AM
Browser
Server
id=1
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

43. Browser http://localhost:3001 Login Server http://localhost:3001 id=1
9/17/2018 4:52 AM
Browser
Login
Server
id=1
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

44. Browser http://localhost:3001 Server http://localhost:3001 id=1
9/17/2018 4:52 AM
Browser
id=1
Server
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

45. Browser http://localhost:3001 Create Server http://localhost:3001
9/17/2018 4:52 AM
Browser
Cookie s
Create
id=1
Server
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

46. Browser http://localhost:3001 Create Hero: Luke Server
9/17/2018 4:52 AM
Browser
Cookie s
Create
id=1
id=1
Hero: Luke
Server
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

47. http://passportjs.org 9/17/2018 4:52 AM
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

48. Faking Requests

49. Browser http://localhost:3001 Server http://localhost:3001 Cookie s
9/17/2018 4:52 AM
Browser
Cookie s
id=1
id=1
Server
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

50. Browser http://localhost:3001 Create Hero: Luke Server
9/17/2018 4:52 AM
Browser
Cookie s
Create
id=1
id=1
Hero: Luke
Server
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

51. Browser http://localhost:3001 http://clickbaity.co Server
9/17/2018 4:52 AM
Browser
Cookie s
id=1
Server
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

52. Browser http://localhost:3001 http://attacker.com Attack
9/17/2018 4:52 AM
Browser
Cookie s
Attack
localhost:3001
id=1
id=1
Hero: Darth
Server
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

53. Cross-site Request Forgery (CSRF, XSRF)

54. Cross-site Request Forgery

55. HTTP Headers

56. https://helmetjs.github.io/
9/17/2018 4:52 AM
Clickjacking
Cross-site Scripting (XSS)
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

60. Security Authentication/Authorization CSRF Security Headers
Cultural Ambassador
Compliance

61. Deployment

62. Build and deploy with consistency and confidence

63. Copy it all to the dist folder
Deploying the Web App
Install dependencies
Build Angular assets
Build express server
Copy it all to the dist folder
Do the versions of Node match, both locally and in the cloud?

64. Containerize with Docker
Build the image
Tag it
Push it to Azure
docker-compose up –d
docker tag myimage myreg.azurecr.io/papa/myimage
docker push myreg.azurecr.io/papa/myimage
Push the Docker image to the Azure Container Registry

65. Summary

66. Summary Angular CLI VS Code (Extensions and Debugging) passport (Auth)
csurf (CSRF)
helmet (security headers)
SSL/HTTPS
Docker and VSTS (CI)
Summary
Cultural Ambassador
Compliance

67. Resources https://aka.ms/ng-cosmosdb https://aka.ms/ng-essentials
GitHub (develop branch)
Extension: Angular Essentials
Extension: Docker
Extension: Azure CLI

68. Related Great Sessions
9/17/2018 4:52 AM
Related Great Sessions
Get typed with TypeScript (BRK3196)
Continuous delivery with Visual Studio Team Services (THR2146)
Visual Studio Code: The most useful (and underused) tips and tricks (BRK3394)
Globally distributed, secure MongoDB with Azure Cosmos DB (BRK3110)
© Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

69. Please evaluate this session
Tech Ready 15
9/17/2018
Please evaluate this session
From your
Please expand notes window at bottom of slide and read. Then Delete this text box.
PC or tablet: visit MyIgnite
Phone: download and use the Microsoft Ignite mobile app
Your input is important!
© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.