TroubleShooting: H2 Database + Spring Security CSP Issue

H2 Database + Spring Security CSP Issue

발생한 문제

기존 h2 콘솔은 webSecurityConfig 파일에서 접속을 허용하여 잘 나옴.

그런데 접속을 하면 다음과 같이 로컬 호스트에서 연결을 거부했다고 뜨며 div 태그가 먹통됨.

해결 및 시도 방법

1. 구글링 - h2 Security 설정과 관련된 키워드로 구글링
   • 최초 결과는 단순히 console을 보여줄 것 인지에 대한 트러블 슈팅 정리 글이 있었음
     • spring.h2.console.enable=true로 변경하라는 대처 방법
     • 본인은 그 전에도 잘 사용하고 있었기 때문에 이 문제가 아님.
   • 판단하기에 webSecurity 객체를 통해서 인증, 인가 처리를 모두 제외(아래 코드 참조)시키면 잘 작동되는 것으로 보아 다른 옵션에 대한 해제가 필요해 보였음.
     • 검색하다보니 header의 X-Frame-Options에 대한 처리를 해주어야 하는 것으로 나와서 처리를 해주니 작동함.

    // h2-console 접근 해제하기 위한 구성
    // 파비콘 관련 요청은 Spring Security 로직 수행 해제
    @Bean // Security 추가 설정하도록 빈 생성
    public WebSecurityCustomizer WebSecurityCustomizer() throws Exception {
        return (web) -> {
            web
                    .ignoring() // 진입 허용하도록 시큐리티 무시
                    .antMatchers(   // 다음 주소에 접근할 때
                            "/h2-console/**"
                            , "/favicon.ico"
                    );
       };
   }

• h2를 사용할 때 관리해주어야 하는 인증, 인가 문제들.
  1. URL("/h2-console/*") 자체에 대한 허용.
  2. CSRF 중지
  3. X-Frame-Options in Spring Security 중지.

세부사항 변화

기존

http 옵션 추가.

    @Bean // Security 추가 설정하도록 빈 생성
    public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
        // 모든 API 에 대해 CSRF 보안 기능 끔
        http.csrf().disable();
...생략

수정

http.header.x-frame 옵션 추가.

    @Bean // Security 추가 설정하도록 빈 생성
    public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
        // 모든 API 에 대해 CSRF 보안 기능 끔
        http.csrf().disable()
                .headers().addHeaderWriter(new StaticHeadersWriter("X-Content-Security-Policy","script-src 'self'")).frameOptions().disable();
...생략

결과

webSecurity를 통해 인증, 인가 처리를 모두 끄지 않고도 만들어 놓은 jwt 토큰 필터와 formLoginFilter를 통하여 h2-console이 출력되도록 완성.

X-Content-Security-Policy

콘텐츠 보안 정책(Content-Security policy)은 신뢰할 수있는 웹 페이지 컨텍스트에서 악의적 인 콘텐츠 실행으로 인한 크로스 사이트 스크립팅, 클릭 재킹 및 기타 코드 삽입 공격을 방지하기 위해 도입 된 컴퓨터 보안 표준이다.

웹에서 사용하는 컨텐츠(이미지, 스프립트 등)에 대한 규칙이라고 볼 수 있다.

SCP의 대표적인 헤더들

• Content-Security-Policy : W3C에서 지정한 표준헤더, 대부분 이걸 사용
• X-Content-Security-Policy : Firefox/IE 구형 브라우저에서 사용되는 헤더
• X-WebKit-CSP : Chrome 기반의 구형 브라우저에서 사용되는 헤더

코드 설명

CSP 정책을 해결해 주기 위해 위의 코드에서 "script-src 'self'" 부분을 주목하자면 self는 현재 출처와 일치하지만 하위 도메인은 일치 하지 않음을 나타 낸다고 한다.

다음은 구글 개발 페이지의 설명입니다.

script가 악의적이지 않음을 명시하고 script 사용을 허용하도록 옵션을 걸어줌으로써 h2의 콘솔이 작동하도록 도와주는 것 같습니다.

회고

처음 문제를 맞닥드렸을 때 어떻게 검색을 해야하나 막막 했는데 다행히도 비슷한 사례가 있어서 쉽게 정리되었던 것 같다. X-Frame이라는 속성이 있는지도 몰랐기 때문에 아마 큰 고생을 했을 것 같다. 이번 기회를 통해 HTTP에 대한 공부를 더 해야함을 느낀 것 같다.