![Page 1: Securing Angular Apps Brian Noyes CTO & Co-founder, Solliance Inc () brian.noyes@solliance.netbrian.noyes@solliance.net,](https://reader036.vdocuments.net/reader036/viewer/2022082411/5697c01f1a28abf838cd1677/html5/thumbnails/1.jpg)
Securing Angular AppsBrian Noyes
CTO & Co-founder, Solliance Inc (www.solliance.net)
[email protected], @briannoyes
![Page 2: Securing Angular Apps Brian Noyes CTO & Co-founder, Solliance Inc () brian.noyes@solliance.netbrian.noyes@solliance.net,](https://reader036.vdocuments.net/reader036/viewer/2022082411/5697c01f1a28abf838cd1677/html5/thumbnails/2.jpg)
About Brian Noyes
CTO and Co-founder, Solliancewww.solliance.net
Microsoft Regional Director
Microsoft MVP
Pluralsight authorwww.pluralsight.com
@briannoyes
http://briannoyes.net
Web API Insider, Windows Azure Insider,Window Store App Insider, C#/VB Insider
![Page 3: Securing Angular Apps Brian Noyes CTO & Co-founder, Solliance Inc () brian.noyes@solliance.netbrian.noyes@solliance.net,](https://reader036.vdocuments.net/reader036/viewer/2022082411/5697c01f1a28abf838cd1677/html5/thumbnails/3.jpg)
Agenda
Security in the SPA Architecture Authentication options Securing SPA pages Securing Web API calls Dealing with CORS Protecting against CSRF Client security context
![Page 4: Securing Angular Apps Brian Noyes CTO & Co-founder, Solliance Inc () brian.noyes@solliance.netbrian.noyes@solliance.net,](https://reader036.vdocuments.net/reader036/viewer/2022082411/5697c01f1a28abf838cd1677/html5/thumbnails/4.jpg)
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
![Page 5: Securing Angular Apps Brian Noyes CTO & Co-founder, Solliance Inc () brian.noyes@solliance.netbrian.noyes@solliance.net,](https://reader036.vdocuments.net/reader036/viewer/2022082411/5697c01f1a28abf838cd1677/html5/thumbnails/5.jpg)
Server
Single Page Application
Presentation (HTML/CSS)
Database
Web Service
UI Logic (JavaScript)
Data/Service Access – Client Services (JS)
Web Service
Single Page App Architecture
UI Rendering
![Page 6: Securing Angular Apps Brian Noyes CTO & Co-founder, Solliance Inc () brian.noyes@solliance.netbrian.noyes@solliance.net,](https://reader036.vdocuments.net/reader036/viewer/2022082411/5697c01f1a28abf838cd1677/html5/thumbnails/6.jpg)
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
![Page 7: Securing Angular Apps Brian Noyes CTO & Co-founder, Solliance Inc () brian.noyes@solliance.netbrian.noyes@solliance.net,](https://reader036.vdocuments.net/reader036/viewer/2022082411/5697c01f1a28abf838cd1677/html5/thumbnails/7.jpg)
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
![Page 8: Securing Angular Apps Brian Noyes CTO & Co-founder, Solliance Inc () brian.noyes@solliance.netbrian.noyes@solliance.net,](https://reader036.vdocuments.net/reader036/viewer/2022082411/5697c01f1a28abf838cd1677/html5/thumbnails/8.jpg)
Authentication Options
Windows authentication Basic authentication Cookie-based authentication with host site Token-based authentication (STS)
![Page 9: Securing Angular Apps Brian Noyes CTO & Co-founder, Solliance Inc () brian.noyes@solliance.netbrian.noyes@solliance.net,](https://reader036.vdocuments.net/reader036/viewer/2022082411/5697c01f1a28abf838cd1677/html5/thumbnails/9.jpg)
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
![Page 10: Securing Angular Apps Brian Noyes CTO & Co-founder, Solliance Inc () brian.noyes@solliance.netbrian.noyes@solliance.net,](https://reader036.vdocuments.net/reader036/viewer/2022082411/5697c01f1a28abf838cd1677/html5/thumbnails/10.jpg)
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
![Page 11: Securing Angular Apps Brian Noyes CTO & Co-founder, Solliance Inc () brian.noyes@solliance.netbrian.noyes@solliance.net,](https://reader036.vdocuments.net/reader036/viewer/2022082411/5697c01f1a28abf838cd1677/html5/thumbnails/11.jpg)
Token-based Redirect
Browser
1 2 7OIDC
AuthenticationRequest
4
3
POSTCredentials
SetJSON
Cookie
6
Web SiteSTS
AuthenticateIssue Claims
5
LoginPage
JWT
OpenID Connect (OIDC) Authentication Request
DB
{…}
![Page 12: Securing Angular Apps Brian Noyes CTO & Co-founder, Solliance Inc () brian.noyes@solliance.netbrian.noyes@solliance.net,](https://reader036.vdocuments.net/reader036/viewer/2022082411/5697c01f1a28abf838cd1677/html5/thumbnails/12.jpg)
OAuth2 Implicit Flow
SPAApp
1 OAuth2Implicit Flow
3
2
POSTCredentials
STS AuthenticateIssue Claims4
LoginPage
JWT
DB
JavaScript
5
Web API
6
7 {…}
{…}
{…}
![Page 13: Securing Angular Apps Brian Noyes CTO & Co-founder, Solliance Inc () brian.noyes@solliance.netbrian.noyes@solliance.net,](https://reader036.vdocuments.net/reader036/viewer/2022082411/5697c01f1a28abf838cd1677/html5/thumbnails/13.jpg)
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
![Page 14: Securing Angular Apps Brian Noyes CTO & Co-founder, Solliance Inc () brian.noyes@solliance.netbrian.noyes@solliance.net,](https://reader036.vdocuments.net/reader036/viewer/2022082411/5697c01f1a28abf838cd1677/html5/thumbnails/14.jpg)
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
![Page 15: Securing Angular Apps Brian Noyes CTO & Co-founder, Solliance Inc () brian.noyes@solliance.netbrian.noyes@solliance.net,](https://reader036.vdocuments.net/reader036/viewer/2022082411/5697c01f1a28abf838cd1677/html5/thumbnails/15.jpg)
Protecting Against XSS
Script injection through input controls Angular protection:
ngSanitize
![Page 16: Securing Angular Apps Brian Noyes CTO & Co-founder, Solliance Inc () brian.noyes@solliance.netbrian.noyes@solliance.net,](https://reader036.vdocuments.net/reader036/viewer/2022082411/5697c01f1a28abf838cd1677/html5/thumbnails/16.jpg)
Resources
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
@briannoyes
http://briannoyes.net
![Page 17: Securing Angular Apps Brian Noyes CTO & Co-founder, Solliance Inc () brian.noyes@solliance.netbrian.noyes@solliance.net,](https://reader036.vdocuments.net/reader036/viewer/2022082411/5697c01f1a28abf838cd1677/html5/thumbnails/17.jpg)
© Brian Noyes. All rights reserved.
Please use Event Board to fill out a session evaluation.
Questions?
Thank you!