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.

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

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

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

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

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

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

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

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

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.

Create, build, test and run with consistency

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

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

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

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

Installing the Angular CLI npm install –g @angular/cli Installed globally with npm

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

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

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

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

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 https://www.npmjs.com/package/source-map-explorer

Keep Our Apps Safe

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.

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.

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.

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.

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.

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.

Deter your enemies

Defending against…

Defending against… Infantry

Defending against… Infantry Arrows

Defending against… Infantry Arrows Mortars

O W A S P

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

Control Access to Our Apps

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.

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

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

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

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

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

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

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

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

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

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.

Faking Requests

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

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

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

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

Cross-site Request Forgery (CSRF, XSRF)

Cross-site Request Forgery https://github.com/expressjs/csurf

HTTP Headers

https://helmetjs.github.io/ 9/17/2018 4:52 AM https://helmetjs.github.io/ 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.

Security Authentication/Authorization CSRF Security Headers Cultural Ambassador Compliance

Deployment

Build and deploy with consistency and confidence

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?

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

Summary

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

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

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.

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 https://myignite.microsoft.com/evaluations Phone: download and use the Microsoft Ignite mobile app https://aka.ms/ignite.mobileapp 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.