Cross-Origin Resource Sharing

Haribo·2022년 7월 11일

1일 1cs

목록 보기

5/9

CORS 🤖

은 교차 출처 리소스 공유(Cross-Origin Resource Sharing)의 앞글자만을 따서 만들었다. HTTP 헤더를 사용하는데 한 출처에서 실행 중인 웹 어플리케이션이 다른 출처에 엑세스 할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제다. 한 문장으로 정리하면 다음과 같다.

브라우저에서 다른 출처의 리소스를 공유하는 방법.

이때 출처는 접근할 때 사용하는 URL의 scheme(프로토콜), 호스트이름(도메인), 포트로 구성된다. 출처(Origin)을 가졌다는 의미는 두 객체(Object)의 scheme, 호스트, 포트가 모두 일치하는 경우를 말한다. 아래 예제로 알 수 있다.

동일 출처(Origin) 예시

다른 출처(Origin) 예시

또 이 출처를 알기 위해선 URL의 구조를 알아야한다.
HTTP와 HTTPS는 각기 다른 포트를 사용하고 있는데 각각 80번, 443번 포트를 사용한다.
각각 포트번호는 생략 가능하다.

이 블로그의 게시글 주소는 https://velog.io/write?id=8fa43a19-990c-4852-8001-6dd9b3246ee1
인데 이를 분해해보면 다음과 같다.

👾 protocal - https://

👾 Host - velog.io

👾 Port - :443 (생략가능)

👾 Path - @wakeupmakeup

👾 Query String - ?page=1

👾 Fragment - Cross-Origin Resource Sharing

다시 돌아와서.

원래 브라우저는 보안적인 이유로 Cross-origin HTTP 요청들을 제한한다. 그래서 서버의 동의가 필수적인데 이를 허가하는 것이 CORS다.

Cross-Origin 요청이라는 것은 말 그대로 출처가 교차됐다는 의미. 다음 중 한 가지라도 다른 경우를 말한다.

Protocal : http <-> https는 서로 프로토콜이 다르다.
Domain : domain.com과 other-domain.com은 다르다.
port number : 8080포트와 3000포트는 다르다.

이게 왜 필요한데?

CORS가 없이 모든 곳에서 데이터를 요청할 수 있게 된다면 다른 사이트에서 원래 사이트를 모방할 수 있다. 그러니까 네이버와 똑같은 페이지를 만들고 작동까지 그대로 되게 만든 후 악의적으로 로그인 정보들을 탈취할 수 있다. 이렇게 할 수 없도록 브라우저를 보호하고 필요한 경우에만 서버와 협의해서 요청할 수 있게 하는 것이다.

동작 원리는?

일단 두가지다.

simple request
preflight request

simple request일 경우.

서버로 요청한다.
서버 응답이 왔을 때 브라우저가 요청한 출처(Origin)과 응답한 헤더 Access-Control-Request-Headers의 값을 비교해서 유효하다면 리소스를 응답한다. 만약 유효하지 않다면 브라우저에서 이를 막는다.

simple request는 다음과 같은 조건일떄 성립한다.

HTTP method가 다음중 하나여야 한다.

GET
POST
HEAD

또 자동으로 설정되는 헤더는 제외하고, 설정할 수 있는 다음 헤더들만 변경한다.

Accept
Accept-Language
Content-Language

Content-Type이 다음과 같은 경우

application/x-www-form-urlencoded
multipart/form-data
text/plain

이를 simple requests라고 한다. 이 요청은 추가적을 확인하지 않고 바로 본 요청을 보낸다.

preflight request일 경우.

먼저 simple requests가 아닌 cross-origin 요청들은 모두 preflight 요청을 하게 되는데, 실제 요청을 보내는 것이 안전한지 확인 하기 위해 options 메서드를 사용 -> cross-origin HTTP 요청을 보낸다. 이렇게 하는 이유는 사용자 데이터에 영햐을 미칠 수 있는 요청이므로 사전에 확인 후 본 요청을 보낸다.

origi헤더에 현재 요청하는 origin과 Access-Control-Request-Method 헤더에 요청하는 HTTP method와 Access-Control-Request-Headers 요청 시 사용할 헤더를 options 메서드로 요청한다.
브라우저가 서버에서 응답한 헤더를 보고 유효한지 아닌지 확인한다. 만약 유효하지 않다면 요청은 중단되고 에러가 발생한다. 유효하다면 원래 요청을 다시 요청해서 리소스를 응답받는다.