Add CSS file to Spring Boot + Spring Security Thymeleaf file

Question

I wanted to add CSS file to my HTML file. The problem appeared when I tried to add CSS to Spring Security application (I work on basic Spring Getting Started Content). I blame Spring Security because without it the CSS file loads properly.

Application.java file:

package mainpack;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class Application {

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

MvcConfig.java file:

package mainpack;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;

@Configuration
public class MvcConfig extends WebMvcConfigurerAdapter {

    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/home").setViewName("home");
        registry.addViewController("/").setViewName("home");
        registry.addViewController("/hello").setViewName("hello");
        registry.addViewController("/login").setViewName("login");
        registry.addViewController("/index").setViewName("index");
        registry.addViewController("/register").setViewName("register");
        registry.addViewController("/whatever").setViewName("whatever");
    }
}

WebSecurityConfig.java file:

package mainpack;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Configuration;
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.config.annotation.web.configuration.EnableWebSecurity;

@Configuration
@EnableWebSecurity
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
            .authorizeRequests()
                .antMatchers("/", "/home", "/index", "/register", "../static/css", "../static/images").permitAll()
                .anyRequest().authenticated()
                .and()
            .formLogin()
                .loginPage("/login")
                .permitAll()
                .and()
            .logout()
                .permitAll();
    }

    @Autowired
    public void configureGlobal(AuthenticationManagerBuilder auth) throws Exception {
        auth
            .inMemoryAuthentication()
                .withUser("user").password("password").roles("USER");
    }
}

I load CSS with line:

<link href="../static/css/index.css" th:href="@{/css/index.css}" rel="stylesheet" />

in index.html file.

Answer 1

Your pattern ../static/css is not matching your relative URL ../static/css/index.css, see AntPathMatcher:

PathMatcher implementation for Ant-style path patterns.

Part of this mapping code has been kindly borrowed from Apache Ant.

The mapping matches URLs using the following rules:

• ? matches one character
• * matches zero or more characters
• ** matches zero or more directories in a path
• {spring:[a-z]+} matches the regexp [a-z]+ as a path variable named "spring"

and Spring Boot Reference:

By default, resources are mapped on /** but you can tune that via spring.mvc.static-path-pattern.

Your request will be redirected to login form, because your are not logged in and all other requests need authentication.

To fix it, change your pattern to /css/** and /images/**.

A better solution for static resources is WebSecurity#ignoring:

Allows adding RequestMatcher instances that Spring Security should ignore. Web Security provided by Spring Security (including the SecurityContext) will not be available on HttpServletRequest that match. Typically the requests that are registered should be that of only static resources. For requests that are dynamic, consider mapping the request to allow all users instead.

Example Usage:

 webSecurityBuilder.ignoring()
 // ignore all URLs that start with /resources/ or /static/
                .antMatchers("/resources/**", "/static/**");