Springboot won't load CSS folders after implementing web security & mvc configuration

Question

I tried to implement this example but in my case, i have some static css files i have to include.

Regarding the css issue i tried putting th:href="@{PATH} attribute on html links but it didn't work for me.

My application on the security side, works almost as the example above.

In my project instead of being redirected to hello.html i'm being redirected to an image url.

This is the html templates, in which i used Thymeleaf:

login.html


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:th="https://www.thymeleaf.org"
    xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
<title>Speak Up</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--===============================================================================================-->
<link rel="icon" type="image/png"
    href="logincss/images/icons/favicon.png" />
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css"
    href="logincss/vendor/bootstrap/css/bootstrap.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css"
    href="logincss/fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css"
    href="logincss/fonts/iconic/css/material-design-iconic-font.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css"
    href="logincss/vendor/animate/animate.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css"
    href="logincss/vendor/css-hamburgers/hamburgers.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css"
    href="logincss/vendor/animsition/css/animsition.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css"
    href="logincss/vendor/select2/select2.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css"
    href="logincss/vendor/daterangepicker/daterangepicker.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="logincss/css/util.css">
<link rel="stylesheet" type="text/css" href="logincss/css/main.css">

<!--===============================================================================================-->
</head>
<body>

    <div class="limiter">
        <div class="container-login100"
            style="background-image: url('logincss/images/bg-01.jpg');">
            <div class="wrap-login100">

                <form class="login100-form validate-form" action="#"
                    th:action="@{/login}" method="post">


                    <span class="login100-form-logo"> <img
                        src="logincss/images/icons/favicon.png" />
                    </span> <span class="login100-form-title p-b-34 p-t-27"> Log in </span>

                    <!-- This is from the Spring Security example-->
                    <div th:if="${param.error}">Invalid username and password.</div>
                    <div th:if="${param.logout}">You have been logged out.</div>

                    <div class="wrap-input100 validate-input"
                        data-validate="Enter username">
                        <input class="input100" type="text" name="username"
                            placeholder="Username"> <span class="focus-input100"
                            data-placeholder="&#xf207;"></span>
                    </div>

                    <div class="wrap-input100 validate-input"
                        data-validate="Enter password">
                        <input class="input100" type="password" name="password"
                            placeholder="Password"> <span class="focus-input100"
                            data-placeholder="&#xf191;"></span>
                    </div>



                    <div class="contact100-form-checkbox">
                        <input class="input-checkbox100" id="ckb1" type="checkbox"
                            name="remember-me"> <label class="label-checkbox100"
                            for="ckb1"> Remember me </label>
                    </div>

                    <div class="container-login100-form-btn">
                        <button class="login100-form-btn">Login</button>
                    </div>

                    <div class="text-center p-t-90">
                        <a class="txt1" href="#"> Forgot Password? </a> <br> <a
                            class="txt1" href="/register"> Don't have an account?
                            Register now! </a>
                    </div>
                </form>
            </div>
        </div>
    </div>


    <div id="dropDownSelect1"></div>

    <!--===============================================================================================-->
    <script src="logincss/vendor/jquery/jquery-3.2.1.min.js"></script>
    <!--===============================================================================================-->
    <script src="logincss/vendor/animsition/js/animsition.min.js"></script>
    <!--===============================================================================================-->
    <script src="logincss/vendor/bootstrap/js/popper.js"></script>
    <script src="logincss/vendor/bootstrap/js/bootstrap.min.js"></script>
    <!--===============================================================================================-->
    <script src="logincss/vendor/select2/select2.min.js"></script>
    <!--===============================================================================================-->
    <script src="logincss/vendor/daterangepicker/moment.min.js"></script>
    <script src="logincss/vendor/daterangepicker/daterangepicker.js"></script>
    <!--===============================================================================================-->
    <script src="logincss/vendor/countdowntime/countdowntime.js"></script>
    <!--===============================================================================================-->
    <script src="logincss/js/main.js"></script>

</body>
</html>

hello.html in which i'm not being redirected (although the authentication works)


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="https://www.thymeleaf.org"
      xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
    <head>
        <title>Hello World!</title>
    </head>
    <body>
        <h1 th:inline="text">Hello [[${#httpServletRequest.remoteUser}]]!</h1>
        <form th:action="@{/logout}" method="post">
            <input type="submit" value="Sign Out"/>
        </form>
    </body>

home.html


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="https://www.thymeleaf.org" xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
    <head>
        <title>Spring Security Example</title>
    </head>
    <body>
        <h1>Welcome!</h1>

        <p>Click <a th:href="@{/hello}">here</a> to see a greeting.</p>
    </body>
</html>

My MVC Configuration:


@Configuration
public class MvcConfig implements WebMvcConfigurer {

    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/home").setViewName("home");
        registry.addViewController("/").setViewName("home");
        registry.addViewController("/hello").setViewName("hello");
        registry.addViewController("/login").setViewName("login");

    }

     @Override
        public void addResourceHandlers(ResourceHandlerRegistry registry) {
            registry
                    .addResourceHandler("/resources/**")
                    .addResourceLocations("/classpath:/static/");
        }

}

my class extending WebSecurityConfigurerAdapter


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


    }

    @Bean
    @Override
    public UserDetailsService userDetailsService() {
        UserDetails user =
             User.withDefaultPasswordEncoder()
                .username("user")
                .password("password")
                .roles("USER")
                .build();

        return new InMemoryUserDetailsManager(user);
    }
}

Spring security dependencies:


<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-security</artifactId>
</dependency>

<dependency>
    <groupId>org.springframework.security</groupId>
    <artifactId>spring-security-test</artifactId>
    <scope>test</scope>
</dependency>

Thymeleaf dependancy:


<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
    <version>2.2.2.RELEASE</version>
</dependency>

Project's Structure:

Only hello.html home.html and login.html are being used for this example.

Output

This is what the login.html looks like without logincss folder:

And upon successful login i'm being redirected here(instead of hello.html):

How can i correctly refer to the static css and redirect the user to hello.html?

I'm sorry for the long post.

S B · Accepted Answer · 2020-01-11 15:07:27Z

1

You need to allow access to logincss and any other static resources (js, images, etc) directories in the Spring Security configuration. In your configure method, add .antMatchers("/logincss/**").permitAll().

Similarly add antMatcher for "/templates/**".

Reference configuration in Spring Documentation for additional reading here.

As regards redirection on successful login to hello.html, you need to add the configuration for defaultSuccessUrl("/hello.html"). Reference Documentation here.

edited Jan 11, 2020 at 15:07

answered Jan 11, 2020 at 15:01

S B

3942 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Phill Alexakis Over a year ago

Thanks , css working like a charm , in which object do i add defaultSuccessUrl("/hello.html") ?

Phill Alexakis Over a year ago

i think i found it and ti works! thank you! i added it to .formLogin() .loginPage("/login") .defaultSuccessUrl("/hello") .permitAll() .and()

S B Over a year ago

In configure method itself, can add as .loginPage("/login").permitAll().defaultSuccessUrl ("/hello.html").and().....

Phill Alexakis Over a year ago

yes, hello is already an endpoint so i don't have to meniton the .html ending , thank u!

Collectives™ on Stack Overflow

Springboot won't load CSS folders after implementing web security & mvc configuration

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related