[WEB] CROS

skyu93·2024년 11월 22일

CORS는 SOP로 인해 제한된 교차 출처 요청을 처리하기 위한 보안 메커니즘입니다.
단순 요청은 사전 요청 없이 바로 처리되지만, 사전 요청은 교차 출처 요청의 안전성을 확인하는 단계로 동작합니다.
이를 통해 클라이언트가 교차 출처 리소스에 안전하게 접근할 수 있도록 보장하며, 웹 보안 정책을 준수합니다.

CORS를 제대로 이해하려면 SOP(Same-Origin Policy, 동일 출처 정책)에 대한 이해가 필요합니다.

SOP?

MDN에 따르면 SOP는 다음과 같이 정의됩니다

동일 출처 정책은 어떤 출처에서 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호 작용할 수 있는 방법을 제한하는 중요한 보안 메커니즘입니다.

https://developer.mozilla.org/ko/docs/Web/Security/Same-origin_policy

쉽게 말해, SOP는 웹 보안을 위한 정책으로, 웹 페이지가 자신의 출처와 다른 출처에서 온 리소스를 함부로 접근하거나 조작하지 못하도록 제한합니다.

여기서 출처(Origin)라는 개념을 이해해야 하는데
출처는 아래 사진과 같이 URL에서 리소스를 제외한 Protocal Host Port로 이루어져 있습니다.

SOP에 따르면, 동일한 출처가 아닌 리소스를 요청하는 것은 정책을 위반하는 행위로 간주됩니다.

SOP의 역할

SOP는 웹 보안을 위해 설계되었습니다.
예를 들어, 악성 스크립트가 사용자의 브라우저에서 중요한 정보를 탈취하거나, 다른 출처의 리소스를 부적절하게 호출하는 것을 방지합니다.

CROS

CORS(Cross-Origin Resource Sharing)는 SOP로 인해 제한된 교차 출처 요청을 허용하기 위한 메커니즘입니다.
MDN에서는 CORS를 다음과 같이 설명합니다

CORS는 브라우저가 자신의 출처가 아닌 다른 출처(도메인, 스킴, 포트)로부터 자원을 로딩하는 것을 허용하도록, 서버가 HTTP 헤더를 통해 허가를 명시하는 방식입니다.

즉, 서버가 교차 출처 요청을 허용한다고 선언하면 SOP 제한을 우회할 수 있습니다.

CORS의 동작 원리

CORS는 HTTP 헤더를 사용하여 서버가 특정 출처의 요청을 허용할지 결정합니다. 클라이언트가 서버에 요청을 보낼 때, 서버는 요청의 출처를 확인하고, 해당 출처가 허용된 경우에만 응답을 반환합니다. 이 과정은 다음과 같은 단계로 이루어집니다.

1. 클라이언트가 서버에 요청을 보냅니다.

단순 요청(Simple Request)의 경우: 브라우저는 바로 요청을 보냅니다.

단순 요청의 조건

HTTP 메서드가 GET, POST, HEAD를 사용한 경우

커스텀 헤더를 사용하지 않은 경우

요청 본문(Content-Type)이 다음 중 하나일 것
text/plain
multipart/form-data
application/x-www-form-urlencoded

사전 요청(Preflight): 브라우저는 먼저 OPTIONS 메서드를 사용해 사전 요청(Preflight Request)을 보냅니다.

단순 요청의 조건

HTTP 메서드가 PUT, DELETE 등 단순 요청 조건을 벗어나는 경우.

커스텀 헤더(예: Authorization, X-Custom-Header)를 포함한 경우.

2. (사전 요청의 경우) 서버가 요청을 검토합니다.

사전 요청에는 클라이언트가 본 요청에서 사용할 메서드(Access-Control-Request-Method)와 헤더(Access-Control-Request-Headers) 정보가 포함됩니다.
서버는 요청의 출처(Origin)와 요청 조건을 확인한 뒤, 허용 여부를 응답 헤더에 명시합니다.

3. 클라이언트가 서버의 응답을 확인합니다.

사전 요청 응답이 허용된 경우: 브라우저가 본 요청을 서버로 보냅니다.
허용되지 않은 경우: 브라우저는 요청을 차단합니다.

4. (본 요청) 서버가 요청을 처리하고 응답합니다.

허용된 출처라면 응답 헤더에 Access-Control-Allow-Origin을 포함하여 결과를 반환합니다.
허용되지 않은 출처라면 브라우저는 응답을 차단합니다.

아래의 이미지는 CORS 요청의 흐름을 보여줍니다.

이미지 출처

Preflight(사전 요청) 상세 동작

사전 요청은 단순하지 않은 요청이 서버에서 허용될 수 있는지 확인하기 위해 본 요청 전에 수행됩니다. 동작 과정은 아래와 같습니다:

1, 사전 요청 전송
클라이언트는 OPTIONS 메서드를 사용해 서버로 사전 요청을 보냅니다. 요청 헤더에는 다음 정보가 포함됩니다:

Origin: 요청을 보낸 출처
Access-Control-Request-Method: 본 요청에서 사용할 HTTP 메서드
Access-Control-Request-Headers: 본 요청에 포함될 커스텀 헤더 목록

서버의 응답
서버는 요청의 출처와 메서드 및 헤더 정보를 검토한 뒤, 응답 헤더에 허용 정보를 포함하여 클라이언트에 반환합니다.

Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Max-Age: 3600
Access-Control-Allow-Headers: Content-Type, Authorization