在使用Spring Security时，登录页面未应用BootStrap的CSS

我正在使用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();
}

// 略
}
}

处理方法 fǎ)

requestMatchers()の引数に”/webjars/**”を追記。
// 略
).authorizeHttpRequests(authz -> authz
.requestMatchers(“/css/**”, “/webjars/**”).permitAll() // webjarsの下の階層の全てのファイル(BootStrapフォルダ含む)
.requestMatchers(“/login”).permitAll()
.anyRequest().authenticated()
);
// 略

引用

• 【Spring Security】認証・認可の基礎

Spring Security loginページにcss適用できない(MIME type (‘text/html’) is not a supported…)