0

I deployed my project on Heroku and noticed that the project didn't fetch the css properly when I opened the website. As soon as I logged in and opened the website again, the css was there, even if I go to the login page again the css is already there properly. I don't understand: enter image description here

So, I logged in and I've got this:

enter image description here

Finally, I opened the website again and everything (css, js) was loaded properly. enter image description here I checked every related topic and tried every combination and always got the same. My configuration should be fine for not having this issue. I hope somebody can help me to fix it. I copied my configuration and every help would be greatly appreciated. enter image description here

login.html

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:th="http://www.thymeleaf.org"
    xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">

<head> 
<!-- Required meta tags --> 
<meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 

<!--CSS-->
<!--We are choosing these two to let the browser to load faster--> 


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

<!--this is the last one so that we can override previous boostrap styles if we want--> 


</head>

    <body class="signin-body">
      <!-- <div class="container signin-container" layout:fragment="loginContent"> -->  
            <div class="row">
                <div class="col"></div>
                <div class="col-sm-12 col-md-8">
                    <div class="card signin-card">
                        <div class="card-block">
                            <img th:src="@{/imgages/logindetails.png}" width="50%" height="50%" class="img-fluid signin-img"/> 
                            <form name="login" th:action="@{/login}" method="post" class="form-signin">
                                <div class="form-group">
                                <h2 class="form-signin-heading">Please sign in</h2>
                                    <div th:if="${param.error}" class="alert alert-danger">Wrong username and password</div>
                                    <div th:if="${param.logout}" class="alert alert-success">You successfully logged out</div>
                                    <label for="username" class="sr-only">Username</label>
                                    <input type="text" id="username" name="username" class="form-control" placeholder="Username" required="true">
                                </div>
                                    <label for="password" class="sr-only">Password</label>
                                <div class="form-group">
                                <input type="password" id="password" name="password" class="form-control" placeholder="Password" required="true">
                                </div>
                                    <div class="checkbox">
                                    <label>
                                       <input id="remember-me" name="remember-me" type="checkbox">Remember me
                                    </label>                                
                                <button class="btn btn-lg btn-primary btn-block signin-btn" type="submit">Login</button>
                                    </div>
                            </form>
                        </div>
                </div>
                <a class= "new-account" href="/registration">Create New Account</a>
            </div>
        <div class="col"></div>
    </div>

        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
        <script src="css/bootstrap-4.3.1-dist/js/bootstrap.min.js"></script>
    </body>

</html>

SecurityConf.java

@EnableGlobalMethodSecurity(securedEnabled=true)
@Configuration
public class SecurityConf extends WebSecurityConfigurerAdapter {

    @Bean
    public UserDetailsService userDetailsService() {
        return super.userDetailsService();  
    }
    private UserDetailsService userService;

    @Autowired
    public void setUserService(UserDetailsService userService) {
        this.userService = userService;
    }
    @Autowired
    public void configureAuth(AuthenticationManagerBuilder auth) {

        try {
            auth
            .inMemoryAuthentication()
                .withUser("user")
                .password("{noop}user") 
                .roles("USER")
            .and()
                .withUser("admin")
                .password("{noop}admin")
                .roles("ADMIN");
        } catch (Exception e) {
             System.out.println(" " + e.getMessage());
        }
    }
    @Override
    protected void configure(HttpSecurity httpSec) {

        try {
            httpSec.authorizeRequests()
            //  .antMatchers(HttpMethod.GET, "/").permitAll()
            //  .antMatchers("/delete").hasRole("ADMIN)")
                .antMatchers("/login", "/*.css", "/*.js").permitAll()
                .antMatchers("/admin/**").hasRole("ADMIN")
                .antMatchers("/registration").permitAll()
                .antMatchers("/reg").permitAll()
                .anyRequest().authenticated()
            .and()
                .formLogin()
                .loginPage("/login")
                .permitAll()
            .and()
                .logout()
                .logoutSuccessUrl("/login?logout")
                .permitAll();
        } catch (Exception ex) {
            System.out.println(" " + ex.getMessage());
        }
    }
}
Mark Rotteveel
  • 100,966
  • 191
  • 140
  • 197
HuserB1989
  • 358
  • 5
  • 16
  • 1
    Does this answer your question? [Spring Boot serving static content blocked by security](https://stackoverflow.com/questions/53614958/spring-boot-serving-static-content-blocked-by-security) – Tommy Brettschneider Mar 22 '20 at 14:20
  • No It didn't help. I can't use my own created login page for some reason. It works only if I remove `.anyRequest().authenticated()` that I don't want to :) – HuserB1989 Mar 22 '20 at 15:02

1 Answers1

1

You need to override the method below in your WebSecurityConfigurerAdapter implementation class to specify the folder(s) that contain files which should still be served by Spring Boot even when not being authenticated yet.

@Override
public void configure(WebSecurity webSecurity) throws Exception {
    webSecurity
        .ignoring()
        .antMatchers("/static/**");
}