[Spring Security] CORS 설정

예전에는 프론트엔드 렌더링도 백앤드에서 처리해서 출처가 같았으나, 이제는 프론트, 백앤드가 서로 분리되어 있기 때문에 허용 설정을 해주어야 한다.

 

브라우저에서 출처가 다르면 block을 하는데, 브라우저에서 프론트엔드 페이지를 띄우는 서버가 다르고, 해당 프론트엔드에서 백엔드로 API 통신을 하여 데이터를 가져오면, 두개의 출처가 다르기 때문에 block을 하는것이다.

 

때문에 이를 방지하기 위해 서버에서 설정을 통해  프론트엔드와 동일한 출처임을 인식 시키도록 해야 한다.

나도 그랬고, CORS 설정이 서버인줄 알았는데 브라우저에서 한다. 즉 모바일 앱 같은 경우에는 따로 설정이 필요 없다는 소리이고, 브라우저를 이용하는 프론트엔드에만 필요한 설정이라는 것이다. 

 

아래는 CORS 설정 예 이다. 

@Configuration
@EnableWebSecurity
public class SecurityConfig {

    @Bean
    SecurityFilterChain filterChain(HttpSecurity http) throws Exception {

        http
            .cors(cors -> cors.configurationSource(request -> {
                CorsConfiguration config = new CorsConfiguration();

                config.setAllowCredentials(true); // 쿠키 허용
                config.setAllowedOrigins(
                    List.of("https://app.example.com")
                );
                config.setAllowedMethods(
                    List.of("GET", "POST", "PUT", "DELETE")
                );
                config.setAllowedHeaders(
                    List.of("Authorization","Content-Type", "X-XSRF-TOKEN")
                );
                config.setExposedHeaders(
                    List.of("Authorization","Content-Type", "X-XSRF-TOKEN")
                );
                config.setMaxAge(3600L);

                return config;
            }))

            .csrf(csrf -> csrf
                .csrfTokenRepository(
                    CookieCsrfTokenRepository.withHttpOnlyFalse()
                )
            )

            .authorizeHttpRequests(auth -> auth
                .anyRequest().authenticated()
            );

        return http.build();
    }
}

• setAllowedOrigins
  • 프론트엔드 페이지 주소를 적어서, 이 주소에서 오는건 허용하겠다 라는 의미.
  • 쿠키 사용시 * 를 사용하면 안된다. (보안 문제)
    
    
• setAllowedOriginPatterns
  • 와일드카드 기반 Origin 허용을 한다. 서브 도메인이 많아서 setAllowedOrigins로 설정하기 어려울 경우 사용한다.
  • 예 : setAllowedOriginPatterns(List.of("https://*.example.com"));
  • 너무 넒으면 CSRF 위험이 있으므로 최소범위를 정의해 준다.
    
    
• setAllowedMethods
  • 허용할 HTTP 메소드로서, *로 하지 말고 필요한 메소드만 정의해 준다. (보안 취약)
    
    
• setAllowedHeaders
  • 클라이언트가 보낼 수 있는 요청 헤더를 적는다. 토큰을 사용할 경우, 반드시 포함시켜 줘야 한다.
    • Authorization
    • X-XSRF-TOKEN (CSRF Token 사용시)
    • Content-Type
      
      
• setExposedHeaders
  • 매우 중요한 설정.  프론트엔드에서 읽을 수 있는 헤더를 허용해 준다. 만일 JWT 이용시 이 설정이 없으면, 서버에서 내려줘도 프론트엔드에서 토큰값을 읽을 수가 없다.
    
    
• setAllowCredentials
  • true, false 로 설정하며, 쿠키 / 인증정보 전송 허용 여부를 정한다.