💾 [CS] CORS란?

1️⃣ CORS.

• CORS(Cross-Origin Resource Sharing)는 웹 브라우저가 서로 다른 출처(도메인, 프로토콜, 또는 포트)를 가진 리소스 간의 요청을 안전하게 수행할 수 있도록 하는 보안 기능입니다.
• CORS(Cross-Origin Resource Sharing)는 웹 페이지가 다른 출처의 리소스를 요청할 때 발생하는 보안 제약을 해결하기 위해 설계되었습니다.

2️⃣ 왜 CORS가 필요한가?

• 웹 보안 모델에서 동일 출처 정책(Same-Origin Policy)은 보안상의 이유로, 웹 페이지에서 로드된 자바스크립트가 자신이 로드된 출처 외부의 리소스에 접근하는 것을 제한합니다.
  • 즉, 한 웹 페이지에서 로드된 스크립트는 다른 출처의 리소스(예: API 엔드포인트, 이미지 등)에 접근할 수 없습니다.
  • 이 보안 정책은 사이트 간 요청 위조(CSRF)와 같은 공격을 방지하는 데 중요한 역할을 합니다.
• 하지만, 많은 경우 애플리케이션은 외부 API나 다른 도메인에 있는 리소스에 접근해야 할 필요가 있습니다.
  • 이때, CORS를 사용하여 특정 출처에서 오는 요청을 허용할 수 있습니다.

3️⃣ CORS의 동작 방식.

• CORS는 서버가 클라이언트의 요청에 대해 다른 출처에서의 접근을 허용할지 여부를 HTTP 헤더를 통해 명시합니다.

CORS를 구현하는 과정.

• 1. Preflight Request
  • 브라우저는 실제 요청을 보내기 전에 OPTIONS 메서드를 사용해 서버에 “사전 요청(preflight request)”을 보냅니다.
    • 이 요청은 클라이언트가 보내려고 하는 실제 요청의 메서드와 헤더가 서버에서 허용되는지 확인합니다.
• 2. 서버 응답
  • 서버는 Access-Control-Allow-Origin 등의 CORS 관련 헤더를 포함한 응답을 반환합니다.
    • 이 응답을 통해 브라우저는 해당 출처의 요청을 허용할지 결정합니다.
• 3. 실제 요청
  • 서버가 허용한 경우, 브라우저는 실제 요청을 보내고 서버에서 데이터를 받아옵니다.

4️⃣ 주요 CORS 헤더.

• Access-Control-Allow-Origin
  • 클라이언트가 접근을 허용받은 출처를 지정합니다.
  • 모든 출처를 허용하려면 *를 사용할 수 있습니다.

Access-Control-Allow-Origin: https://example.com

• Access-Control-Allow-Methods
  • 서버가 허용하는 HTTP 메서드(GET, POST, PUT, DELETE 등)를 지정합니다.

Access-Control-Allow-Methods: GET, POST

• Access-Control-Allow-Credentials
  • 서버가 클라이언트의 자격 증명(쿠키, 인증 헤더 등)을 포함한 요청을 허용할지 여부를 결정합니다.
    • 값으로는 true 또는 false가 올 수 있습니다.

Access-Control-Allow-Credentials: true

• Access-Control-Max-Age
  • 브라우저가 사전 요청의 결과를 캐시할 수 있는 시간을 초 단위로 지정합니다.

Access-Control-Max-Age: 3600

5️⃣ CROS 설정 예시(서버 측)

• 서버 측에서 CORS를 설정하는 방법은 사용 중인 웹 서버 또는 프레임워크에 따라 다릅니다.
  • 다음은 Java SpringBoot 애플리케이션에서 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 implements WebMvcConfigurer {
    
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("https://example.com")
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowedHeaders("*")
                .allowedCredentials(true)
                .maxAge(3600);
            
    }
}

• 위 설정은 특정 출처(https://example.com)에서 오는 모든 경로의 요청에 대해 CORS를 허용하고, 특정 HTTP 메서드와 헤더를 사용할 수 있도록 합니다.

6️⃣ 요약.

• CORS 는 웹 브라우저가 서로 다른 출처의 리소스에 안전하게 접근할 수 있도록 하기 위한 보안 기능입니다.
• CORS 는 서버가 응답 헤더를 통해 특정 출처의 요청을 허용할 수 있도록 하며, 이를 통해 웹 애플리케이션은 외부 API나 리소스에 접근할 수 있습니다.
• CORS 를 적절히 설정하면, 보안성을 유지하면서도 다양한 출처에서의 리소스 접근을 허용할 수 있습니다.