CORS

개요

다른 도메인으로부터 리소스를 요청할 경우 해당 리소스는 cross-origin HTTP 요청에 의해 요청된다. 하지만 대부분의 브라우저들은 보안상의 이유로 스크립트에서의 cross-origin HTTP 요청을 제한한다. 이것을 Same-Origin-Policy(동일 근원 정책)이라고 한다. 요청을 보내기 위해서는 요청을 보내고자 하는 대상과 프로토콜도 같아야 하고, 포트도 같아야 함을 의미한다.

이러한 문제를 해결하기 위해 과거에는 flash를 proxy로 두고 타 도메인간 통신을 했다. 하지만 모바일 운영체제의 등장으로 flash로는 힘들어졌다. (iOS는 전혀 플래시를 지원하지 않는다.) 대체제로 나온 기술이 JSONP(JSON-padding)이다. jQuery v.1.2 이상부터 jsonp 형태가 지원되어 ajax를 호출할 때 타 도메인간 호출이 가능해졌다. JSONP에는 타 도메인간 자원을 공유할 수 있는 몇 가지 태그가 존재한다. 예를 들어 img, iframe, anchor, script, link 등이 존재한다.

여기서 CORS는 타 도메인 간에 자원을 공유할 수 있게 해주는 것이다. Cross-Origin Resource Sharing 표준은 웹 브라우저가 사용하는 정보를 읽을 수 있도록 허가된 출처 집합을 서버에게 알려주도록 허용하는 특정 HTTP 헤더를 추가함으로써 동작한다.

HTTP Header

CORS와 관련된 주요 HTTP 헤더는 다음과 같다:

• Access-Control-Allow-Origin: 접근 가능한 URL 설정
• Access-Control-Allow-Credentials: 접근 가능한 쿠키 설정
• Access-Control-Allow-Headers: 접근 가능한 헤더 설정
• Access-Control-Allow-Methods: 접근 가능한 HTTP method 설정

Preflight Request

실제 요청을 보내도 안전한지 판단하기 위해 preflight 요청을 먼저 보내는 방법을 말한다. 즉, Preflight Request는 실제 요청 전에 인증 헤더를 전송하여 서버의 허용 여부를 미리 체크하는 테스트 요청이다. 이 요청으로 트래픽이 증가할 수 있는데 서버의 헤더 설정으로 캐쉬가 가능하다. 서버 측에서는 브라우저가 해당 도메인에서 CORS를 허용하는지 알아보기 위해 preflight 요청을 보내는데 이에 대한 처리가 필요하다. preflight 요청은 HTTP의 OPTIONS 메서드를 사용하며 Access-Control-Request-* 형태의 헤더로 전송한다.

이는 브라우저가 강제하며 HTTP OPTION 요청 메서드를 이용해 서버로부터 지원 중인 메서드들을 내려 받은 뒤, 서버에서 approval(승인) 시에 실제 HTTP 요청 메서드를 이용해 실제 요청을 전송하는 것이다.

예제 코드

다음은 CORS 설정을 포함한 간단한 Java Spring Boot 예제다:

// Java Spring Boot CORS 설정 예제
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfig {

    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**")
                        .allowedOrigins("http://example.com")
                        .allowedMethods("GET", "POST", "PUT", "DELETE")
                        .allowCredentials(true)
                        .maxAge(3600);
            }
        };
    }
}

이 예제는 Spring Boot 애플리케이션에서 CORS 설정을 하는 방법을 보여준다. / 경로 이하의 모든 요청에 대해 http://example.com에서 오는 요청을 허용하며, GET, POST, PUT, DELETE 메서드를 허용하고, 인증 정보를 포함한 요청도 허용한다.

So...

CORS는 보안상의 이유로 동일 출처 정책을 우회할 수 있는 표준이다. 이는 웹 애플리케이션이 다른 도메인에서 리소스를 안전하게 요청할 수 있도록 해준다. Preflight 요청을 통해 서버가 허용하는지 미리 확인할 수 있으며, 다양한 HTTP 헤더를 통해 세부 설정을 할 수 있다. CORS를 이해하고 적절히 설정하는 것은 현대 웹 개발에서 매우 중요하다.