Spring Security を使用したプログラムにCSSを適用したい

はじめに

Spring Security を使用したプログラムを作成しているのですが、CSSが適用されない！という問題に当たったので、解決法を備忘として残します。

問題点と原因の確認

問題と期待値

CSSが適用されない。。。

こんな感じで表示したい！

原因はこれだ！

Devtoolからネットワークを確認すると、CSSが302でリダイレクトされてるっぽい。
今回Spring Security でログイン済みか否かで見れるページを制御しているため、CSSもそれに引っかかっているのでは。

コードの修正

src/main/java
　- package com.example.securingweb

requestMatchersにCSSのパスを追加。どうやらCSSもセキュリティの管理下に置かれてたっぽい。盲点！

.requestMatchers("/", "/home", "/header-navi" , "/css/**").permitAll()

修正後

WebSecurityConfig.java

@Configuration
@EnableWebSecurity
public class WebSecurityConfig {

	
	//保護するURLパスと保護しないURLパスを定義する
	@Bean
	public SecurityFilterChain secruSecurityFilterChain(HttpSecurity http) throws Exception {
		http
		.authorizeHttpRequests((requests) -> requests
			.requestMatchers("/", "/home", "/header-navi" , "/css/**").permitAll()
			.anyRequest().authenticated()
		)
		.formLogin((form) -> form
			.loginPage("/login")
			.permitAll()
		)
		.logout((logout) -> logout
			.logoutUrl("/logout")
			.logoutSuccessUrl("/home")
			.permitAll()
		);

	return http.build();
	}

    (略)

修正前

WebSecurityConfig.java

@Configuration
@EnableWebSecurity
public class WebSecurityConfig {

	
	//保護するURLパスと保護しないURLパスを定義する
	@Bean
	public SecurityFilterChain secruSecurityFilterChain(HttpSecurity http) throws Exception {
		http
		.authorizeHttpRequests((requests) -> requests
			.requestMatchers("/", "/home", "/header-navi").permitAll()
			.anyRequest().authenticated()
		)
		.formLogin((form) -> form
			.loginPage("/login")
			.permitAll()
		)
		.logout((logout) -> logout
			.logoutUrl("/logout")
			.logoutSuccessUrl("/home")
			.permitAll()
		);

	return http.build();
	}

    (略)