[CS] CORS(Cross-origin Resource Sharing)란 ?

CORS란 ?

MDN Docs에서는 CORS를 다음과 같이 정의하고 있습니다.

CORS는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다. 웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행합니다.

 

브라우저는 보안 상의 이유로 스크립트에서 시작한 교차 출처 HTTP요청을 제한합니다. 스크립트에서 브라우저에서 웹 애플리케이션은 자신의 출처와 동일한 리소스만 불러올 수 있으며, 다른 출처의 소스를 불러오면 그 출처에서 올바른 CORS 헤더를 포함한 응답을 반환해야합니다.

cross-origin 요청을 하려면 서버의 동의가 필요합니다. 만약 서버가 동의한다면 브라우저에서는 요청을 허락하고, 동의하지 않는다면 브라우저에서 거절합니다. 허락을 구하고 거절하는 메커니즘을 HTTP-header를 이용해서 가능한데, 이를 CORS(Cross-origin Resource Shargin)라고 부릅니다.

 

Origin이란 ?

Origin은 출처라는 의미를 가지고 있고 아래의 사진과 같이 Protocol, Host, Port를 합친 것을 말합니다.

아래 url의 구조를 함께 살펴보겠습니다 !

 

* 즉 Cross origin은 다음 중 하나라도 다른 경우에 발생합니다.

• 프로토콜이 다른 경우 (http와 https는 같지 않다)
• 도메인이 다른 경우 (domain.com과 other-domain.com은 같지 않다)
• 포트 번호가 다른 경우 (8080포트와 3000포트는 같지 않다)

 

CORS가 존재하는 이유는 ?

CORS가 없이 모든 곳에서 데이터를 요청할 수 있게되면, 다른 사이트에서 원래 사이트를 흉내낼 수 있게됩니다.

예를 들어 기존 사이트와 완전히 동일하게 동작하도록 하여 사용자가 로그인을 하도록 만들고, 로그인했던 세션을 탈취하여 악의적으로 정볼를 추출하거나 다른 사람의 정보를 입력하는 등의 공격을 할 수 있습니다.

이런 공격을 할 수 없도록 브라우저에서 보호하고, 필요한 경우에만 서버와 협의하여 요청할 수 있도록 하기 위해서 CORS가 필요합니다 !

 

CORS의 동작방법

1. 기본적으로 웹은 다른 출처의 리소스를 요청할 때 HTTP 프로토콜을 사용하여 요청을 하는데 이때 브라우저는 요청 헤더(request header)에 Origin 필드 요청을 보내는 출처를 담아 전송합니다.

 

2. 서버는 요청에 대한 응답을 하는데, 응답 헤더(response header)에 Access-Control-Allow-Origin이라는 값에 '이 리소스를 접근하는 것이 허용된 출처'를 내려줍니다.

 

3. 이후 응답을 받은 브라우저는 자신이 보냈던 요청의 Origin과 서버가 보내준 응답의 Access-Control-Allow-Origin을 비교해 본 후 이 응답이 유요한 응답인지 아닌지를 결정합니다.

 

기본적인 CORS 동작의 흐름이지만 모든 CORS 동작의 방신은 아닙니다 !