[Thymeleaf] CSS 파일 적용 안됨 - 경로 설정, Spring Security 정적 파일 권한 허용

Spring boot 프로젝트에서 css 파일 적용이 안되는 경우 여러가지 원인이 있을 수 있다.

경로 인식 문제

• css, js 파일이 /resources/static 경로에 위치해 있는지 확인한다.
  

• html 파일에 import 경로를 확인한다.
  href="{css/style.css}" ( X )
  href="{/css/style.css}" ( O )
  Thymeleaf를 이용하는 경우는
  th:href="@{/css/style.css}"
  

• application.yml 파일에 정적 파일 경로를 직접 지정해본다.

thymeleaf:
    prefix=classpath: templates/
    suffix: .html
    check-template-location: true
    cache: false
  mvc:
    static-path-pattern: "/static/**"

prefix: 파일의 시작위치
suffix: 파일의 확장자명
check-template-location: 파일의 존재 여부 확인
cache: 캐시 저장 여부
static-path-pattern: 정적 파일 경로 지정

• 정적 파일 내부의 경로를 확인해 본다.
  https://velog.io/@dev-jih/bootstrap-Spring-boot-thymeleaf-연동시-js-css-파일-경로-인식하지-못하는-404-에러-해결

참고

• https://stackoverflow.com/questions/32116829/spring-mvc-css-does-not-work-when-adding-slash-at-the-end-of-url
• https://velog.io/@hongcheol/Spring-Bootlocalhost로-테스트할-때-CSS-적용-오류-해결-방법

---

Spring Security 설정 시 정적 파일 권한 허용 여부 확인

내 경우에는 로그인 하기 전에는 css 적용이 안되고 로그인을 하면 잘 적용이 돼서 security 설정을 살펴보니 css, js 파일에 권한 허용을 해주지 않았다.

서버에 요청이 들어오면 Spring Security가 해당 자원에 접근할 수 있는 지 권한 감사를 하게 되는데 기본적으로 정적인 파일 까지도 보안 필터를 거치기 때문에 정적 파일에 대한 권한 허용을 설정해 주어야 한다.

• HttpSecurity

protected void configure(HttpSecurity http) throws Exception {
	http
		.authorizeRequests()
		.mvcMatchers("/","/css/**","/scripts/**","/plugin/**","/fonts/**")
    	.permitAll()
}

• WebSecurity

public void configure(WebSecurity web) throws Exception {
    web
        .ignoring()
        .antMatchers("/resources/**");
}

참고

• https://anjoliena.tistory.com/67
• http://daplus.net/java-httpsecurity-websecurity-%EB%B0%8F-authenticationmanagerbuilder/