CORS

CORS (Cross-Origin Resource Sharing)

교차 출처 리소스 공유(CORS)는 웹 브라우저가 한 출처에서 로드된 웹 애플리케이션이 다른 출처의 리소스에 접근할 수 있도록 허용하거나 제한하는 보안 메커니즘이다.

 

CORS가 발생하는 상황

• CORS 에러 발생 조건:
  • 클라이언트(브라우저)가 출처가 다른 서버에 요청.
  • 서버가 CORS 정책을 통해 해당 요청을 허용하지 않을 경우.
• 출처란?
  • URL의 프로토콜, 도메인, 포트로 정의.

    https://example.com:8080
    

    • 프로토콜: https
    • 도메인: example.com
    • 포트: 8080
• 동일 출처 정책(Same-Origin Policy):
  • 브라우저는 보안상의 이유로 동일 출처가 아닌 리소스에 대한 요청을 기본적으로 차단.

 

CORS의 작동 원리

CORS 요청의 종류

1. 단순 요청(Simple Request):
   • 예비 요청(Preflight Request)이 필요 없음.
   • 조건:
     • 메서드: GET, POST, HEAD만 허용.
     • 헤더: Content-Type은 text/plain, application/x-www-form-urlencoded, multipart/form-data만 허용.
   • 서버는 응답 헤더에 Access-Control-Allow-Origin을 추가해 요청을 허용.
2. 예비 요청(Preflight Request):
   • 브라우저가 실제 요청 전에 서버의 허가를 받기 위해 OPTIONS 메서드로 요청.
   • 서버가 허가하면 본 요청(Main Request)이 전송.
   • 사용 조건:
     • 메서드: PUT, DELETE, PATCH, OPTIONS.
     • 헤더: 커스텀 헤더 포함(Authorization, X-Custom-Header 등).

 

 

주요 CORS 응답 헤더

서버가 브라우저 요청을 허용하려면 아래 헤더를 포함해야 함:

1. Access-Control-Allow-Origin:
   • 허용할 출처를 지정.
   • 예:
     • 특정 출처 허용: Access-Control-Allow-Origin: https://example.com
     • 모든 출처 허용: Access-Control-Allow-Origin: *
2. Access-Control-Allow-Methods:
   • 허용할 HTTP 메서드.
   • 예: Access-Control-Allow-Methods: GET, POST, PUT
3. Access-Control-Allow-Headers:
   • 클라이언트가 요청에 포함할 수 있는 커스텀 헤더.
   • 예: Access-Control-Allow-Headers: Content-Type, Authorization
4. Access-Control-Allow-Credentials:
   • 요청에 쿠키나 인증 정보를 포함하도록 허용.
   • 예: Access-Control-Allow-Credentials: true
5. Access-Control-Max-Age:
   • 예비 요청의 결과를 브라우저가 캐싱하는 시간(초 단위).
   • 예: Access-Control-Max-Age: 3600

 

 CORS 발생 예제

클라이언트(JavaScript fetch)

fetch('https://api.example.com/data', {
    method: 'GET',
    headers: {
        'Content-Type': 'application/json',
    },
    credentials: 'include' // 쿠키 포함
})
    .then((response) => response.json())
    .then((data) => console.log(data))
    .catch((error) => console.error('CORS 에러:', error));

서버(Spring Boot 예제)

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 CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("https://example.com") // 허용할 출처
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowedHeaders("*")
                .allowCredentials(true)
                .maxAge(3600); // 예비 요청 결과 캐싱 시간
    }
}

 

 

Origin과 URI, URL

1. Origin (출처):
   • 프로토콜, 도메인, 포트를 포함한 주소.
   • 예: https://example.com:8080
2. URL (Uniform Resource Locator):
   • 리소스의 전체 경로를 나타내는 문자열.
   • 예: https://example.com:8080/path/to/resource
3. URI (Uniform Resource Identifier):
   • 리소스의 고유 식별자. URL도 URI의 하위 개념.
   • 쿼리스트링(?key=value)을 포함하면 URI.
   • 예: https://example.com/path/resource?key=value

 

 HTTP의 무상태성과 CORS의 관계

• HTTP는 Stateless:
  • 상태를 기억하지 않음(서버는 이전 요청 정보를 보존하지 않음).
  • CORS 정책도 요청 간 상태를 저장하지 않고 요청마다 헤더를 통해 허용 여부를 판단.
• 상태 유지 방법:
  • 브라우저에 쿠키를 저장하거나, JWT 토큰을 사용하여 상태를 관리.