[Spring] CORS 개념과 Spring Security 6 설정 톺아보기

0. CORS

개발할 때 정말 많이 마주치게 되는 CORS를 제대로 알아보자.

 

CORS (Cross-Origin Resource Sharing)

HTTP 헤더를 이용하여 웹 애플리케이션에 대한 자원을 다른 출처에서 접근할 수 있도록 권한을 부여하는 정책.

 

여기서 '출처'란, 도메인, 프로토콜, 포트를 뜻한다.

 

자원을 호출한 클라이언트와 자원을 내뱉은 사이트가 도메인, 프로토콜, 포트가 다르다면 "브라우저" 에서 막는다는 것이다.

 

 

만약, CORS 정책이 없다면..

해킹 시나리오 #1
1. 사용자가 어떤 해킹용 사이트에 접속한다.
2. 해당 해킹용 사이트에서 실행되는 js에서는 사용자 브라우저에 있는 쿠키, 세션 등을 이용하여 다른 사이트에 인증, 인가를 시도한다.
3. 해킹용 사이트는 CORS 정책이 없다면 다른 사이트의 리소스를 얻는다.

 

브라우저가 막아주는 안전한 정책이다 ^_^

 

한 마디로 정리하자면,

 

 

서버 입장에서 주소, 프로토콜, 포트가 달라도 리소스를 허용할건데,

어느 도메인에서 해당 리소스를 사용해도 되는지?를 허용하는 정책.

 

 

0-1. SOP(Same-Origin Policy)

 

동일 출처 정책이라고도 하며, 같은 출처에서만 리소스를 공유하는 규칙을 가진다.

 

최근엔 거의 REST API를 이용하기 때문에 웬만하면 도메인이 다른 건 어쩔 수 없다.

 

가장 안전한 방법이지만 이젠 CORS 정책을 지킨 리소스를 허용해야 한다.

 

 

 

 

 

1. Preflight

Preflight는 클라이언트가 서버에게 미리 허용 가능한지 확인하는 방법이다.

 

클라이언트가 OPTIONS Method로 먼저 서버에게 리소스 요청이 가능한지 묻게된다.

Preflight 요청

 

 

preflight 방식으로 OPTIONS 메서드로 요청을 한 순간이다.

 

Request Header

Request Header는 다음과 같다.

 

- Origin (출처) : 클라이언트가 요청을 보내는 본인의 출처.

 

- Access-Control-Request-Method : 클라이언트가 요청을 보내는 HTTP 메서드.

 

- Access-Control-Request-Headers : 클라이언트가 요청을 보내는 헤더.

 

Response Header

 그에 해당한 Response Header를 살펴보자.

 

- Access-Control-Allow-Credentials : 자격 증명(쿠키, 토큰 등)을 포함한 요청을 허용할 지 여부.

true 또는 false.

해당 헤더가 true로 설정된 경우, Access-Control-Allow-Origin은 wildcard(*)를 사용할 수 없고 명시적인 출처를 지정해야 함.

 

실제로, credentials를 true로 설정하고 Allow Origin에 와일드카드(*)를 사용하면 스프링에서 다음과 같은 오류를 던진다.

java.lang.IllegalArgumentException: When allowCredentials is true, 
allowedOrigins cannot contain the special value "*" 
since that cannot be set on the "Access-Control-Allow-Origin" response header. 
To allow credentials to a set of origins, 
list them explicitly or consider using "allowedOriginPatterns" instead.

 

- Access-Control-Allow-Headers : 해당 도메인에 대해 서버가 허용하는 헤더.

 

- Access-Control-Allow-Methods : 해당 도메인에 대해 서버가 허용하는 HTTP 메서드. 

 

- Access-Control-Allow-Origin : 서버에서 허용한 Origin(출처)

 

- max-age : Preflight는 요청을 두 번 보내면서 리소스를 많이 사용하게 되는데, 이를 관리하고자 브라우저는 첫 요청에 캐시를 저장해둔

다. 서버는 이 캐시를 저장할 시간을 지정해준다.

 

 

2. Simple Reqeust

 

Simple Request 방식은 Preflight를 선행하지 않고 요청을 즉시 전송한다.

 

하지만 조건이 있다.

 

1. HTTP 메서드는 반드시 GET, POST, HEAD여야 한다.

 

2. Content-Type은 다음 중 하나여야 한다.

- application/x-www-form-unlencoded

- multipart/form-data

- text/plain

 

보통 인가를 위한 Authorization이나, REST API용 application/json을 정의할 수 없다.

따라서 일부 경우에만 쓰인다.

 

3. Reqeust 헤더는 다음만 허용된다.

- Accept

- Accept-Langugage

- Content-Language

- Content-Type

 

 

 

3. CorsConfig

 

그렇다면 이제 Spring Boot에서 Cors를 설정하는 방법을 알아보자.

 

*Spring Boot 3, Spring Security 6.x.x 기준

@NoArgsConstructor(access = AccessLevel.PRIVATE)
public class CorsConfig {

    public static CorsConfigurationSource corsConfigurationSource() {
        CorsConfiguration configuration = new CorsConfiguration();

        //리소스를 허용할 URL 지정
        ArrayList<String> allowedOriginPatterns = new ArrayList<>();
        allowedOriginPatterns.add("http://localhost:5000");
        allowedOriginPatterns.add("http://127.0.0.1:5000");
        configuration.setAllowedOrigins(allowedOriginPatterns);

        //허용하는 HTTP METHOD 지정
        ArrayList<String> allowedHttpMethods = new ArrayList<>();
        allowedHttpMethods.add("GET");
        allowedHttpMethods.add("POST");
        allowedHttpMethods.add("PUT");
        allowedHttpMethods.add("DELETE");
        configuration.setAllowedMethods(allowedHttpMethods);

        configuration.setAllowedHeaders(Collections.singletonList("*"));
//        configuration.setAllowedHeaders(List.of(HttpHeaders.AUTHORIZATION, HttpHeaders.CONTENT_TYPE));

        //인증, 인가를 위한 credentials 를 TRUE로 설정
        configuration.setAllowCredentials(true); 

        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", configuration);

        return source;
    }
}

 

먼저, 나는 CorsConfig 정책 클래스를 따로 분리하고 config를 return하는 static 메서드를 만들었다.

 

각 허용할 패턴들은 보통 String 값으로 주입하면 된다.

 

CORS 설정 클래스 필드는 다음과 같이 구성되어 있다.

 

public class CorsConfiguration {

	@Nullable
	private List<String> allowedOrigins;

	@Nullable
	private List<OriginPattern> allowedOriginPatterns;

	@Nullable
	private List<String> allowedMethods;

	@Nullable
	private List<HttpMethod> resolvedMethods = DEFAULT_METHODS;

	@Nullable
	private List<String> allowedHeaders;

	@Nullable
	private List<String> exposedHeaders;

	@Nullable
	private Boolean allowCredentials;

	@Nullable
	private Boolean allowPrivateNetwork;

	@Nullable
	private Long maxAge;
    
    //...
}

 

필요한 설정을 주입해두고, Security Filter Chain에 설정을 등록해두면 된다.

 

@Configuration
@EnableWebSecurity
@RequiredArgsConstructor
public class SecurityConfig {

	//...

    @Bean
    public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {

        // CORS 정책 설정
        http
                .cors(cors -> cors
                        .configurationSource(CorsConfig.corsConfigurationSource())
                );
    }
}

 

 

만약 여기서 경로별 다른 CORS를 설정하고 싶다면, 다음과 같이 설정할 수도 있다.

 

 

@Configuration
@EnableWebSecurity
public class WebSecurityConfig {

	@Bean
	@Order(0)
	public SecurityFilterChain apiFilterChain(HttpSecurity http) throws Exception {
		http
			.securityMatcher("/api/**")
			.cors((cors) -> cors
				.configurationSource(apiConfigurationSource())
			)
			...
		return http.build();
	}

	@Bean
	@Order(1)
	public SecurityFilterChain myOtherFilterChain(HttpSecurity http) throws Exception {
		http
			.cors((cors) -> cors
				.configurationSource(myWebsiteConfigurationSource())
			)
			...
		return http.build();
	}

	CorsConfigurationSource apiConfigurationSource() {
		CorsConfiguration configuration = new CorsConfiguration();
		configuration.setAllowedOrigins(Arrays.asList("https://api.example.com"));
		configuration.setAllowedMethods(Arrays.asList("GET","POST"));
		UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
		source.registerCorsConfiguration("/**", configuration);
		return source;
	}

	CorsConfigurationSource myWebsiteConfigurationSource() {
		CorsConfiguration configuration = new CorsConfiguration();
		configuration.setAllowedOrigins(Arrays.asList("https://example.com"));
		configuration.setAllowedMethods(Arrays.asList("GET","POST"));
		UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
		source.registerCorsConfiguration("/**", configuration);
		return source;
	}

}

 

 

여기서 @Order를 통해 빈의 로드 순서를 정의할 수 있다.

 

@Order

@Order 의 경우 기본값은 LOWEST_PRECEDENCE이다.

 

 

 

 

Order은 낮은 값이 높은 우선순위를 갖는데, LOWEST_PRECEDENCE는 Integer의 MAX값이다.

 

즉, 기본값은 가장 낮은 우선순위이다.

 

 

만약 동일한 순서 값을 가진 객체들이면 임의의 정렬 위치를 갖게 된다.

 

 

따라서, 위 예시는 api 엔드포인트 부분을 우선순위를 높게(0) 잡아서 빈에 먼저 로드되도록 한다.

 

 

 

번외

 

CORS는 브라우저 자체에서 막는 것이기 때문에, 브라우저 설정을 통해 정책을 비활성화 할 수 있다.

 

Chrome Extension 중 CORS Unblock을 이용하면 임의로 CORS를 켜고 끌 수 있다.

 

https://chromewebstore.google.com/detail/cors-unblock/lfhmikememgdcahcdlaciloancbhjino?hl=ko

CORS Unblock

 

 

CORS는 보안을 지켜주는 고마운 정책이니 테스트용이 아니라면 꼭 꺼두자 ^_^

 

 

더 자세한 내용

https://ddonghyeo.tistory.com/58

Postman은 동작하지만 Swagger는 안됐던 이유

해당 글에서는 CORS가 정확히 어떤 필터를 통해 동작하고, 어떻게 검사를 진행하는지 알 수 있다.