[HTTP] Cross Origin Resource Sharing, CORS란?

필자가 개발을 공부할 때 DevOps 부분이나 Front나 Back에서 공통적으로 마주했던 문제 몇 가지가 있었는데, CORS도 그 문제들에 포함된다.

 

이 말은 다음과 같다.

나는 Front 개발자인데 CORS에 대해서 몰라도 되겠죠? 혹은 난 관리 유지보수인 DevOps니까 몰라도될거야 라는 생각을 버려야한다.

 

어디에서나 발생할 수 있는 문제중 하나로 최신 브라우저의 대부분은 헤더와 CORS 정책을 적용하기 때문에, CORS 표준을 맞추기 위해서는 모든 개발자 혹은 관리자가 알아야 한다.

 

오늘은 그게 왜 발생하고 어떤 요청이 CORS를 사용하는지 등등에 관해 배워보자.

CORS

CORS란 현재 Ip가 아닌 다른 Ip로 리소스를 요청하는 구조라고 일단은 생각하면 된다.

 

필자가 CORS에 대해서 잘 이해가 가지 않아서 여러 설명을 찾아보고 비교해봤지만 항상 처음에 보는 문구는 위에서 말 했던 것이었다.

 

이해가 잘 가지 않지만 이해를 하고 보니 저 설명이 가장 설명하기 좋은 문구인것 같다.

 

우리는 이 CORS에 대해서 알아가기 위해서 오늘 3가지를 배울 것이다.

 

1. Origin (Cross Origin VS Same Origin
2. SOP
3. Access-Control-Allow-Origin

저 세가지를 모두가 CORS에 관련된 것들이다.

 

이제 하나 하나 알아가 보자.

1. Origin

Origin은 요청이 시작된 서버의 위치를 나타내는문구이다.

 

만약 내가 Naver 로그인 서버로 로그인 요청을 한다고 가정하면, 아마 과정을 그려보면 다음과 같을 것이다.

 

여기서 서버 Ip는 2개가 존재한다.

1. Client 서버
2. 로그인 API 서버

이 2개의 IP는 서로 다른 IP의 번호를 갖고 있게 된다.

 

예를 들어 Client 서버는 http://client:80 이라고 하고 로그인 서버는 http://login:3000/이라고 해보자.

 

그럼 여기서 클라이언트 서버(http://client:80)가 로그인 서버(http://login:3000/)에게 HTTP 요청을 보낼 때 Origin 이 다르다라고 하는 것이다.

이를 Cross Origin이라고 하고, 만약 로그인 서버가 내부 통신을(그럴 일은 드물겠지만) 해서 서버 내 데이터를 가져온다면 그 것은 Same Origin이라고 한다.

그럼 여기서 어떻게 Origin을 구분할까?

Origin을 구분하는 방법

Origin을 구분할 때는 3가지를 이용한다.

1. 스키마
2. HOST
3. Port

예를 들면 https://wonit.tistory:80이라는 경로가 있다면 여기에 스키마, Host, Port모두가 포함되어 있다.

• https://wonit.tistory:80/post
• https://wonit.tistory:80/post/id?page=10
• https://wonit.tistory:80/main/post/comment
  이런 주소라면 서로 모든 Origin이 동일한 상태인 것이다.

2. SOP

SOP는 Same Origin Policy를 뜻한다.

 

Same Origin Policy란? 2011년 RFC 6454에서 등장한 보안 정책으로 동일한 출처의 Origin만 리소스를 공유할 수 있다. 를 의미한다.

 

우리가 이 SOP 때문에 사실상 CORS 문제에 허덕인다고 해도 과언이 아니다.

 

이 SOP 표준에 따라야지 XSS라던지 CSRF라는 보안상의 Issue를 막을 수 있게 된다.

3. Access-Control-Allow-Origin

이 Access-Control-Allow-Origin은 바로 CORS를 해결할 수 있는 고마운 녀석이다.

 

우리가 SOP 정책에 따라서 같은 Origin의 자원만 공유 가능하다고 했는데, 그럼 다른 Origin에서 자원이용을 못하는 것일까?

 

웹이라는 생태계는 다른 리소스의 공유를 수도 없이 많이 하기 때문에 위의 말대로 자원 이용을 못한다면 SOP가 사라졌거나 웹이 사라졌거나 둘 중 하나겠지만 이 Access-Control-Allow-Origin 덕분에 서로 다른 Origin 에서 자원 공유가 가능해졌다.

결론인 CORS는 어떻게 동작시킬까?

이제 결론으로 다다랐다.

 

Cross Origin에서 자원을 요청하기 위해서는 다음과 같은 과정을 거친다.

 

1. HTTP 통신 헤더인 Origin 헤더에 요청을 보내는 곳의 정보를 담고 서버로 요청을 보낸다.
2. 이후 서버는 Access-Control-Allow-Origin헤더에 허용된 Origin이라는 정보를 담아 보낸다
3. 클라이언트는 헤더의 값과 비교해 정상 응답임을 확인하고 지정된 요청을 보낸다.
4. 서버는 요청을 수행하고 200OK 코드를 응답한다.