SpringBootでWebアプリを製作中、タイトルの現象で沼ったのでメモ。何か間違っている部分があれば、ご指摘お願い致します。

使用ツール

Docker 23.0.4
windows11(wsl2)
Spring Boot3.1.0
pom.xmlの依存関係

	<dependencies>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-data-jdbc</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-security</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-thymeleaf</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>
		<dependency>
			<groupId>org.thymeleaf.extras</groupId>
			<artifactId>thymeleaf-extras-springsecurity6</artifactId>
		</dependency>

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-devtools</artifactId>
			<scope>runtime</scope>
			<optional>true</optional>
		</dependency>
		<dependency>
			<groupId>com.mysql</groupId>
			<artifactId>mysql-connector-j</artifactId>
			<scope>runtime</scope>
		</dependency>
		<dependency>
			<groupId>org.projectlombok</groupId>
			<artifactId>lombok</artifactId>
			<optional>true</optional>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
		</dependency>
		<dependency>
			<groupId>org.springframework.security</groupId>
			<artifactId>spring-security-test</artifactId>
			<scope>test</scope>
		</dependency>
		<!-- https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-validation -->
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-validation</artifactId>
			<version>3.1.0</version>
		</dependency>
		<!-- https://mvnrepository.com/artifact/org.webjars/bootstrap -->
		<dependency>
			<groupId>org.webjars</groupId>
			<artifactId>bootstrap</artifactId>
			<version>5.3.0</version>
		</dependency>
	</dependencies>

やりたいこと

BootStrapのCSSをログイン画面に適用する

手順

ログイン画面にアクセス

現象

ログイン画面にBootStrapのCSSが適用されない
開発者ツール(google chrome)のコンソール

Refused to execute script from 'http://localhost:18080/login' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

原因

SecurityConfigのrequestMatchers()でアクセス認可の設定をしていなかった。

SecurityConfig.java

    // 略
    @Configuration
    @EnableWebSecurity
    @EnableMethodSecurity
    public class SecutiryConfig {
        @Bean
        public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
            http.formLogin(login -> login
                .loginProcessingUrl("/sign_in")
                .loginPage("/login")
                .defaultSuccessUrl("/book/menu")
                .usernameParameter("userId")
                .passwordParameter("password")
                .failureUrl("/login?error")
                .permitAll()
            ).logout(logout -> logout
                .logoutSuccessUrl("/login")
            ).authorizeHttpRequests(authz -> authz
                .requestMatchers("/css/**").permitAll()
                .requestMatchers("/login").permitAll()
                .anyRequest().authenticated()
            );
            return http.build();
        }

        // 略
        }
    }

対処法

requestMatchers()の引数に"/webjars/**"を追記。

    // 略
    ).authorizeHttpRequests(authz -> authz
        .requestMatchers("/css/**", "/webjars/**").permitAll() // webjarsの下の階層の全てのファイル(BootStrapフォルダ含む)
        .requestMatchers("/login").permitAll()
        .anyRequest().authenticated()
    );
    // 略

参考