Securing Angular Apps Brian Noyes CTO & Co-founder, Solliance Inc (www.solliance.net) brian.noyes@solliance.net, @briannoyes

Visual Studio Connections About Brian Noyes CTO and Co-founder, Solliance www.solliance.net Microsoft Regional Director Microsoft MVP Pluralsight author www.pluralsight.com Web API Insider, Windows Azure Insider, Window Store App Insider, C#/VB Insider t e brian.noyes@solliance.net @briannoyes http://briannoyes.net Updates will be available at http://www.devconnections.com/updates/LasVegas_Fall08/VS

Agenda Security in the SPA Architecture Authentication options Securing SPA pages Securing Web API calls Dealing with CORS Protecting against CSRF Client security context

What does it mean to “secure”? More than just “logging in” Authentication Authorization Transport protection Cross Origin Resource Sharing (CORS) Cross Site Request Forgery (CSRF/XSRF) Cross Site Scripting (XSS) User and access control management

Single Page App Architecture Single Page Application Presentation (HTML/CSS) UI Logic (JavaScript) Data/Service Access – Client Services (JS) Server Web Service Web Service UI Rendering Database

Securing SPA Pages Leverage server page rendering security Block return of root SPA page Block return of HTML fragments and/or JavaScript Only really makes sense if the structure or static content of your pages are sensitive Most content in a SPA delivered as “data” via Web API calls

Securing Web API Calls Need to decide on authentication mechanism No automatic redirects to login page for service calls – must present valid authorization token Cookie or Authorization header Set up depends on your back end technology Up to server to allow the calls or not Validates the token or cookie based on shared secret trust relationship with the Authorization Server Might supplement the Authorization Server claims with more fine grained app specific claims

Authentication Options Windows authentication Basic authentication Cookie-based authentication with host site Token-based authentication (STS)

Protecting against CSRF Cross Site Request Forgery Important concern with SPAs due to prevalence of Web API calls Only relevant when using cookie authentication with AJAX calls Browser automatically sends cookie based on host address for request, even from other tabs ASP.NET MVC has built in support Layer on a two-factor protocol for validating request Web APIs require manual means Can mimic what MVC does Using Bearer tokens for authorization helps to avoid

Token Authentication Options .NET Backend ASP.NET Identity IdentityServer NodeJS Backend Passport, etc. Commercial option Auth0 Each of the above can act as an “Authorization Server” or Security Token Service (STS) for one or more apps

Token-based Redirect Browser 3 4 1 6 2 Login Page POST Credentials 4 Set JSON Cookie 7 1 6 {…} 2 OIDC Authentication Request JWT Authenticate Issue Claims Web Site DB STS 5 OpenID Connect (OIDC) Authentication Request

OAuth2 Implicit Flow SPA 6 App 2 3 5 1 7 OAuth2 Implicit Flow Java {…} Java Script 2 Login Page POST Credentials 3 5 OAuth2 Implicit Flow 1 {…} 7 JWT {…} DB Web API STS Authenticate Issue Claims 4 OAuth2 Implicit Flow

Dealing with CORS Cross Origin Resource Sharing Web APIs on a different host than pages rendered from Built in to all modern browsers Simple CORS GET/POST, form encoded, no additional header Sends Origin header in request, expects Access-Control-Allow-Origin in response Most CORS Sends “preflight” OPTIONS request specifying what is being requested (Verb, headers, cookies,etc) Destination server decides who gets in Have to populate appropriate headers in your $http service calls Automatic with Angular $http service with right configuration

Client Security Context Client may collect credentials to send to authentication server for validation Resource owner password flow Discouraged in OAuth2 spec Can track success or failure of login process Can obtain claims from returned tokens Can request server authorization roles/claims Should only be used to drive client UX – not treated as “securing the app” Hide/show navigation links Enable features

Protecting Against XSS Script injection through input controls Angular protection: ngSanitize

Resources ASP.NET Identity: http://www.asp.net/identity brian.noyes@solliance.net @briannoyes http://briannoyes.net ASP.NET Identity: http://www.asp.net/identity ASP.NET SPA Template: http://blogs.msdn.com/b/webdev/archive/2013/09/20/understanding-security-features-in-spa-template.aspx IdentityServer: https://github.com/IdentityServer/Thinktecture.IdentityServer3 Pluralsight courses: Web API v2 Security: http://www.pluralsight.com/courses/webapi-v2-security Securing JavaScript Applications: http://www.pluralsight.com/courses/angularjs-security-fundamentals

Please use Event Board to fill out a session evaluation. Questions? Please use Event Board to fill out a session evaluation. Thank you!