CORS

CORS

 

CORS란 무엇인지에 대해 알아보고, CORS가 발생하는 상황을 구체적으로 파악해본다.

 

 

1. CORS란?

교차 출처 리소스 공유(Cross-origin resource sharing, CORS), 교차 출처 자원 공유는 웹 페이지 상의 제한된 리소스를 최초 자원이 서비스된 도메인 밖의 다른 도메인으로부터 요청할 수 있게 허용하는 구조이다. 웹페이지는 교차 출처 이미지, 스타일시트, 스크립트, iframe, 동영상을 자유로이 임베드할 수 있다.

다만 특정 교차 도메인 간(cross-domain) 요청, 특히 Ajax 요청은 동일-출처 보안 정책에 의해 기본적으로 금지된다.

-위키 백과-

 

위 설명은 위키 백과에 나와있는 CORS에 대한 설명이다.

간단하게 말해서 CORS는 리소스를 제공하는 도메인과 다른 도메인(출처)으로부터 요청을 허용하는 정책이라고 이해할 수 있다.

 

그런데 다른 도메인이라는 게 무엇을 의미하는 것일까?

 

예를들어 외부에서 실행되고 있는 한 백엔드 서버의 도메인을 backEnd 라고 하자.

사용자의 ip주소와 backEnd는 다를 것이다. 

그러면 사용자가 브라우저 주소창에 https://backEnd/ 를 입력해서 해당 백엔드 서버의 도메인을 요청했을 때 이것은 CORS에 위반될까?  

 

결론만 말하자면 위의 경우는 CORS를 위반하지 않는다.

 

 

 

1.1 다른 출처

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

-Mozilla-

 

위 설명은 CORS 정책을 제공하는 Mozilla의 CORS에 대한 설명이다.

 

여기서는 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처에 접근할 때 CORS가 발생한다고 설명되어있다.

또한 출처란 [프로토콜, 도메인, 포트]로 이루어져있다고 정의되어있다.

 

즉, CORS는 특정 출처를 가진 웹 애플리케이션이 다른 출처에 요청을 보낼 때 발생한다고 볼 수 있다.

 

그리고 CORS는 브라우저에 책정된 정책이기 때문에 브라우저에서만 발생한다.

따라서 PostMan 같은 요청 앱을 사용해도 CORS는 발생하지 않는다.

 

 

 

1.2 CORS 발생 예시

다시 외부에서 실행되고 있는 백엔드 서버가 있다고 하자.

이때, 사용자가 브라우저 주소창에 해당 백엔드 서버의 출처를 요청하는 것은 CORS 정책을 위반하지 않는다.

이는 특정 출처를 가진 웹 애플리케이션을 사용해 외부 백엔드 서버에 요청한 것이 아니기 때문이다.

 

[브라우저 -> 백엔드 서버 요청]

 

그렇다면 특정 출처를 가진 웹 애플리케이션이 다른 출처에 요청하는 경우는 어떤 경우일까?

 

최근에 가장 대표적인 예로는 CSR(Client-Side-Rendering) 방식으로 웹 애플리케이션을 사용할 때가 있다.

 

CSR에서는 사용자가 프론트 서버에서 화면 렌더링에 필요한 데이터들을 미리 다운로드한다.

 

[프론트 서버 -> 브라우저_렌더링 필요 데이터 전달]

 

이때 미리 다운 받아진 데이터들의 출처는 프론트 서버(https://front)가된다.

 

이제 브라우저가 특정 페이지를 요청한다고 하자.

특정 페이지를 만들기 위해 백엔드 서버의 데이터가 필요하다면, 브라우저에 다운 받아진 javaScript에서 백엔드 서버로 요청이 가게 된다. 

 

[javaScript -> 백엔드 서버 요청]

 

위 그림은 브라우저에서 http://front/1 의 요청을 했을 때 javaScript가 백엔드 서버의 Api(http://back/1)를 호출하는 것을 나타낸다.

 

javaScript의 출처는 http://front 이고 백엔드 서버의 출처는 http://back 이다.

즉, 위와 같은 경우가 특정 출처를 가진 웹 애플리케이션이 다른 출처에 요청한 경우이고 이때 CORS가 적용된다.

 

 

 

1.3 CORS 정책의 이유

왜 브라우저는 CORS 정책을 적용하고 있을까?

 

이는 웹 애플리케이션의 악의적인 요청과 관련이 있다.

 

해커에 의해 나의 브라우저에 악의적인 javaScript가 다운받아졌다고 해보자.

이 javaScirpt는 내가 naver에 로그인할 때 나의 로그인 정보를 갖고 naver 서버에 사용자가 원치 않는 요청을 할 수 있다.

예를 들어 로그인 정보를 갖고 naver 서버에 요청해서 이메일로 스팸 메일을 무작위로 발송하도록 작성되어 있을 수 도 있다.

이때 naver 서버가 출처에 상관없이 요청을 허용하면 위와 같은 악의적인 요청이 그냥 허용되게 된다.

 

때문에 브라우저에서 특정 출처의 웹 애플리케이션을 사용해 다른 출처에 요청할 때,

해당 요청이 허용된 요청인지를 확인하고자 CORS 정책이 적용되었다.