CS/WEB

CORS

브리오 2024. 7. 16. 01:41

CORS(Cross-Origin Resource Sharing, 교차 출처 리소스 공유)는 웹 브라우저가 다른 출처의 서버와 자원(데이터)을 공유할 수 있도록 하는 보안 기능입니다. 기본적으로, 웹 브라우저는 보안상의 이유로 다른 출처(도메인, 프로토콜, 포트)의 자원에 접근하는 것을 제한합니다. CORS는 이러한 제한을 완화하여 안전하게 자원을 공유할 수 있게 해줍니다.

기본 개념

  • Same-Origin Policy (SOP, 동일 출처 정책): 웹 페이지가 자신의 출처(도메인, 프로토콜, 포트)와 다른 곳의 자원에 접근하는 것을 제한하는 보안 정책입니다. SOP는 XSS와 같은 보안 위협을 방지하기 위해 고안되었습니다.
  • Cross-Origin Resource Sharing (CORS): SOP의 제한을 일부 완화하여, 다른 출처에서 자원을 공유하기 위한 메커니즘입니다. CORS를 이용하면 지정된 출처의 요청에 대해 허용할 수 있습니다.

CORS 동작 방식

CORS가 어떻게 동작하는지 이해하기 위해서는, 주로 두 가지 유형의 HTTP 요청에 대해 알아볼 필요가 있습니다.

  1. 단순 요청(Simple Requests)
  2. 예비 요청(Preflight Requests)

단순 요청(Simple Requests)

단순 요청에는 HTTP GET, HEAD, POST 메서드가 포함됩니다. 이 요청들은 특별한 HTTP 헤더(FetchStandard에 나열된 몇 가지)들이 전송되지 않는 요청입니다. 예를 들어:

http
GET /path/to/resource HTTP/1.1
Host: other.example.com

브라우저는 이 요청을 서버로 전송하고, 서버는 Access-Control-Allow-Origin 헤더를 포함한 CORS 응답을 전송하여 브라우저가 응답을 처리할 수 있도록 허용합니다.

서버 응답 예시:

http
HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://example.com

예비 요청(Preflight Requests)

서버에 민감한 동작을 하기 전, 브라우저는 실제 요청을 보내기 전에 OPTIONS 메서드를 사용하여 서버와 "협상"을 진행합니다. 이 예비 요청은 서버가 실제 요청을 허용할지 여부를 미리 확인합니다.

예비 요청 예시:

http
OPTIONS /path/to/resource HTTP/1.1
Host: other.example.com
Origin: http://example.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: X-Custom-Header

서버는 다음과 같이 응답할 수 있습니다:

http
HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://example.com
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: X-Custom-Header

이 응답을 통해 브라우저는 실제 요청을 보내도 문제가 없는지 확인합니다.

주요 헤더들

  • Access-Control-Allow-Origin: 리소스를 공유할 수 있는 출처를 지정합니다. 예: Access-Control-Allow-Origin: http://example.com.
  • Access-Control-Allow-Methods: 허용할 HTTP 메서드를 지정합니다. 예: Access-Control-Allow-Methods: GET, POST.
  • Access-Control-Allow-Headers: 클라이언트가 요청할 수 있는 헤더를 지정합니다. 예: Access-Control-Allow-Headers: Content-Type.
  • Access-Control-Allow-Credentials: 자격 증명(쿠키 등)을 요청에 포함할 수 있는지 여부를 지정합니다. 예: Access-Control-Allow-Credentials: true.

예제

Spring Boot를 사용한 CORS 설정 예제는 다음과 같습니다:

java
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class CorsConfig {

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration config = new CorsConfiguration();
        config.setAllowCredentials(true);
        config.addAllowedOrigin("http://example.com");
        config.addAllowedHeader("*");
        config.addAllowedMethod("*");

        source.registerCorsConfiguration("/api/**", config);
        return new CorsFilter(source);
    }
}

이 설정 클래스는 http://example.com 출처에서 오는 요청에 대해 모든 헤더와 모든 HTTP 메서드를 허용하고, 자격 증명 또한 허용하도록 구성합니다.

요약하자면, CORS는 웹 브라우저가 다른 출처의 자원에 접근할 수 있도록 하는 메커니즘으로, 기본적인 동일 출처 정책의 제한을 일부 완화합니다. CORS 헤더를 사용해 허용할 출처, 메서드, 헤더 등을 지정하여 안전하게 자원을 공유할 수 있습니다