CB
Uploaded byCarlo Bonamico
48,368 views

AngularJS Security: defend your Single Page Application

The document summarizes Carlo Bonamico's presentation on securing AngularJS single page applications. The presentation discusses how authentication and security risks change in SPAs compared to traditional web apps, focusing on cross-site scripting and security misconfiguration. It also covers approaches to authentication in SPAs using token-based authentication with JSON Web Tokens instead of traditional session management with cookies.

Embed presentation

Downloaded 1,026 times
@carlobonamico#angularconf15 ANGULARJS SECURITY: defend your Single Page Application Carlo Bonamico @carlobonamico carlo.bonamico@nispro.it http://www.nispro.it Turin, 22/10/2015
@carlobonamico#angularconf15 About me Speaker Bio – passionate software developer since the C128 era – PhD and research at the University of Genova / CNIT National TLC Research Consortium – exciting time at startup Eptamedia – now a Solution Architect and Senior Trainer at NIS s.r.l.  between Italy and new London office Current projects & interests – training/mentoring teams on AngularJS, Web Security, Continuous Integration & Delivery – creating component-based Angular applications – security reviews and assessments
@carlobonamico#angularconf15 Abstract Securing an html5 Single Page Application is not the same as protecting a typical JEE/Rails/PHP/.NET webapp. The industry-wide move towards HTML5 and Single Page Applications, motivated by the opportunity for more sophisticated interaction and UX, is again upsetting the balance between Hackers and Developers. A wave of new-generation front-end technologies, including Angularjs, is attracting Developers with their combination of productivity and innovative UX, but at the same time opens the door to new vulnerabilities and security challenges. This talk will summarize the main principles of Secure Coding, and will discuss their application to a typical angular HTML5 application with REST backend to prevent major risks (including OWASP Top Ten). A concrete example will demonstrate the use of tools and libraries, from RBAC to JWT, from Spring Security to AngularJS directives for implementing secure HTML5/JS apps.
@carlobonamico#angularconf15 Evolution of Application Security When I taught my first Web Application Security training – most participants had never heard of SQL Injection and XSS Thanks to many industry and community players (especially OWASP), – not to mention many high-profile incidents, things have started to change... Application Security Ensuring Application guarantees •Confidentiality •Integrity •Availability •Accountability of the Information it processes
@carlobonamico#angularconf15 Are we doing better? It's 2015... we were promised flying cars... and what we got is... See also – http://www.cvedetails.com/vulnerabilities-by-types.php – https://www.whitehatsec.com/resource/stats.html
@carlobonamico#angularconf15 HTML5 Single Page Applications Somewhat ill-defined term, but you know what I mean – HTML templates, statically served – client retrieves data from REST services / websockets – views dynamically rendered on the client side Definitely more powerful, interactive and mobile-friendly that traditional request-response webapps also more secure?
@carlobonamico#angularconf15 First problem Spiderman's Uncle Ben version: With great power comes great responsibility... The Web Application Security version: With great power come more holes and greater risks! – increased Surface of Attack  Websockets, storage, apis... – https://html5sec.org/ – http://html5security.org/ – and once you penetrate the browser, you can do basically everything  and I mean it: calling APIs, install keyloggers, redirect user behaviour, capture private data –http://xenotix.in/  “most attack were already possible... but they are more powerful now” http://w3af.org/understanding-html5-security
@carlobonamico#angularconf15 Second problem We are undergoing a wide architectural shift from To So many security assumptions do not hold true anymore! ServerPOST params HTML Browser Form-based input HTML rendering HTML templating Controllers, Interaction Logic Business Logic Server POST JSON JSON Browser HTML rendering HTML templating Business Logic Interaction Logic REST endpoints
@carlobonamico#angularconf15 The good side The typical modern HTML5 application architecture has a single/main advantage: it forces at the very least a basic degree of separation between UI and business logic – even more so with Angular, Ember, React In our consulting/project/problem solving experience, the single biggest cause of – quality – performance – security problems is....
@carlobonamico#angularconf15 The good side The typical modern HTML5 application architecture has a single/main advantage: it forces at the very least a basic degree of separation between UI and business logic – even more so with Angular, Ember, React In our consulting/project/problem solving experience, the single biggest cause of – quality – performance – security problems is.... the mixing & coupling of UI and business logic
@carlobonamico#angularconf15 There's hope... If we properly understand the new architectural paradigm, we can turn it into an advantage Follow the principles of secure coding – Do not trust inputs – Minimize attack surface area (and window of opportunity) – Establish secure defaults – Principle of Least privilege – Principle of Defense in depth – Fail securely – Don’t trust services – Separation of duties (vs configuration) – Avoid security by obscurity – Keep security simple – Fix security issues correctly
@carlobonamico#angularconf15 Top Ten Web Application Risks – A1-Injection – A2-Broken Authentication and Session Management – A3-Cross-Site Scripting (XSS) – A4-Insecure Direct Object References – A5-Security Misconfiguration – A6-Sensitive Data Exposure – A7-Missing Function Level Access Control – A8-Cross-Site Request Forgery (CSRF) – A9-Using Components with Known Vulnerabilities – A10-Unvalidated Redirects and Forwards What's different between Request/Response apps and HTML5/SPAs?
@carlobonamico#angularconf15 What changes with HTML5/SPAs? RED → more critical ORANGE → different solution GREEN → easier – A1-Injection → same problem, same solution – A2-Broken Authentication and Session Management – A3-Cross-Site Scripting (XSS) – A4-Insecure Direct Object References – A5-Security Misconfiguration – A6-Sensitive Data Exposure – A7-Missing Function Level Access Control – A8-Cross-Site Request Forgery (CSRF) – A9-Using Components with Known Vulnerabilities – A10-Unvalidated Redirects and Forwards
@carlobonamico#angularconf15 What changes with HTML5/SPAs? RED → more critical ORANGE → different solution GREEN → easier – A1-Injection → same problem, same solution – A2-Broken Authentication and Session Management – A3-Cross-Site Scripting (XSS) – A4-Insecure Direct Object References – A5-Security Misconfiguration – A6-Sensitive Data Exposure – A7-Missing Function Level Access Control – A8-Cross-Site Request Forgery (CSRF) – A9-Using Components with Known Vulnerabilities – A10-Unvalidated Redirects and Forwards Today, we will focus on those!
@carlobonamico#angularconf15 A3-Cross-Site Scripting (XSS)
@carlobonamico#angularconf15 A3 - XSS Cross-Site-Scripting means that attacker can insert custom js code which is then displayed in the user browser – stored (input js in a field → DB → sent back to the page) – reflected (input js in the url, send the url to a user, js executed) – DOM-based (input triggers js logic that manipulates the DOM and insert custom js) Remember: any external input is UNTRUSTED! – so we must avoid mixing user input with js code
@carlobonamico#angularconf15 A3 – Preventing XSS Looks easy: but HTML allows for multiple mixed execution contexts: – JS within CSS within HTML within a frame of another HTML … The proper solution is ESCAPING: encoding the data so that the browser properly interprets it as plain text (and not js) – https://www.owasp.org/index.php/XSS_(Cross_Site_Scripting)_Prevention_Che at_Sheet In a well designed SPA, – clear inputs paths  REST service responses, user inputs, url bar, ... – HTML generation through the framework templating engine – so it is easier to intercept and escape outputs
@carlobonamico#angularconf15 A3 – Preventing XSS with Angular Since 1.3, the HTML compiler will escape all {{}} & ng­bind by default – https://www.ng-book.com/p/Security – http://java.dzone.com/articles/angularjs-how-handle-xss Be careful if you must include user-generated HTML (e.g. in rich text editors) – take advantage of the services and directives – ng­bind­html (from angular-sanitize)  print as is removing “script” tags (beware of img tags)  fully customizable with –$sceProvider & $SanitizeProvider – https://docs.angularjs.org/guide/security Please note: – escaping in the REST services is not always feasible/useful – they can be consumed by mobile Apps and other clients
@carlobonamico#angularconf15 Remember Most vulnerabilities are not so serious by themselves – but became terrible if mixed  think Pepsi + Mentos XSS is an enabler for – phishing – browser-based MITM – session / auth token stealing – sensitive data extraction – img courtesy of http://www.delawaretoday.com/
@carlobonamico#angularconf15 A5-Security Misconfiguration
@carlobonamico#angularconf15 A5 – Security misconfiguration A single MITM (Man in the Middle) and your “done” – as the attacker can put arbitrary code in your browser – so,  https://www.eff.org/Https-everywhere Be careful with CORS – Avoid Allow­Origin “*” unless you have very strong authentication and authorization Remember to tell the browser to enable stronger protection – typically through headers such as CSP – https://www.owasp.org/index.php/List_of_useful_HTTP_headers
@carlobonamico#angularconf15 Securing Headers Node – https://www.npmjs.com/package/helmet Java (Spring Security) – http://docs.spring.io/autorepo/docs/spring-security/current/reference/html/headers. html Test tools – security headers online  https://securityheaders.com/ – OWASP ZAP  https://www.owasp.org/index.php/OWASP_Zed_Attack_Proxy_Project
@carlobonamico#angularconf15 A2-Broken Authentication & Session Management
@carlobonamico#angularconf15 What is Authentication Verifying the user identity – independently from his profile / authorizations Several elements: – where valid users are listed (Realm)  internal, file, DB, LDAP, Active Directory, SSO Server – what info is used to establish user identity  one or more “factors”: username, password, OTP, certificate... – how identity is checked the first time  login → credentials validation – how identity is checked on subsequent requests  validation
@carlobonamico#angularconf15 Traditional Request-Response Applications e.g. JSP / ASP / PHP – login page – successful login creates a session – protected pages accessed within the session – data and access control filtered on the server side  often within views or controllers Browser Server POST Login Data GET secured page SESSIONID = 5 SESSIONID = 5 auth = true? crede ntials valid? Realm filtered HTML page SID AUTH DATA 5 true carlo,admi n
@carlobonamico#angularconf15 Issues with Cookie + Session Authentication Authentication requires – checking credentials against a realm – keeping auth in session state on the server – sessionid sent in a cookie Issues – state replication in clustered servers vs sticky sessions  Single-Sign-On across servers? – More complex scenarios are possible  e.g. SSO Server, like CAS – typically cookie based → all server must be in same domain Remember: Cookies are sent with ANY request to the same domain (including images)
@carlobonamico#angularconf15 Cookie-based authentication in Single Page Applications Can't SPA just do the same? – login form POSTs to login service – successful login creates a session and sets a cookie – protected Pages & REST services accessed within the session  data and access control filtered … where ? Browser Server POST Login Data GET secured JSON SESSIONID = 5 SID AUTH DATA 5 true carlo,admi nSESSIONID = 5 auth = true?{ ... } crede ntials valid? Realm
@carlobonamico#angularconf15 Authentication vs Session Management Cookie-based sessions are simple to implement But – not suited to stateless nature of REST services Authentication vs Sessions – They are two different things, although often used together – REST services tend to be stateless Unauthenticated Authenticated Stateless Plain HTTP e.g. Wikipedia REST e.g. Google APIs With Session Session cookies e.g. Amazon JSP/ASP/PHP e.g. Intranet Apps
@carlobonamico#angularconf15 How to do stateless authentication?
@carlobonamico#angularconf15 Token-based Authentication Login establishes a valid token – each request must be presented with the token – the server can check token validity at each request – https://auth0.com/blog/2014/01/07/angularjs-authentication-with- cookies-vs-token/ Browser Server POST Login Data GET secured JSON TOKEN = 5 TOKEN = 5 token valid? crede ntials valid? Realm no session!
@carlobonamico#angularconf15 Issues Given a token – how do you know which is the current user? On the server – how expensive it is to check the token at each request? Can you share a token across services? – can you validate it without connecting to a DB / SSO Server?
@carlobonamico#angularconf15 How do you create & validate Tokens?
@carlobonamico#angularconf15 Creating and Validating Tokens Simplest way: checking them against a list of valid tokens – in memory → similar to session-based auth  replication problems – on a DB  easier clustering, must consider performance – on an external server  SSO for free, must evaluate performance & complexity
@carlobonamico#angularconf15 JWT - http://jwt.io JWT = encoded & signed Json object containing – Access token – Claims (custom: session, domain, username...) – Expiration – and Digital Signature! → verifiable with just the public key Returned by login REST service Sent as header at each request –Authentication: bearer eyJhbGciO                   .eyJzdWIiOWV9.eoaDV Checked by REST backed at each request – can also be used with websockets { “user”:”carlo”, “domain”:”NIS”, “expiry”: .. }
@carlobonamico#angularconf15 JWT in angular Angular Library – https://github.com/auth0/angular-jwt Extensible hooks for – storing and retrieving tokens on the client Interceptors for – retrieving tokens from server Response Headers – optionally refresh tokens – automatically sending tokens at each request Robust and simple to use bower install angular­jwt
@carlobonamico#angularconf15 Token-based Auth in AngularJs Ingredients REST endpoints – /auth/login  Input parameters: credentials  Response: token – /auth/logout  Input parameters: token $http or $resource based Client Service AuthenticationService – login() logout() methods wrapping the above – plus isAuthenticated() and possibly currentUser()
@carlobonamico#angularconf15 Token-based Auth in AngularJs Ingredients – Controller(s) – LoginController  bound to Login form, calls service – LogoutController – AuthenticationController  IsAuthenticated, currentUser Possibly, Directives <authenticated­user>  showWhenAuthenticated <menu showWhenAuthenticated=”true”>
@carlobonamico#angularconf15 Saving the token In both cases, register a then() on the promise $http(...).then(function(response) {    currentToken.jwt =            response.data.access_token;  } Store the token locally If you need, parse it tokenPayload = jwtHelper.decodeToken(jwt); date = jwtHelper.getTokenExpirationDate(jwt); bool = jwtHelper.isTokenExpired(jwt);     
@carlobonamico#angularconf15 Sending the token at each request Specify Token retrieval function angular.module('myApp')  .config(      function  Config($httpProvider,jwtInterceptorProvider) {      jwtInterceptorProvider.tokenGetter =     ['currentToken',   function(currentToken) { return currentToken.jwt;     //or return localStorage.getItem('id_token'); }]; Register interceptor   $httpProvider.interceptors.push('jwtInterceptor'); });
@carlobonamico#angularconf15 Back-end Login endpoint – validates credentials – generates JWT REST Service endpoints (or better interceptor) – extract Token from Authentication: header – validate it – proceed with request processing  or return error 401 Full example – http://thejackalofjavascript.com/architecting-a-restful-node-js-app/
@carlobonamico#angularconf15 JWT in... Plain Node: Auth0 library – https://github.com/auth0/node-jsonwebtoken Express: Express JWT – https://github.com/auth0/express-jwt Passport - Modular Auth Framework for node.js – http://passportjs.org/ .NET - OWIN.Identity – http://bitoftech.net/2014/10/27/json-web-token-asp-net-web-api-2- jwt-owin-authorization-server/ Java - Spring Security – https://spring.io/guides/tutorials/spring-security-and-angular- js/Integrating OAUTH with JWT
@carlobonamico#angularconf15 Were can we store / send the token? in a cookie? in a header?
@carlobonamico#angularconf15 Sending Tokens - Cookies vs Headers Cookies Pros – sent automatically – no code required on the client Cons – sent automatically – even when do not want  e.g. <IMG src= in email – less control on validity – stored on client disk Headers Pros – sent only explicitely – not stored on disk – unless you want to – more control – also prevents CSRF Cons – require code on the client side – but this is normal in SPAs https://auth0.com/blog/2014/01/27/ ten-things-you-should-know-about- tokens-and-cookies/
@carlobonamico#angularconf15 Token Storage vs Session Duration In memory or sessionStorage – works only on current tab – automatically closed In localStorage – persistent – work across multiple tabs – requires explicit expiration https://stormpath.com/blog/where-to-store-your-jwts-cookies-vs- html5-web-storage/
@carlobonamico#angularconf15 What else would we need? what happens when the user is not logged in? how to improve usability?
@carlobonamico#angularconf15 Routing support for Authentication & Authorization Need to configure Routing for – redirect to login if not authenticated – redirect to login if token expired – optionally, redirect back to original URL – redirect to error page if route not authorized in the current profile Difficult to do in the default ngRoute – Possible in ui-router Way easier in angular-new-router – https://medium.com/angularjs-meetup-south-london/angular-ng- conf-2015-media-25dbe6250154
@carlobonamico#angularconf15 A7-Missing Function Level Access Control
@carlobonamico#angularconf15 Typical Server side application Authorization is verified – in controllers if (user.hasRole(“admin”) == true) – through filters / interceptors – in views <hasRole role=”admin”> or <if (...)> confidential info </hasRole> Client Browser only receives content it has rights to – (roughly) works even if security checks are “spaghetti code” in the JSP/ASP/PHP templates
@carlobonamico#angularconf15 And in a SPA? Would this be secure? In users-view.html <button ng­if=”authCtrl.isAdmin”          ng­click=”userCtrl.deleteUser()”> or this? <section ng­if=”authCtrl.isAdmin” > {{userCtrl.user.confidentialData}} </section>
@carlobonamico#angularconf15 No! Just press F12 and modify the HTML / JS or even the DOM in the developer tools or just send HTTP requests directly to the backend
@carlobonamico#angularconf15 Security is up to the server Even in SPAs, Authorization is still up to the server: Security controls – checking authentication state – checking profile and inferring permissions – enabling privileged actions – filtering confidential data MUST be performed on the server – in the REST / websocket endpoints – locally in each service, or via filters/interceptors Also, the same rule applies to input validation
@carlobonamico#angularconf15 Usability is up to the client But letting the user click on the button, invoking the service, and only then displaying an error is not user friendly UX is up to the client – Front-End should have enough info to disable/hide the button  if the user is not authorized to click it  retrieve the permissions list from a REST service at logon E.g. Permission check directives for Angular <button ng­click=”postCtrl.delete()”  has­permission=”deletePost”> permissions for Role-Based Access Control
@carlobonamico#angularconf15 Server-side authorization checks So, in each server endpoint, you should check – valid authentication – valid authorization profile which includes privileges for the currently requested action / data Example Blog application if (subject.hasRole(“admin”)) //enable delete post if (subject.hasRole(“editor”)) //enable modification of post else //only read data What are the problems with this code?
@carlobonamico#angularconf15 What if the rules change? What if an auditor asks about what an “editor” can do? Real-world cases tend to be more complex!
@carlobonamico#angularconf15 Role Based Access Control Separating Role definition from Permission check – In each service / action, code checks that the user has the relevant permission if (subject.hasPermission(“deletePost”)) – Role Definition lists all the permissions  e.g. –Admin   detelePost, updatePost, readPost→ –anonymous   readPost→ Authorization system maps user/groups to list of roles – and computes the “merged” set of permissions active for the valid user  user is both Admin & Editor  Permissions are –changeSettings, deleteUser, addUser, deletePost,  modifyPost 
@carlobonamico#angularconf15 Hierarchical permission system 2-level: User → Role → Permissions 3-level: User → Groups → Roles → Permissions Wildcard Permissions – blog:deletePost – blog:readPost – blog:* means both  blog:readPost:12 → entity level permission  blog:readPost:* on all entities see Apache Shiro
@carlobonamico#angularconf15 Advantages Permission check is – focused, readable – easy to implement – easy to test – rarely changes Role definition is – centralized – easy to review – easy to change – as it tends to change often Secure Design Principle all parts of the system need to perform security checks but security check implementation should be centralized and not “spread” in the system
@carlobonamico#angularconf15 RBAC in a Single Page Application Server-side Ingredients: – Profile definition mapping Roles to Permissions  static file  db table  possibly cached  Identity server (e.g. OpenAM) – API for checking permissions Normally, some of this information is cached to ensure minimal performance penalty
@carlobonamico#angularconf15 Usable Secure UI in AngularJS Ingredients: – /authorization/profile/current REST endpoint  returns a Json  current user roles  merged list of all active permissions On the Client – Client Service wrapping the above – Authorization/ProfileService storing the permission list  hasPermission(p) method Call the service from – Controller methods – Routing callbacks
@carlobonamico#angularconf15 A9-Using Components with Known Vulnerabilities
@carlobonamico#angularconf15 Component Security The code we write The code which actually runs in our application – libraries and components
@carlobonamico#angularconf15 Checking dependecies for vulns On the client side – http://retirejs.github.io/retire.js/ npm install ­g retire ; retire –path src – also available as ZAP & mvn plugin mvn com.h3xstream.retirejs:retirejs­maven­ plugin:scan On the server side – OWASP Dependency Check  https://github.com/jeremylong/DependencyCheck dependency­check.sh ­­app Testing ­­out . ­­scan  [path to jar files to be scanned] mvn org.owasp:dependency­check­maven
@YourTwitterHandle#DVXFR14{session hashtag} @carlobonamico#angularconf15 A f nal w ord ... But isn't all that unnecessary complexity slowing down development of my critical project?
@carlobonamico#angularconf15 A final word People tend to view Security as “overhead”, not adding value to the project The reality: – if you know what to pay attention to, minimal additional costs – also, in most cases, adding security just means following good design principles if you separate well concerns, adding security is easy – favor clarity of intent and code readability – favor composition over inheritance – test, test, test!  incorporate security checks in your tests This lets software adapt more easily to both requirements & security changes – easier to evolve incrementally & validating each step → see Continuous Delivery
@carlobonamico#angularconf15 References
@carlobonamico#angularconf15 References Owasp Secure Coding Principles – https://www.owasp.org/index.php/Secure_Coding_Principles OWASP Testing Guide – https://www.owasp.org/index.php/OWASP_Testing_Guide_v4_Table_ of_Contents SOLID Design Principles – http://butunclebob.com/ArticleS.UncleBob.PrinciplesOfOod
@carlobonamico#angularconf15 HTML5 Security Attack Vectors & Vulnerabilities – https://media.blackhat.com/bh-eu-12/shah/bh-eu-12-Shah_HTML5_ Top_10-WP.pdf OWASP Guidelines – https://www.owasp.org/index.php/HTML5_Security_Cheat_Sheet JS Frameworks Security – http://www.slideshare.net/x00mario/jsmvcomfg-to-sternly-look-at- javascript-mvc-and-templating-frameworks
@carlobonamico#angularconf15 Thank You for your attention Interested? – attend our Web Application Security / Angular trainings – engage us for Design/Code Reviews, Vulnerability Assessments & team mentoring Read more on – http://www.nispro.it – http://www.slideshare.net/carlo.bonamico Follow us on twitter – @nis_srl @carlobonamico  updates on Security, AngularJS, Continuous Delivery Contact me – carlo.bonamico@gmail.com / carlo.bonamico@nispro.it

More Related Content

PDF
HTML CSS Basics
byMai Moustafa
 
PPTX
Filtering jms messages with mule
byAnirban Sen Chowdhary
 
PPT
Cross Site Request Forgery
byTony Bibbs
 
PPTX
Web Development
byLena Petsenchuk
 
PPT
Cross site scripting (xss)
byManish Kumar
 
ODP
Mobile App Security Testing -2
byKrisshhna Daasaarii
 
PPTX
HTML Media
bykrupesh patel
 
PDF
Less vs sass
byAya Edamoto
 
HTML CSS Basics
byMai Moustafa
 
Filtering jms messages with mule
byAnirban Sen Chowdhary
 
Cross Site Request Forgery
byTony Bibbs
 
Web Development
byLena Petsenchuk
 
Cross site scripting (xss)
byManish Kumar
 
Mobile App Security Testing -2
byKrisshhna Daasaarii
 
HTML Media
bykrupesh patel
 
Less vs sass
byAya Edamoto
 

What's hot

PDF
HTML Head Section Elements
bySomesh Gulati
 
PPTX
Html
byRajThakuri
 
PDF
Responsive web design
byRuss Weakley
 
PDF
CSS3 Media Queries
byRuss Weakley
 
PDF
Html,javascript & css
byPredhin Sapru
 
PDF
CSS Font & Text style
byYaowaluck Promdee
 
PDF
Website Development Process
byHend Al-Khalifa
 
PPT
Introduction to Cascading Style Sheets (CSS)
byChris Poteet
 
DOCX
Javascript tutorial
byAbhishek Kesharwani
 
PPTX
Responsive web design ppt
byNAWAZ KHAN
 
PPTX
Basics of the Web Platform
bySanjeev Verma, PhD
 
PDF
CSS Flexbox and Grid Layouts
byAnantha kumar
 
PDF
Intro to HTML (Kid's Class at TIY)
byMarjorie Sample
 
PPTX
Web development Platform Constraints.pptx
byssuser2f6682
 
PDF
Introduction to CSS3
byDoris Chen
 
PPTX
presentation in html,css,javascript
byFaysalAhammed5
 
ODP
CSS Basics
bySanjeev Kumar
 
PDF
HTML Body Element
bySomesh Gulati
 
PDF
What Is a Cloud-first Headless CMS
byKentico Software
 
PPTX
Client side scripting using Javascript
byBansari Shah
 
HTML Head Section Elements
bySomesh Gulati
 
Html
byRajThakuri
 
Responsive web design
byRuss Weakley
 
CSS3 Media Queries
byRuss Weakley
 
Html,javascript & css
byPredhin Sapru
 
CSS Font & Text style
byYaowaluck Promdee
 
Website Development Process
byHend Al-Khalifa
 
Introduction to Cascading Style Sheets (CSS)
byChris Poteet
 
Javascript tutorial
byAbhishek Kesharwani
 
Responsive web design ppt
byNAWAZ KHAN
 
Basics of the Web Platform
bySanjeev Verma, PhD
 
CSS Flexbox and Grid Layouts
byAnantha kumar
 
Intro to HTML (Kid's Class at TIY)
byMarjorie Sample
 
Web development Platform Constraints.pptx
byssuser2f6682
 
Introduction to CSS3
byDoris Chen
 
presentation in html,css,javascript
byFaysalAhammed5
 
CSS Basics
bySanjeev Kumar
 
HTML Body Element
bySomesh Gulati
 
What Is a Cloud-first Headless CMS
byKentico Software
 
Client side scripting using Javascript
byBansari Shah
 

Similar to AngularJS Security: defend your Single Page Application

PDF
Web Application Security Reloaded for the HTML5 era
byCarlo Bonamico
 
PDF
So you thought you were safe using AngularJS.. Think again!
byLewis Ardern
 
PPTX
How Secure Is AngularJS?
byKsenia Peguero
 
PDF
OWASP London - So you thought you were safe using AngularJS.. Think again!
byLewis Ardern
 
PDF
AppSec Tel Aviv - OWASP Top 10 For JavaScript Developers
byLewis Ardern
 
PPTX
HTML5 - The Promise & The Peril
bySecurity Innovation
 
PPTX
Spa Secure Coding Guide
byGeoffrey Vandiest
 
PDF
Are you botching the security of your AngularJS applications? (DevFest 2016)
byPhilippe De Ryck
 
PDF
OWASP Portland - OWASP Top 10 For JavaScript Developers
byLewis Ardern
 
PPTX
Html5 security
byKrishna T
 
PDF
Securing your AngularJS Application
byPhilippe De Ryck
 
PPTX
Vulnerability Assessment Of Angular JS
byValency Networks
 
PPTX
W3 conf hill-html5-security-realities
byBrad Hill
 
PDF
ng-owasp: OWASP Top 10 for AngularJS Applications
byKevin Hakanson
 
PPTX
W3 conf hill-html5-security-realities
byBrad Hill
 
PDF
Reviewing AngularJS
byLewis Ardern
 
PPT
(In)Security Implication in the JS Universe
byStefano Di Paola
 
PDF
Webinar–OWASP Top 10 for JavaScript for Developers
bySynopsys Software Integrity Group
 
PPTX
ASP.NET security vulnerabilities
byAleksandar Bozinovski
 
PDF
An Abusive Relationship with AngularJS by Mario Heiderich - CODE BLUE 2015
byCODE BLUE
 
Web Application Security Reloaded for the HTML5 era
byCarlo Bonamico
 
So you thought you were safe using AngularJS.. Think again!
byLewis Ardern
 
How Secure Is AngularJS?
byKsenia Peguero
 
OWASP London - So you thought you were safe using AngularJS.. Think again!
byLewis Ardern
 
AppSec Tel Aviv - OWASP Top 10 For JavaScript Developers
byLewis Ardern
 
HTML5 - The Promise & The Peril
bySecurity Innovation
 
Spa Secure Coding Guide
byGeoffrey Vandiest
 
Are you botching the security of your AngularJS applications? (DevFest 2016)
byPhilippe De Ryck
 
OWASP Portland - OWASP Top 10 For JavaScript Developers
byLewis Ardern
 
Html5 security
byKrishna T
 
Securing your AngularJS Application
byPhilippe De Ryck
 
Vulnerability Assessment Of Angular JS
byValency Networks
 
W3 conf hill-html5-security-realities
byBrad Hill
 
ng-owasp: OWASP Top 10 for AngularJS Applications
byKevin Hakanson
 
W3 conf hill-html5-security-realities
byBrad Hill
 
Reviewing AngularJS
byLewis Ardern
 
(In)Security Implication in the JS Universe
byStefano Di Paola
 
Webinar–OWASP Top 10 for JavaScript for Developers
bySynopsys Software Integrity Group
 
ASP.NET security vulnerabilities
byAleksandar Bozinovski
 
An Abusive Relationship with AngularJS by Mario Heiderich - CODE BLUE 2015
byCODE BLUE
 

More from Carlo Bonamico

PDF
Build Your Own Angular Component Library
byCarlo Bonamico
 
PDF
Angular Rebooted: Components Everywhere
byCarlo Bonamico
 
PDF
Continuous Security: Zap security bugs now Codemotion-2015
byCarlo Bonamico
 
PDF
Angular 1.x reloaded: improve your app now! and get ready for 2.0
byCarlo Bonamico
 
PDF
Real World AngularJS recipes: beyond TodoMVC
byCarlo Bonamico
 
PDF
codemotion-docker-2014
byCarlo Bonamico
 
PDF
Mobile HTML5 websites and Hybrid Apps with AngularJS
byCarlo Bonamico
 
PDF
AngularJS: How to code today with tomorrow tools - Codemotion Milan 2013
byCarlo Bonamico
 
PDF
Infrastructure as Data with Ansible for easier Continuous Delivery
byCarlo Bonamico
 
PDF
Infrastructure as Data with Ansible
byCarlo Bonamico
 
PDF
Is my Web Application secure? OWASP Top Ten Security Risks and Beyond...
byCarlo Bonamico
 
PDF
Maven 2 in the real world
byCarlo Bonamico
 
PDF
Nasa World Wind For Java (by Fabrizio Giudici)
byCarlo Bonamico
 
PDF
Continuous Integration With Hudson (and Jenkins)
byCarlo Bonamico
 
PPT
Build Automation Tips
byCarlo Bonamico
 
Build Your Own Angular Component Library
byCarlo Bonamico
 
Angular Rebooted: Components Everywhere
byCarlo Bonamico
 
Continuous Security: Zap security bugs now Codemotion-2015
byCarlo Bonamico
 
Angular 1.x reloaded: improve your app now! and get ready for 2.0
byCarlo Bonamico
 
Real World AngularJS recipes: beyond TodoMVC
byCarlo Bonamico
 
codemotion-docker-2014
byCarlo Bonamico
 
Mobile HTML5 websites and Hybrid Apps with AngularJS
byCarlo Bonamico
 
AngularJS: How to code today with tomorrow tools - Codemotion Milan 2013
byCarlo Bonamico
 
Infrastructure as Data with Ansible for easier Continuous Delivery
byCarlo Bonamico
 
Infrastructure as Data with Ansible
byCarlo Bonamico
 
Is my Web Application secure? OWASP Top Ten Security Risks and Beyond...
byCarlo Bonamico
 
Maven 2 in the real world
byCarlo Bonamico
 
Nasa World Wind For Java (by Fabrizio Giudici)
byCarlo Bonamico
 
Continuous Integration With Hudson (and Jenkins)
byCarlo Bonamico
 
Build Automation Tips
byCarlo Bonamico
 

Recently uploaded

PDF
Complete iOS Delivery App Features & Admin Tools
byShiv Technolabs Pvt. Ltd.
 
PDF
On Demand Massage Therapist Booking App Development
byV3CUBE TECHNOLABS
 
PDF
Mastering Zero-Allocation Parsers: A Deep Dive into High-Performance C#
byVineet Sharma
 
PDF
Versnel innovatie met GitHub Enterprise - Rick Smit GitHub
byDelta-N
 
PDF
ACE Aarhus February 2026: Atlassian news
byDanielEriksen5
 
PPTX
Chapter Two Logic and Language - Copy.pptx
byGediyonBelay
 
PDF
Lost Android Phone Recovery_ Steps That Work Fast.pdf
byIsabella Reed
 
PDF
Clean Architecture with Vertical Slice Architecture in .NET 8
byVineet Sharma
 
PDF
Metrics, Logs, Traces, and Mayhem_ Introducing an observability adventure gam...
byImma Valls Bernaus
 
PPTX
40m_wAIred_DigitalPlatformRabobank_10022026.pptx
bySimonedeGijt
 
PPTX
How CFD Simulations Support Sustainable Data Center Design Optimization
byWeb Synergies
 
PPTX
‘Analyzing Application Logs Using AI’ Webinar
byTier1 app
 
PDF
Jira, Powered by Enterprise-Grade Intelligence from NeoroTalks.pdf
byNeoro Talks
 
PDF
MySQL Routing Guidelines: Designing Smarter Query Routing Together
byMiguel Araújo
 
PDF
JFokus 2026 - Please pass the salt- Serve up passwords with a side of entropy...
byOrtus Solutions, Corp
 
PDF
HuemanAI Platform Overview.pptx (1) (2).pdf
byAnkur Handoo
 
PPTX
Prime Teams – Real-Time Employee Monitoring & Project Management Software
byPrime Teams
 
PPTX
‘Analyzing Application Logs Using AI’ Webinar
byTier1 app
 
PDF
The Modern Architect's Codex: Design Patterns in .NET 9
byVineet Sharma
 
PDF
Ready, Set, REST! Introducing MySQL's Built-In REST Service
byMiguel Araújo
 
Complete iOS Delivery App Features & Admin Tools
byShiv Technolabs Pvt. Ltd.
 
On Demand Massage Therapist Booking App Development
byV3CUBE TECHNOLABS
 
Mastering Zero-Allocation Parsers: A Deep Dive into High-Performance C#
byVineet Sharma
 
Versnel innovatie met GitHub Enterprise - Rick Smit GitHub
byDelta-N
 
ACE Aarhus February 2026: Atlassian news
byDanielEriksen5
 
Chapter Two Logic and Language - Copy.pptx
byGediyonBelay
 
Lost Android Phone Recovery_ Steps That Work Fast.pdf
byIsabella Reed
 
Clean Architecture with Vertical Slice Architecture in .NET 8
byVineet Sharma
 
Metrics, Logs, Traces, and Mayhem_ Introducing an observability adventure gam...
byImma Valls Bernaus
 
40m_wAIred_DigitalPlatformRabobank_10022026.pptx
bySimonedeGijt
 
How CFD Simulations Support Sustainable Data Center Design Optimization
byWeb Synergies
 
‘Analyzing Application Logs Using AI’ Webinar
byTier1 app
 
Jira, Powered by Enterprise-Grade Intelligence from NeoroTalks.pdf
byNeoro Talks
 
MySQL Routing Guidelines: Designing Smarter Query Routing Together
byMiguel Araújo
 
JFokus 2026 - Please pass the salt- Serve up passwords with a side of entropy...
byOrtus Solutions, Corp
 
HuemanAI Platform Overview.pptx (1) (2).pdf
byAnkur Handoo
 
Prime Teams – Real-Time Employee Monitoring & Project Management Software
byPrime Teams
 
‘Analyzing Application Logs Using AI’ Webinar
byTier1 app
 
The Modern Architect's Codex: Design Patterns in .NET 9
byVineet Sharma
 
Ready, Set, REST! Introducing MySQL's Built-In REST Service
byMiguel Araújo
 

AngularJS Security: defend your Single Page Application

  • 1.
    @carlobonamico#angularconf15 ANGULARJS SECURITY: defend yourSingle Page Application Carlo Bonamico @carlobonamico carlo.bonamico@nispro.it http://www.nispro.it Turin, 22/10/2015
  • 2.
    @carlobonamico#angularconf15 About me Speaker Bio –passionate software developer since the C128 era – PhD and research at the University of Genova / CNIT National TLC Research Consortium – exciting time at startup Eptamedia – now a Solution Architect and Senior Trainer at NIS s.r.l.  between Italy and new London office Current projects & interests – training/mentoring teams on AngularJS, Web Security, Continuous Integration & Delivery – creating component-based Angular applications – security reviews and assessments
  • 3.
    @carlobonamico#angularconf15 Abstract Securing an html5Single Page Application is not the same as protecting a typical JEE/Rails/PHP/.NET webapp. The industry-wide move towards HTML5 and Single Page Applications, motivated by the opportunity for more sophisticated interaction and UX, is again upsetting the balance between Hackers and Developers. A wave of new-generation front-end technologies, including Angularjs, is attracting Developers with their combination of productivity and innovative UX, but at the same time opens the door to new vulnerabilities and security challenges. This talk will summarize the main principles of Secure Coding, and will discuss their application to a typical angular HTML5 application with REST backend to prevent major risks (including OWASP Top Ten). A concrete example will demonstrate the use of tools and libraries, from RBAC to JWT, from Spring Security to AngularJS directives for implementing secure HTML5/JS apps.
  • 4.
    @carlobonamico#angularconf15 Evolution of ApplicationSecurity When I taught my first Web Application Security training – most participants had never heard of SQL Injection and XSS Thanks to many industry and community players (especially OWASP), – not to mention many high-profile incidents, things have started to change... Application Security Ensuring Application guarantees •Confidentiality •Integrity •Availability •Accountability of the Information it processes
  • 5.
    @carlobonamico#angularconf15 Are we doingbetter? It's 2015... we were promised flying cars... and what we got is... See also – http://www.cvedetails.com/vulnerabilities-by-types.php – https://www.whitehatsec.com/resource/stats.html
  • 6.
    @carlobonamico#angularconf15 HTML5 Single PageApplications Somewhat ill-defined term, but you know what I mean – HTML templates, statically served – client retrieves data from REST services / websockets – views dynamically rendered on the client side Definitely more powerful, interactive and mobile-friendly that traditional request-response webapps also more secure?
  • 7.
    @carlobonamico#angularconf15 First problem Spiderman's UncleBen version: With great power comes great responsibility... The Web Application Security version: With great power come more holes and greater risks! – increased Surface of Attack  Websockets, storage, apis... – https://html5sec.org/ – http://html5security.org/ – and once you penetrate the browser, you can do basically everything  and I mean it: calling APIs, install keyloggers, redirect user behaviour, capture private data –http://xenotix.in/  “most attack were already possible... but they are more powerful now” http://w3af.org/understanding-html5-security
  • 8.
    @carlobonamico#angularconf15 Second problem We areundergoing a wide architectural shift from To So many security assumptions do not hold true anymore! ServerPOST params HTML Browser Form-based input HTML rendering HTML templating Controllers, Interaction Logic Business Logic Server POST JSON JSON Browser HTML rendering HTML templating Business Logic Interaction Logic REST endpoints
  • 9.
    @carlobonamico#angularconf15 The good side Thetypical modern HTML5 application architecture has a single/main advantage: it forces at the very least a basic degree of separation between UI and business logic – even more so with Angular, Ember, React In our consulting/project/problem solving experience, the single biggest cause of – quality – performance – security problems is....
  • 10.
    @carlobonamico#angularconf15 The good side Thetypical modern HTML5 application architecture has a single/main advantage: it forces at the very least a basic degree of separation between UI and business logic – even more so with Angular, Ember, React In our consulting/project/problem solving experience, the single biggest cause of – quality – performance – security problems is.... the mixing & coupling of UI and business logic
  • 11.
    @carlobonamico#angularconf15 There's hope... If weproperly understand the new architectural paradigm, we can turn it into an advantage Follow the principles of secure coding – Do not trust inputs – Minimize attack surface area (and window of opportunity) – Establish secure defaults – Principle of Least privilege – Principle of Defense in depth – Fail securely – Don’t trust services – Separation of duties (vs configuration) – Avoid security by obscurity – Keep security simple – Fix security issues correctly
  • 12.
    @carlobonamico#angularconf15 Top Ten WebApplication Risks – A1-Injection – A2-Broken Authentication and Session Management – A3-Cross-Site Scripting (XSS) – A4-Insecure Direct Object References – A5-Security Misconfiguration – A6-Sensitive Data Exposure – A7-Missing Function Level Access Control – A8-Cross-Site Request Forgery (CSRF) – A9-Using Components with Known Vulnerabilities – A10-Unvalidated Redirects and Forwards What's different between Request/Response apps and HTML5/SPAs?
  • 13.
    @carlobonamico#angularconf15 What changes withHTML5/SPAs? RED → more critical ORANGE → different solution GREEN → easier – A1-Injection → same problem, same solution – A2-Broken Authentication and Session Management – A3-Cross-Site Scripting (XSS) – A4-Insecure Direct Object References – A5-Security Misconfiguration – A6-Sensitive Data Exposure – A7-Missing Function Level Access Control – A8-Cross-Site Request Forgery (CSRF) – A9-Using Components with Known Vulnerabilities – A10-Unvalidated Redirects and Forwards
  • 14.
    @carlobonamico#angularconf15 What changes withHTML5/SPAs? RED → more critical ORANGE → different solution GREEN → easier – A1-Injection → same problem, same solution – A2-Broken Authentication and Session Management – A3-Cross-Site Scripting (XSS) – A4-Insecure Direct Object References – A5-Security Misconfiguration – A6-Sensitive Data Exposure – A7-Missing Function Level Access Control – A8-Cross-Site Request Forgery (CSRF) – A9-Using Components with Known Vulnerabilities – A10-Unvalidated Redirects and Forwards Today, we will focus on those!
  • 15.
  • 16.
    @carlobonamico#angularconf15 A3 - XSS Cross-Site-Scriptingmeans that attacker can insert custom js code which is then displayed in the user browser – stored (input js in a field → DB → sent back to the page) – reflected (input js in the url, send the url to a user, js executed) – DOM-based (input triggers js logic that manipulates the DOM and insert custom js) Remember: any external input is UNTRUSTED! – so we must avoid mixing user input with js code
  • 17.
    @carlobonamico#angularconf15 A3 – PreventingXSS Looks easy: but HTML allows for multiple mixed execution contexts: – JS within CSS within HTML within a frame of another HTML … The proper solution is ESCAPING: encoding the data so that the browser properly interprets it as plain text (and not js) – https://www.owasp.org/index.php/XSS_(Cross_Site_Scripting)_Prevention_Che at_Sheet In a well designed SPA, – clear inputs paths  REST service responses, user inputs, url bar, ... – HTML generation through the framework templating engine – so it is easier to intercept and escape outputs
  • 18.
    @carlobonamico#angularconf15 A3 – PreventingXSS with Angular Since 1.3, the HTML compiler will escape all {{}} & ng­bind by default – https://www.ng-book.com/p/Security – http://java.dzone.com/articles/angularjs-how-handle-xss Be careful if you must include user-generated HTML (e.g. in rich text editors) – take advantage of the services and directives – ng­bind­html (from angular-sanitize)  print as is removing “script” tags (beware of img tags)  fully customizable with –$sceProvider & $SanitizeProvider – https://docs.angularjs.org/guide/security Please note: – escaping in the REST services is not always feasible/useful – they can be consumed by mobile Apps and other clients
  • 19.
    @carlobonamico#angularconf15 Remember Most vulnerabilities arenot so serious by themselves – but became terrible if mixed  think Pepsi + Mentos XSS is an enabler for – phishing – browser-based MITM – session / auth token stealing – sensitive data extraction – img courtesy of http://www.delawaretoday.com/
  • 20.
  • 21.
    @carlobonamico#angularconf15 A5 – Securitymisconfiguration A single MITM (Man in the Middle) and your “done” – as the attacker can put arbitrary code in your browser – so,  https://www.eff.org/Https-everywhere Be careful with CORS – Avoid Allow­Origin “*” unless you have very strong authentication and authorization Remember to tell the browser to enable stronger protection – typically through headers such as CSP – https://www.owasp.org/index.php/List_of_useful_HTTP_headers
  • 22.
    @carlobonamico#angularconf15 Securing Headers Node – https://www.npmjs.com/package/helmet Java(Spring Security) – http://docs.spring.io/autorepo/docs/spring-security/current/reference/html/headers. html Test tools – security headers online  https://securityheaders.com/ – OWASP ZAP  https://www.owasp.org/index.php/OWASP_Zed_Attack_Proxy_Project
  • 23.
  • 24.
    @carlobonamico#angularconf15 What is Authentication Verifyingthe user identity – independently from his profile / authorizations Several elements: – where valid users are listed (Realm)  internal, file, DB, LDAP, Active Directory, SSO Server – what info is used to establish user identity  one or more “factors”: username, password, OTP, certificate... – how identity is checked the first time  login → credentials validation – how identity is checked on subsequent requests  validation
  • 25.
    @carlobonamico#angularconf15 Traditional Request-Response Applications e.g.JSP / ASP / PHP – login page – successful login creates a session – protected pages accessed within the session – data and access control filtered on the server side  often within views or controllers Browser Server POST Login Data GET secured page SESSIONID = 5 SESSIONID = 5 auth = true? crede ntials valid? Realm filtered HTML page SID AUTH DATA 5 true carlo,admi n
  • 26.
    @carlobonamico#angularconf15 Issues with Cookie+ Session Authentication Authentication requires – checking credentials against a realm – keeping auth in session state on the server – sessionid sent in a cookie Issues – state replication in clustered servers vs sticky sessions  Single-Sign-On across servers? – More complex scenarios are possible  e.g. SSO Server, like CAS – typically cookie based → all server must be in same domain Remember: Cookies are sent with ANY request to the same domain (including images)
  • 27.
    @carlobonamico#angularconf15 Cookie-based authentication inSingle Page Applications Can't SPA just do the same? – login form POSTs to login service – successful login creates a session and sets a cookie – protected Pages & REST services accessed within the session  data and access control filtered … where ? Browser Server POST Login Data GET secured JSON SESSIONID = 5 SID AUTH DATA 5 true carlo,admi nSESSIONID = 5 auth = true?{ ... } crede ntials valid? Realm
  • 28.
    @carlobonamico#angularconf15 Authentication vs SessionManagement Cookie-based sessions are simple to implement But – not suited to stateless nature of REST services Authentication vs Sessions – They are two different things, although often used together – REST services tend to be stateless Unauthenticated Authenticated Stateless Plain HTTP e.g. Wikipedia REST e.g. Google APIs With Session Session cookies e.g. Amazon JSP/ASP/PHP e.g. Intranet Apps
  • 29.
    @carlobonamico#angularconf15 How to dostateless authentication?
  • 30.
    @carlobonamico#angularconf15 Token-based Authentication Login establishesa valid token – each request must be presented with the token – the server can check token validity at each request – https://auth0.com/blog/2014/01/07/angularjs-authentication-with- cookies-vs-token/ Browser Server POST Login Data GET secured JSON TOKEN = 5 TOKEN = 5 token valid? crede ntials valid? Realm no session!
  • 31.
    @carlobonamico#angularconf15 Issues Given a token –how do you know which is the current user? On the server – how expensive it is to check the token at each request? Can you share a token across services? – can you validate it without connecting to a DB / SSO Server?
  • 32.
    @carlobonamico#angularconf15 How do youcreate & validate Tokens?
  • 33.
    @carlobonamico#angularconf15 Creating and ValidatingTokens Simplest way: checking them against a list of valid tokens – in memory → similar to session-based auth  replication problems – on a DB  easier clustering, must consider performance – on an external server  SSO for free, must evaluate performance & complexity
  • 34.
    @carlobonamico#angularconf15 JWT - http://jwt.io JWT= encoded & signed Json object containing – Access token – Claims (custom: session, domain, username...) – Expiration – and Digital Signature! → verifiable with just the public key Returned by login REST service Sent as header at each request –Authentication: bearer eyJhbGciO                   .eyJzdWIiOWV9.eoaDV Checked by REST backed at each request – can also be used with websockets { “user”:”carlo”, “domain”:”NIS”, “expiry”: .. }
  • 35.
    @carlobonamico#angularconf15 JWT in angular AngularLibrary – https://github.com/auth0/angular-jwt Extensible hooks for – storing and retrieving tokens on the client Interceptors for – retrieving tokens from server Response Headers – optionally refresh tokens – automatically sending tokens at each request Robust and simple to use bower install angular­jwt
  • 36.
    @carlobonamico#angularconf15 Token-based Auth inAngularJs Ingredients REST endpoints – /auth/login  Input parameters: credentials  Response: token – /auth/logout  Input parameters: token $http or $resource based Client Service AuthenticationService – login() logout() methods wrapping the above – plus isAuthenticated() and possibly currentUser()
  • 37.
    @carlobonamico#angularconf15 Token-based Auth inAngularJs Ingredients – Controller(s) – LoginController  bound to Login form, calls service – LogoutController – AuthenticationController  IsAuthenticated, currentUser Possibly, Directives <authenticated­user>  showWhenAuthenticated <menu showWhenAuthenticated=”true”>
  • 38.
    @carlobonamico#angularconf15 Saving the token Inboth cases, register a then() on the promise $http(...).then(function(response) {    currentToken.jwt =            response.data.access_token;  } Store the token locally If you need, parse it tokenPayload = jwtHelper.decodeToken(jwt); date = jwtHelper.getTokenExpirationDate(jwt); bool = jwtHelper.isTokenExpired(jwt);     
  • 39.
    @carlobonamico#angularconf15 Sending the tokenat each request Specify Token retrieval function angular.module('myApp')  .config(      function  Config($httpProvider,jwtInterceptorProvider) {      jwtInterceptorProvider.tokenGetter =     ['currentToken',   function(currentToken) { return currentToken.jwt;     //or return localStorage.getItem('id_token'); }]; Register interceptor   $httpProvider.interceptors.push('jwtInterceptor'); });
  • 40.
    @carlobonamico#angularconf15 Back-end Login endpoint – validatescredentials – generates JWT REST Service endpoints (or better interceptor) – extract Token from Authentication: header – validate it – proceed with request processing  or return error 401 Full example – http://thejackalofjavascript.com/architecting-a-restful-node-js-app/
  • 41.
    @carlobonamico#angularconf15 JWT in... Plain Node:Auth0 library – https://github.com/auth0/node-jsonwebtoken Express: Express JWT – https://github.com/auth0/express-jwt Passport - Modular Auth Framework for node.js – http://passportjs.org/ .NET - OWIN.Identity – http://bitoftech.net/2014/10/27/json-web-token-asp-net-web-api-2- jwt-owin-authorization-server/ Java - Spring Security – https://spring.io/guides/tutorials/spring-security-and-angular- js/Integrating OAUTH with JWT
  • 42.
    @carlobonamico#angularconf15 Were can westore / send the token? in a cookie? in a header?
  • 43.
    @carlobonamico#angularconf15 Sending Tokens -Cookies vs Headers Cookies Pros – sent automatically – no code required on the client Cons – sent automatically – even when do not want  e.g. <IMG src= in email – less control on validity – stored on client disk Headers Pros – sent only explicitely – not stored on disk – unless you want to – more control – also prevents CSRF Cons – require code on the client side – but this is normal in SPAs https://auth0.com/blog/2014/01/27/ ten-things-you-should-know-about- tokens-and-cookies/
  • 44.
    @carlobonamico#angularconf15 Token Storage vsSession Duration In memory or sessionStorage – works only on current tab – automatically closed In localStorage – persistent – work across multiple tabs – requires explicit expiration https://stormpath.com/blog/where-to-store-your-jwts-cookies-vs- html5-web-storage/
  • 45.
    @carlobonamico#angularconf15 What else wouldwe need? what happens when the user is not logged in? how to improve usability?
  • 46.
    @carlobonamico#angularconf15 Routing support forAuthentication & Authorization Need to configure Routing for – redirect to login if not authenticated – redirect to login if token expired – optionally, redirect back to original URL – redirect to error page if route not authorized in the current profile Difficult to do in the default ngRoute – Possible in ui-router Way easier in angular-new-router – https://medium.com/angularjs-meetup-south-london/angular-ng- conf-2015-media-25dbe6250154
  • 47.
  • 48.
    @carlobonamico#angularconf15 Typical Server sideapplication Authorization is verified – in controllers if (user.hasRole(“admin”) == true) – through filters / interceptors – in views <hasRole role=”admin”> or <if (...)> confidential info </hasRole> Client Browser only receives content it has rights to – (roughly) works even if security checks are “spaghetti code” in the JSP/ASP/PHP templates
  • 49.
    @carlobonamico#angularconf15 And in aSPA? Would this be secure? In users-view.html <button ng­if=”authCtrl.isAdmin”          ng­click=”userCtrl.deleteUser()”> or this? <section ng­if=”authCtrl.isAdmin” > {{userCtrl.user.confidentialData}} </section>
  • 50.
    @carlobonamico#angularconf15 No! Just press F12 andmodify the HTML / JS or even the DOM in the developer tools or just send HTTP requests directly to the backend
  • 51.
    @carlobonamico#angularconf15 Security is upto the server Even in SPAs, Authorization is still up to the server: Security controls – checking authentication state – checking profile and inferring permissions – enabling privileged actions – filtering confidential data MUST be performed on the server – in the REST / websocket endpoints – locally in each service, or via filters/interceptors Also, the same rule applies to input validation
  • 52.
    @carlobonamico#angularconf15 Usability is upto the client But letting the user click on the button, invoking the service, and only then displaying an error is not user friendly UX is up to the client – Front-End should have enough info to disable/hide the button  if the user is not authorized to click it  retrieve the permissions list from a REST service at logon E.g. Permission check directives for Angular <button ng­click=”postCtrl.delete()”  has­permission=”deletePost”> permissions for Role-Based Access Control
  • 53.
    @carlobonamico#angularconf15 Server-side authorization checks So,in each server endpoint, you should check – valid authentication – valid authorization profile which includes privileges for the currently requested action / data Example Blog application if (subject.hasRole(“admin”)) //enable delete post if (subject.hasRole(“editor”)) //enable modification of post else //only read data What are the problems with this code?
  • 54.
    @carlobonamico#angularconf15 What if therules change? What if an auditor asks about what an “editor” can do? Real-world cases tend to be more complex!
  • 55.
    @carlobonamico#angularconf15 Role Based AccessControl Separating Role definition from Permission check – In each service / action, code checks that the user has the relevant permission if (subject.hasPermission(“deletePost”)) – Role Definition lists all the permissions  e.g. –Admin   detelePost, updatePost, readPost→ –anonymous   readPost→ Authorization system maps user/groups to list of roles – and computes the “merged” set of permissions active for the valid user  user is both Admin & Editor  Permissions are –changeSettings, deleteUser, addUser, deletePost,  modifyPost 
  • 56.
    @carlobonamico#angularconf15 Hierarchical permission system 2-level:User → Role → Permissions 3-level: User → Groups → Roles → Permissions Wildcard Permissions – blog:deletePost – blog:readPost – blog:* means both  blog:readPost:12 → entity level permission  blog:readPost:* on all entities see Apache Shiro
  • 57.
    @carlobonamico#angularconf15 Advantages Permission check is –focused, readable – easy to implement – easy to test – rarely changes Role definition is – centralized – easy to review – easy to change – as it tends to change often Secure Design Principle all parts of the system need to perform security checks but security check implementation should be centralized and not “spread” in the system
  • 58.
    @carlobonamico#angularconf15 RBAC in aSingle Page Application Server-side Ingredients: – Profile definition mapping Roles to Permissions  static file  db table  possibly cached  Identity server (e.g. OpenAM) – API for checking permissions Normally, some of this information is cached to ensure minimal performance penalty
  • 59.
    @carlobonamico#angularconf15 Usable Secure UIin AngularJS Ingredients: – /authorization/profile/current REST endpoint  returns a Json  current user roles  merged list of all active permissions On the Client – Client Service wrapping the above – Authorization/ProfileService storing the permission list  hasPermission(p) method Call the service from – Controller methods – Routing callbacks
  • 60.
  • 61.
    @carlobonamico#angularconf15 Component Security The codewe write The code which actually runs in our application – libraries and components
  • 62.
    @carlobonamico#angularconf15 Checking dependecies forvulns On the client side – http://retirejs.github.io/retire.js/ npm install ­g retire ; retire –path src – also available as ZAP & mvn plugin mvn com.h3xstream.retirejs:retirejs­maven­ plugin:scan On the server side – OWASP Dependency Check  https://github.com/jeremylong/DependencyCheck dependency­check.sh ­­app Testing ­­out . ­­scan  [path to jar files to be scanned] mvn org.owasp:dependency­check­maven
  • 63.
    @YourTwitterHandle#DVXFR14{session hashtag} @carlobonamico#angularconf15 A f nal w ord ... Butisn't all that unnecessary complexity slowing down development of my critical project?
  • 64.
    @carlobonamico#angularconf15 A final word Peopletend to view Security as “overhead”, not adding value to the project The reality: – if you know what to pay attention to, minimal additional costs – also, in most cases, adding security just means following good design principles if you separate well concerns, adding security is easy – favor clarity of intent and code readability – favor composition over inheritance – test, test, test!  incorporate security checks in your tests This lets software adapt more easily to both requirements & security changes – easier to evolve incrementally & validating each step → see Continuous Delivery
  • 65.
  • 66.
    @carlobonamico#angularconf15 References Owasp Secure CodingPrinciples – https://www.owasp.org/index.php/Secure_Coding_Principles OWASP Testing Guide – https://www.owasp.org/index.php/OWASP_Testing_Guide_v4_Table_ of_Contents SOLID Design Principles – http://butunclebob.com/ArticleS.UncleBob.PrinciplesOfOod
  • 67.
    @carlobonamico#angularconf15 HTML5 Security Attack Vectors& Vulnerabilities – https://media.blackhat.com/bh-eu-12/shah/bh-eu-12-Shah_HTML5_ Top_10-WP.pdf OWASP Guidelines – https://www.owasp.org/index.php/HTML5_Security_Cheat_Sheet JS Frameworks Security – http://www.slideshare.net/x00mario/jsmvcomfg-to-sternly-look-at- javascript-mvc-and-templating-frameworks
  • 68.
    @carlobonamico#angularconf15 Thank You foryour attention Interested? – attend our Web Application Security / Angular trainings – engage us for Design/Code Reviews, Vulnerability Assessments & team mentoring Read more on – http://www.nispro.it – http://www.slideshare.net/carlo.bonamico Follow us on twitter – @nis_srl @carlobonamico  updates on Security, AngularJS, Continuous Delivery Contact me – carlo.bonamico@gmail.com / carlo.bonamico@nispro.it