Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Spring Security and AngularDave Syer, 2016 
@david_syer
Agenda
Really quick introduction to Spring Security, Spring Session, Angular JS
Focus on features to build secure, modern,...
Most Valuable Links
 
 
http://spring.io/guides/tutorials/spring­security­and­angular­js   
 
http://spring.io/guides/topi...
Spring Security
Generic, Filter based solution for Servlet applications
Authentication (a.k.a. identity) and Authorization...
Angular JS
JavaScript framework
"Magic" binding (dependency injection and MVC)
Has a lot of traction in the enterprise
Not...
Security Features in Modern Browers
HTTP Basic
X.509 authentication
Kerberos
Cookies
CORS (Common Origin Resource Sharing)...
Spring Session
Not tied to Spring Security, but works well with it
Easy, declarative, distributed sessions
Redis works out...
Spring Cloud
Toolbox for building distributed systems (a.k.a. microservices)
Most relevant pattern here is Gateway (a.k.a....
Basic Sample
(c.f. "basic": https://github.com/… /basic, Part I)
A Single Page Application
index.html
<html>
...
<body ng-app="hello">
<div class="container">
<h1>Greeting</h1>
<div ng-co...
Completely Minimal JavaScript
hello.js
angular.module('hello', [])
.controller('home', function($http) {
var self = this;
...
Add HTTP Basic Security
With Spring Boot you get a secure application out of the box, but it is easy to customize for a cu...
Basic Sample with Authentication
Spring Security: Login Form
To be able to add a login form to the app we need to make some HTML static resources accessibl...
Suppress the Browser Dialog
When the browser gets a 401 with "WWW­Authenticate: Basic … " it pops up a dialog.
Spring Secu...
Client Side Login Form
<form role="form" ng-submit="controller.login()">
...
</form>
self.credentials = {};
self.login = f...
Login Form Summary
(c.f. "single": https://github.com/… /single, Part II)
Cross Site Request Forgery (CSRF)
Spring Security and Angular JS have good support for CSRF protection
To Client Name From...
Spring Security for Angular "XSRF"
@Configuration
public class SecurityConfiguration extends WebSecurityConfigurerAdapter ...
One Last Thing
For a Single Page Application the default logout success handler doesn’t make sense, so:
@Configuration
pub...
Add Resource Server
(c.f. "vanilla": https://github.com/… /vanilla, Part III)
CORS
Use @CrossOrigin on your @RequestMapping and this:
public class ResourceApplication extends WebSecurityConfigurerAdap...
Add Spring Session
(c.f. "spring­session": https://github.com/… /spring­session, Part III)
Add Gateway
(c.f. "proxy": https://github.com/… /proxy, Part IV)
Externalize Authentication (SSO)
(c.f. "oauth2": https://github.com/… /oauth2, Part V)
Push UI Below Gateway
Add Resource Server
Full "Double" Sample
(c.f. "double": https://github.com/… /double, Part VI)
Overview of Sample Apps
Imagine several physical implementations of the same system with an identical Javascript client (s...
Links
http://presos.dsyer.com/decks/spring­security­angular.html
http://spring.io/guides/tutorials/spring­security­and­ang...
← →
1 / 30
Go to Slide:    Go
Building Applications with Angular JS and Spring Security
Upcoming SlideShare
Loading in …5
×

Building Applications with Angular JS and Spring Security

3,309 views

Published on

SpringOne Platform
Speaker: Dave Syer; Senior Consulting Engineer, Pivotal

In this presentation we show some nice features of Spring Security, Spring Boot and Angular JS working together to provide a pleasant and secure user experience. Things to consider are cookies, headers, native clients, various security vulnerabilities and how modern browser technology can help us to avoid them. In this series we show how nicely features of the component frameworks can be integrated simply to provide a pleasant and secure user experience. We start with a very basic single-server implementation and scale it up in stages, splitting out backend resources and authentication to separate services.

Published in: Technology
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/yxufevpm } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/yxufevpm } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/yxufevpm } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/yxufevpm } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/yxufevpm } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/yxufevpm } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • ♣♣ 10 Easy Ways to Improve Your Performance in Bed... ♥♥♥ https://tinyurl.com/rockhardxxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Building Applications with Angular JS and Spring Security

  1. 1. Spring Security and AngularDave Syer, 2016  @david_syer
  2. 2. Agenda Really quick introduction to Spring Security, Spring Session, Angular JS Focus on features to build secure, modern, single­page applications High level view of sample apps presented in tutorial (from blog series) More detailed look at some features of the apps
  3. 3. Most Valuable Links     http://spring.io/guides/tutorials/spring­security­and­angular­js      http://spring.io/guides/topicals/spring­security­architecture      http://start.spring.io
  4. 4. Spring Security Generic, Filter based solution for Servlet applications Authentication (a.k.a. identity) and Authorization (a.k.a. access decisions) OAuth2 module useful for SSO and token­based API authentication lots of other features http://projects.spring.io/spring­security
  5. 5. Angular JS JavaScript framework "Magic" binding (dependency injection and MVC) Has a lot of traction in the enterprise Nothing about the architecture of the apps presented here requires Angular JS Really basic usage in samples, but representative
  6. 6. Security Features in Modern Browers HTTP Basic X.509 authentication Kerberos Cookies CORS (Common Origin Resource Sharing) HSTS (HTTP Strict Transport Security) CSP (Content Security Policy) Sub­text: "use them, they’re reliable and free".
  7. 7. Spring Session Not tied to Spring Security, but works well with it Easy, declarative, distributed sessions Redis works out of the box, other backends easy to add Servlet Filter http://projects.spring.io/spring­session
  8. 8. Spring Cloud Toolbox for building distributed systems (a.k.a. microservices) Most relevant pattern here is Gateway (a.k.a. reverse micro­proxy) Also useful for configuration management, service discovery, load balancing, circuit breaker, etc. http://cloud.spring.io
  9. 9. Basic Sample (c.f. "basic": https://github.com/… /basic, Part I)
  10. 10. A Single Page Application index.html <html> ... <body ng-app="hello"> <div class="container"> <h1>Greeting</h1> <div ng-controller="home as home" ng-cloak class="ng-cloak"> <p>The ID is: {{home.greeting.id}}</p> <p>The content is: {{home.greeting.msg}}</p> </div> </div> <script src="js/angular-bootstrap.js" type="text/javascript"></script> <script src="js/hello.js"></script> </body> </html>
  11. 11. Completely Minimal JavaScript hello.js angular.module('hello', []) .controller('home', function($http) { var self = this; $http.get('/resource/').then(function(response) { self.greeting = response.data; }) } );
  12. 12. Add HTTP Basic Security With Spring Boot you get a secure application out of the box, but it is easy to customize for a custom user details store (e.g. directory). pom.xml <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-security</artifactId> </dependency> or build.gradle dependencies { compile('org.springframework.boot:spring-boot-starter-security') }
  13. 13. Basic Sample with Authentication
  14. 14. Spring Security: Login Form To be able to add a login form to the app we need to make some HTML static resources accessible anonymously @Configuration public class SecurityConfiguration extends WebSecurityConfigurerAdapter { @Override protected void configure(HttpSecurity http) throws Exception { http .httpBasic() .and() .authorizeRequests() .antMatchers("/index.html", "/home.html", "/login.html", "/").permitAll() .anyRequest().authenticated(); } } (c.f. "single": https://github.com/… /single, Part I)
  15. 15. Suppress the Browser Dialog When the browser gets a 401 with "WWW­Authenticate: Basic … " it pops up a dialog. Spring Security sends that header unless it sees "X­Requested­With" in the request. So: angular.module('hello', []).config(function($httpProvider) { $httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest'; }) ...
  16. 16. Client Side Login Form <form role="form" ng-submit="controller.login()"> ... </form> self.credentials = {}; self.login = function() { $http.get('/user', { headers : { authorization : "Basic " + btoa(self.credentials.username + ":" + self.credentials.password) }}).then(function(response) { self.greeting = response.data; self.show = false; }) } The login() function sends HTTP Basic credentials and checks the "/user" endpoint. Subsequent requests are authenticated by a cookie ­ standard Spring Security and browser behaviour
  17. 17. Login Form Summary (c.f. "single": https://github.com/… /single, Part II)
  18. 18. Cross Site Request Forgery (CSRF) Spring Security and Angular JS have good support for CSRF protection To Client Name From Client Name Spring Security Request attribute _csrf Request header X­CSRF­TOKEN Angular JS Cookie XSRF­TOKEN Request header X­XSRF­TOKEN They don’t talk to each other by default
  19. 19. Spring Security for Angular "XSRF" @Configuration public class SecurityConfiguration extends WebSecurityConfigurerAdapter { @Override protected void configure(HttpSecurity http) throws Exception { http ... .and() .csrf() .csrfTokenRepository(CookieCsrfTokenRepository.withHttpOnlyFalse()); } }
  20. 20. One Last Thing For a Single Page Application the default logout success handler doesn’t make sense, so: @Configuration public class SecurityConfiguration extends WebSecurityConfigurerAdapter { @Override protected void configure(HttpSecurity http) throws Exception { http ... .and() .logout().logoutSuccessUrl("/"); } }
  21. 21. Add Resource Server
  22. 22. (c.f. "vanilla": https://github.com/… /vanilla, Part III)
  23. 23. CORS Use @CrossOrigin on your @RequestMapping and this: public class ResourceApplication extends WebSecurityConfigurerAdapter { @Override protected void configure(HttpSecurity http) throws Exception { http.cors() ... } Tipthere is also CorsUtils::isCorsRequest method you can use in a request matcher.
  24. 24. Add Spring Session (c.f. "spring­session": https://github.com/… /spring­session, Part III)
  25. 25. Add Gateway (c.f. "proxy": https://github.com/… /proxy, Part IV)
  26. 26. Externalize Authentication (SSO) (c.f. "oauth2": https://github.com/… /oauth2, Part V)
  27. 27. Push UI Below Gateway
  28. 28. Add Resource Server
  29. 29. Full "Double" Sample (c.f. "double": https://github.com/… /double, Part VI)
  30. 30. Overview of Sample Apps Imagine several physical implementations of the same system with an identical Javascript client (single page application) and a secure back end. Application and security architecture variations: Application Description Security Blog basic Single backend HTTP Basic Part I single Adds form authentication Session cookie Part II spring-session Adds secure backend with custom token Spring Session ID as token Part III proxy UI acts as proxy. Session cookie, Spring Session Part IV oauth2 Add OAuth2 SSO with a separate authentication server Session cookie in UI and access token for backends Part V double Add "admin" UI behind Gateway Session cookie, Spring Session Part VI
  31. 31. Links http://presos.dsyer.com/decks/spring­security­angular.html http://spring.io/guides/tutorials/spring­security­and­angular­js/ http://spring.io/guides/topicals/spring­security­architecture/ http://github.com/spring­guides/tut­spring­security­and­angular­js http://github.com/spring­projects/spring­security­oauth http://cloud.spring.io/spring­cloud­netflix (for @EnableZuulProxy) Twitter: @david_syer Email: dsyer@pivotal.io
  32. 32. ← → 1 / 30 Go to Slide:    Go

×