Web

[Web] CORS(Cross-Origin Resource Sharing)

차가운개발 2024. 12. 7. 07:02

 

웹 브라우저가 다른 도메인, 포트, 혹은 프로토콜에 존재하는 리소스에 접근할 수 있도록 허용하는 HTTP 헤더 기반 보안 메커니즘이다. 기본적으로 웹 브라우저는 보안 상의 이유로 **동일 출처 정책 (Same-Origin Policy)**을 따르는데 웹 페이지가 로드된 도메인과 다른 도메인에 있는 자원에 직접적으로 접근하는 것을 제어한다 CORS는 이런 제한을 완화하는 표준 방식이다.

 

동일 출처 정책(Same-Origin Policy)

  • 브라우저는 스크립트가 로드된 출처와 동일한 프로토콜, 도메인, 포트를 가진 자원에만 무제한적으로 접근하도록 하는 보안 정책이다
  • 출처는 프로토콜(http , https), 도메인(testdomain.com), 포트(:8080)로 구성된다
    ex : http://testdomain.com:8080/index.html 에서 스크립트가 로딩되었다면 출처는 http://testdomain.com:8080 다.

CORS의 필요성

하나의 웹 애플리케이션은 종종 다른 도메인 (외부 API 서버)에 있는 데이터를 사용해야한다. 이때 동일 출처 정책으로 보안 제한을 가하므로 서버 측에서 CORS를 활성화 하여 특정 또는 모든 출처에 대한 요청을 허용할 수 있다.

 

CORS 동작 방식

CORS는 서버에서 특정 HTTP 응답 헤더를 설정함으로써 작동한다

 

1. Acess-Control-Allow-Origin: 출처 or *(모든 출처에 대한 접근 허용)

  • 가장 핵심적인 CORS 헤더, 서버가 응답 시 이 헤더를 통해 특정 도메인 또는 *를 명시하여 해당 도메인에서 오는 요청을 혀용할 수 있다.

2. Acess-Control-Allow-Method: HTTP 메서드

  • 서버가 허용하는 HTTP 메서드 목록을 지정한다
  • ex : Acess-Control-Allow-Method: GET, POST, PUT, DELETE 

3. Acess-Control-Allow-Headers:

  • 클라이언트가 요청에 사용할 수 있는 HTTP 헤더를 명시한다
  • ex : Acess-Control-Allow-Headers: Content-Type, Authorization

4.Acess-Control-Allow-Credentials:

  • 인증 정보(쿠키, HTTP 인증 정보) 포함 요청 허용 여부를 지정한다
  • ex : Acess-Control-Allow-Credentials: true
  • 이 경우 클라이언트 측에서 withCredentials: true 옵션을 사용해야 하며, Acess-Control-Allow-Origin은 * 대신 특정 출처를 명시해야한다.

5. Access-Control-Expose-Headers:

  • 응답 헤더 중 브라우저에서 접근 가능한 헤더를 명시한다. 기본적으로 안전한 헤더 외엔 브라우저가 응답 헤더에 접근할 수 없다.

 

예비 요청(Preflight Request)

POST, PUT, DELETE 등 안전하지 않은 메서드나 특정 커스텀 헤더를 사용하는 요청을 보내기 전, 브라우저는 자동으로 **사전 검증 요청(Preflight Request)** 라고 불리는 OPTIONS 메서드 요청을 먼저 보낸다.

 

동작 방식

1. 브라우저는 대상 서버에 OPTIONS 메서드로 요청을 보낸다. 이때 요청 헤더에는 Origin, Access-Control-Request-Method, Access-Control-Request-Headers 등이 포함된다.

 

2. 서버는 이에 대해 허용 가능한 출처, 메서드, 헤더를 응답으로 제공하는 CORS 헤더를 달아서 보낸다

 

3. 브라우저는 해당 응답을 보고 실제 요청을 실행할지 말지 결정한다.

  • ex : 클라이언트가 POST http://api.test.com/data 요청을 보내기 전
  • 브라우저는 먼저 OPTIONS http:api.test.com/data 요청을 보낸다 (예비 요청)
  • 서버가 적절한 CORS 응답 헤더를 응답하면 브라우저는 실제 POST 요청을 진행하거나 요청을 차단한다.

주의 사항

  • 보안 고려
    모든 출처를 허용하면 보안상 위험할 수 있다 민감한 데이터를 다루는 경우 특정 출처를 명시하거나 인증 절차를 두어야한다.
  • Preflight 요청 최적화
    예비 요청은 추가적인 네트워크 오버헤드를 발생시키므로, API 설계나 서버 구성 시 이를 최소화하는 전략을 고려할 수 있다.
  • 환경별 설정 차이
    브라우저 외 다른환경에서는 동일 출처 정책을 적용하지 않는 경우도 많으므로 불필요할 수 있다.