SpringBoot Thymeleaf login redirect to index loads html but not css and js

Question

I have a springboot application where I authenticate a user and if he is logged in I redirect him to the index.html. However, this index page just loads the plain .html and no js or css at all. I don't see any error in the server error logs nor in the browser's console. I have tried disabling spring security on my css files to no effect.

Here is my project structure:

resources
- static
  - css_general
  - css_page_specific
  - login.html
  - index.html
  - commons.js

Here is my application.properties config. I have pointed thymeleaf's default path to static folder so that I can at least get this running first.

spring.thymeleaf.prefix=classpath:/static/

I have disabled spring security on static stuff. Here is My WebSecurityConfig.java

@Override
protected void configure(HttpSecurity http) throws Exception {

    http.requiresChannel().anyRequest().requiresSecure().and().authorizeRequests().antMatchers("/login","/css_general/**","/css_page_specific/**","/**/*.js","/**/*.css")
        .permitAll()
        .anyRequest()
        .authenticated()
        .and().formLogin(form -> form
            .loginPage("/login")
            .defaultSuccessUrl("/index.html")
            .failureUrl("/login?error=true")
        )
        .sessionManagement().invalidSessionUrl("/login")
        .and()
        .httpBasic()
        .and()
        .logout().logoutRequestMatcher(new AntPathRequestMatcher("/logout")).logoutSuccessUrl("/login")
        .permitAll()
        .and()
        .cors().disable()
        .csrf().disable();
}

@Override
public void configure(WebSecurity web) throws Exception {
    web.ignoring().antMatchers("/css_general/**", "/css_page_specific/**","/resources/static/css_general/**","/resources/static/css_page_specific/**","/static/css_page_specific/**","/static/css_general/**");
}

Here is my LoginController.java

    @Controller
public class LoginController {

    @GetMapping("/login")
    public String showLoginForm(Model model) {

        Authentication authentication = SecurityContextHolder.getContext().getAuthentication();
        if (authentication == null || authentication instanceof AnonymousAuthenticationToken) {
            return "login";
        }

        return "redirect:/";
    }

    @GetMapping("/logout")
    public String logoutPage(HttpServletRequest request, HttpServletResponse response) {
        Authentication auth = SecurityContextHolder.getContext().getAuthentication();
        if (auth != null){
            new SecurityContextLogoutHandler().logout(request, response, auth);
        }
        return "redirect:/";
    }
}

Imported files on my index.html:

    <html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head id="Head1" >
<title>Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"/>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE11"/>
 <link rel="stylesheet" th:href="@{css_page_specific/index.css}">
<link rel="stylesheet" th:href="@{css_general/toggle-button-modern.css}">
<link rel="stylesheet" th:href="@{css_general/data-table-modern.css}">
<link rel="stylesheet" th:href="@{css_general/combobox-modern.css}">
<link rel="stylesheet" th:href="@{css_general/dropdown-modern.css}">
<link rel="stylesheet" th:href="@{css_general/radio-modern.css}">
<link rel="stylesheet" th:href="@{css_general/grid-modern.css}">
<link rel="stylesheet" th:href="@{css_general/input-modern.css}">
<link rel="stylesheet" th:href="@{css_general/button-modern.css}">

 <script type="text/javascript" th:src="@{commons.js}"></script>
<script type="text/javascript" th:src="@{js_page_specific/index.js}"></script>
</head>

However, on succesful login, I just see the html of index.html and no css or js loaded at all. There's no error in the console either.

I do see a 302 redirect from login and a 200 on index.

Also, if I see the elements tab on the browser for the index.html, thymeleaf hasn't really resolved the href tags.

If on my browser, I make a request to https://localhost:8443/index.css it just spews out the whole css as is.

I have looked through all the answers on stackoverflow but none of the solutions work for me. Will appreciate any help and guidance.

If you're seeing th: attributes in the browser (when viewing the source), Thymeleaf isn't rendering your templates. You need to configure Thyemeleaf to run. — Metroids
– Metroids, Commented May 13, 2021 at 14:20
It is rendering the login.html page perfectly fine. Thymeleaf seems to be resolved perfectly fine in that case. Plus, both index and login.html are inside static where I'm pointing my thymeleaf to. If thymeleaf can find login, what do I need to do for it to find index? — jkasper
– jkasper, Commented May 13, 2021 at 15:10
Ah, I see. You need a controller with a method annotated with @GetMapping("/index") that has return "index"; and your .defaultSuccessUrl("/index.html") should instead be .defaultSuccessUrl("/index") I'm guessing. — Metroids
– Metroids, Commented May 13, 2021 at 15:14

Metroids · Accepted Answer · 2021-05-13 16:35:38Z

The reason this happens is because you are storing your templates in /static (which lets you access those files without running them through the regular parsing and rendering processes of Thymeleaf). Accessing /index.html returns the file as static html. In order to fix this you need to:

Create another controller (or add another method to your login controller) that serves index.html through the Thymeleaf renderer.

 @Controller
 public class IndexController {

   @GetMapping("/index")
   public String showIndex(Model model) {
     return "index";
   }
 }

Change your login to redirect to /index instead of /index.html.

 .and().formLogin(form -> form
     .loginPage("/login")
     .defaultSuccessUrl("/index")
     .failureUrl("/login?error=true")
 )

(I would recommend putting your templates into a separate folder -- usually this is somewhere on the classpath -- as the way you have it right now, you are giving users the ability to view the source code or your templates which may expose security vulnerabilities).

Collectives™ on Stack Overflow

SpringBoot Thymeleaf login redirect to index loads html but not css and js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related