securing angular js with spring security csrf token
<p>Im currently having a separate AngularJS on a Apache HTTP Server and a Spring boot Backend on a Tomcat 8 . The backend serves as a Rest API .I want to secure my application. I got many advices to use csrf token that provides spring security and consume it with angualrjs.But i don't really know how to use Angular JS to authenticate a user via a form and fetch a secure resource to render in the UI.</p>

<p>this is my main application class:`  </p>

<pre><code>package org.test;
    import java.io.IOException;
    import java.security.Principal;
    import java.util.HashMap;
    import java.util.Map;
    import java.util.UUID;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.ServletException;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.sql.DataSource;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.autoconfigure.security.SecurityProperties;
import org.springframework.context.annotation.Configuration;
import org.springframework.core.annotation.Order;
import org.springframework.security.config.annotation.authentication.builders.AuthenticationManagerBuilder;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
import org.springframework.security.web.csrf.CsrfFilter;
import org.springframework.security.web.csrf.CsrfToken;
import org.springframework.security.web.csrf.CsrfTokenRepository;
import org.springframework.security.web.csrf.HttpSessionCsrfTokenRepository;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.filter.OncePerRequestFilter;
import org.springframework.web.util.WebUtils;

@SpringBootApplication
@RestController
public class TaliopjarApplication {

    @RequestMapping("/user")
    public Principal user(Principal user) {
        return user;
    }

    @RequestMapping("/resource")
    public Map&lt;String, Object&gt; home() {
        Map&lt;String, Object&gt; model = new HashMap&lt;String, Object&gt;();
        model.put("id", UUID.randomUUID().toString());
        model.put("content", "Hello World");
        return model;
    }

    public static void main(String[] args) {
        SpringApplication.run(TaliopjarApplication.class, args);
    }

    @Configuration
    @Order(SecurityProperties.ACCESS_OVERRIDE_ORDER)
    protected static class SecurityConfiguration extends WebSecurityConfigurerAdapter {
        @Autowired
        public void globalConfig(AuthenticationManagerBuilder auth,DataSource dataSource) throws Exception{
            /*auth.inMemoryAuthentication().withUser("admin").password("123").roles("0");
            auth.inMemoryAuthentication().withUser("talent1").password("123").roles("1");*/

            auth.jdbcAuthentication()
                .dataSource(dataSource)
                .usersByUsernameQuery("select str_login as principal, str_password as credentials, true from t_user where str_login = ?")
                .authoritiesByUsernameQuery("select str_login as principal, ln_type as role from t_user where str_login = ?")
                .rolePrefix("ROLE_");

        }
        @Override
        protected void configure(HttpSecurity http) throws Exception {
            http.httpBasic().and().authorizeRequests()
                    .antMatchers("/index.html", "/home.html", "/login.html", "/",
                            "/data/**","/myApp.js","/assets/**","/skilltalent").permitAll().anyRequest()
                    .authenticated()
                    .and().formLogin().loginPage("/login")
                    .permitAll().defaultSuccessUrl("/index.html")
                    .and().csrf()
                    .csrfTokenRepository(csrfTokenRepository()).and()
                    .addFilterAfter(csrfHeaderFilter(), CsrfFilter.class);
        }

        private Filter csrfHeaderFilter() {
            return new OncePerRequestFilter() {
                @Override
                protected void doFilterInternal(HttpServletRequest request,
                        HttpServletResponse response, FilterChain filterChain)
                        throws ServletException, IOException {
                    CsrfToken csrf = (CsrfToken) request.getAttribute(CsrfToken.class
                            .getName());
                    if (csrf != null) {
                        Cookie cookie = WebUtils.getCookie(request, "XSRF-TOKEN");
                        String token = csrf.getToken();
                        if (cookie == null || token != null
                                &amp;&amp; !token.equals(cookie.getValue())) {
                            cookie = new Cookie("XSRF-TOKEN", token);
                            cookie.setPath("/");
                            response.addCookie(cookie);
                        }
                    }
                    filterChain.doFilter(request, response);
                }
            };
        }

        private CsrfTokenRepository csrfTokenRepository() {
            HttpSessionCsrfTokenRepository repository = new HttpSessionCsrfTokenRepository();
            repository.setHeaderName("X-XSRF-TOKEN");
            return repository;
        }
    }

}
</code></pre>

<p>this is my angular app</p>

<pre><code>angular.module('hello', [ 'ngRoute' ])
.config(function($routeProvider, $httpProvider) {

$routeProvider.when('/', {
    templateUrl : 'index.html',
    controller : 'home',
    controllerAs: 'controller'
}).when('/login', {
    templateUrl : 'login.html',
    controller : 'navigation',
    controllerAs: 'controller'
}).otherwise('/');

$httpProvider.defaults.headers.common['X-Requested-With'] ='XMLHttpRequest';

})
.controller('navigation',

    function($rootScope, $http, $location, $route) {

        var self = this;

        self.tab = function(route) {
            return $route.current &amp;&amp; route === $route.current.controller;
        };

        var authenticate = function(credentials, callback) {

            var headers = credentials ? {
                authorization : "Basic "
                        + btoa(credentials.username + ":"
                                + credentials.password)
            } : {};

            $http.get('user', {
                headers : headers
            }).then(function(response) {
                if (response.data.name) {
                    $rootScope.authenticated = true;
                } else {
                    $rootScope.authenticated = false;
                }
                callback &amp;&amp; callback($rootScope.authenticated);
            }, function() {
                $rootScope.authenticated = false;
                callback &amp;&amp; callback(false);
            });

        }

        authenticate();

        self.credentials = {};
        self.login = function() {
            alert("llllll");
            authenticate(self.credentials, function(authenticated) {
                if (authenticated) {
                    console.log("Login succeeded")
                    $location.path("/");
                    self.error = false;
                    $rootScope.authenticated = true;
                } else {
                    console.log("Login failed")
                    $location.path("/login");
                    self.error = true;
                    $rootScope.authenticated = false;
                }
            })
        };

        self.logout = function() {
            $http.post('logout', {}).finally(function() {
                $rootScope.authenticated = false;
                $location.path("/");
            });
        }

    }).controller('home', function($http) {
var self = this;
$http.get('/resource/').then(function(response) {
    self.greeting = response.data;
})
});
</code></pre>

<p>All works fine when i use just one server (tomcat) but i don't how to do it with appache for the frontend and tomcat for the backend.</p>

<p>Any help, advice and experience is welcome.</p>