Spring security is blocking Vue.js pages | receiving 403 error

Question

I have a Spring/Vuejs project that couples the frontend and backend into one warFile and for some reason the Spring Security setup I have blocks the Vue.js pages when I run the warFile.

When I have the Configuration set this way, it blocks the pages -

@Override
public void configure(HttpSecurity security) throws Exception {
    security.csrf().disable()
            .cors().and()
            .authorizeRequests()
            .antMatchers("/api/v1/authenticate", "/api/v1/register").permitAll()
            .anyRequest().authenticated().and().sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS);
    security.addFilterBefore(jwtRequestFilter, UsernamePasswordAuthenticationFilter.class);
}

When I have it set up this way, it shows the pages AND the data from my api's (it creates the JWT but still allows the api calls without Authorization) -

@Override
public void configure(HttpSecurity security) throws Exception {
    security.csrf().disable()
            .cors().and()
            .authorizeRequests()
            .antMatchers("/api/v1/authenticate", "/api/v1/register", "/**","/css/**","/js/**").permitAll()
            .anyRequest().authenticated().and().sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS);
    security.addFilterBefore(jwtRequestFilter, UsernamePasswordAuthenticationFilter.class);
}

When I have it setup the first way and run the frontend and backend on different ports, it works perfectly. It shows the pages and blocks all API calls that don't have an authorized JWT.

I want the same type of result with backend/frontend in the same warFile

Is there a solution for this???

Answer 1

When I have it setup the first way and run the frontend and backend on different ports, it works perfectly.

I wonder if this is due to the CORS policy being invoked. Otherwise, Spring Security doesn't take the port number into consideration when making authorization decisions.

When I have the Configuration set this way, it blocks the pages -

That's because you have this line:

.anyRequest().authenticated()

It means that any URL, including JS files, will require authentication.

When I have it set up this way, it shows the pages AND the data from my api's

That's because you have this line:

.antMatchers("/**").permitAll()

It means that any URL is permitted.

The DSL processes URLs in the order the paths are declared. I think you want a hybrid of the two. Something like this:

.antMatchers("/api/v1/authenticate", "/api/v1/register", "/css/**","/js/**").permitAll()
.anyRequest().authenticated()

This means that the two /api endpoints all /css endpoints and all /js endpoints won't require authentication, but everything else will.

Consider making the permitAll as narrow as you can -- it's not clear to me whether you really want all your JS files to not require authentication.