[네트워크] Cross Origin Resource Sharing (CORS)

 

Cross Origin Resource Sharing (CORS)

 

---

 

 웹 개발에서 빠질 수 없는 개념인 Cross Origin Resource Sharing (CORS)를 알아보자.

 

 

# Same Origin 정책 vs Cross Origin 정책

 

 서버와 클라이언트는 HTTP로 통신한다. 이때, 특정한 정책 아래에서 요청을 주고 받게 되는데 그 정책에는 Same Origin 정책과 Cross Origin 정책이 있다. HTTP 요청이 무엇이냐에 따라 Same Origin 정책을 따르거나 Cross Origin 정책을 따르는 것이다.

 

 Origin이란 말 그대로 출처이다. 즉, HTTP 요청의 종류에 따라 같은 출처(Same Origin)만을 허용하거나 다른 출처(Cross Origin)도 허용하는 경우로 나뉜다. 이때, 출처란 정확히 무엇일까? 출처를 따지는 이유는 무엇일까? 순서대로 알아보자.

 

 

# Origin(출처)란

 

 우리는 URL을 통해 웹사이트에 접속한다. 인터넷 주소창에 URL을 입력하면 해당하는 웹사이트로 이동하게 된다. 그리고 이 URL 속에 우리가 Origin이라고 부르는 부분이 있다.

 

URL 예시

 protocol + host + port를 합쳐 Origin이라고 한다. 즉, URL 속 protocol, host, port가 같으면 Same Origin(같은 출처), 다르면 Cross Origin(다른 출처)가 되는 것이다.

 

 

# Same Origin 정책 : SOP(Same-Origin Policy)

 

 웹 브라우저는 출처가 다르면 접근을 차단한다. 즉, 동일한 출처의 리소스만 공유할 수 있고 출처가 다른 리소스는 사용할 수 없다. 이를 Same Origin 정책이라고 한다. 왜 이런 정책이 있는 것일까? 보안을 위해서이다. 서로 출처가 다른 두 웹페이지가 아무런 제약 없이 상호작용을 할 수 있다면 우리가 모르는 사이에 악의적인 코드가 실행될 수도 있다. 정체를 알 수 없는 웹페이지 속에는 악의적인 코드가 숨어있을 수도 있으니, 브라우저가 이를 사전에 막아버리는 정책인 것이다. 위에서 언급한 protocol, host, port 중 하나라도 다르면 다른 출처라고 판단되어 브라우저가 이를 막아버린다.

 

 그런데 이 정책에 따라 출처가 다른 모든 리소스들을 막아버리면, 웹 페이지는 제대로 돌아갈 수 있을까? 웹 페이지가 다른 곳에서 리소스를 가져오는 것은 매우 흔한 일이다. 사진 한 장을 가져오더라도 다른 출처에서 받아온 사진일 수 있다. 그러니 Same Origin 정책을 그대로 적용하면 웹페이지 사용이 불편해질 것이다. 그래서 다른 출처의 리소스 요청도 일부 허용하는 정책이 있는데, 그 정책이 바로 CORS(Cross-Origin Resource Sharing)이다.

 

 

# CORS(Cross-Origin Resource Sharing) : 서로 다른 출처의 리소스 공유

 

 앞서 설명했던 대로 서로 다른 출처의 리소스를 받아와야 하는 상황이 있다. 이를 위한 정책이 바로 CORS이다. 다른 출처의 사진, API 등을 가져올 수 있게 해주는 정책인 것이다. 즉, 원래는 같은 출처의 리소스만 쓸 수 있지만 예외 사항에 해당하면 다른 출처도 써줄 수 있게 해주는, 우리를 도와주는 정책이다.

 

 예를 들면 홈페이지에서 날씨 API를 가져온다고 치자. 홈페이지와 날씨 API를 제공하는 곳은 출처가 다를 것이고, 이럴 때 Same Origin 정책에 의해 내가 만든 홈페이지는 날씨 API를 못 쓰게 막아버릴 것이다. 하지만 CORS 정책을 통해 해당 API를 사용할 수 있게 만들 수 있다.

 

 

# 브라우저가 Origin을 확인하는 과정

 

 웹 브라우저는 출처가 같냐, 다르냐를 따진다. 그렇다면 웹 브라우저가 출처를 어떻게 비교하는지 그 과정을 알아보자.

 

1. 클라이언트에서 서버에게 HTTP 요청과 함께 Origin을 보낸다.

2. 서버는 이에 대한 응답으로 Access-Control-Allow-Origin를 전송한다.

3. 클라이언트는 자신의 Origin과 Access-Control-Allow-Origin를 비교한다. 이때 두 값이 같으면 외부의 리소스를 가져오고(Same Origin) 다르면 리소스를 사용하지 않는다(Cross Origin).

 

 즉, CORS 문제를 해결하기 위해서는 서버에서 무언가를 해결해야 한다. 출처를 판단하는 주체는 웹 브라우저(클라이언트)이지만, 결국에는 서버에서 전송한 Access-Control-Allow-Origin를 자신의 Origin과 비교한다. 따라서 서버가 웹 브라우저가 허용할 수 있는 Access-Control-Allow-Origin로 응답을 하면 되는 것이다.

 

 

# 결국, CORS 에러란?

 

 HTTP 통신 중 사용되는 정책으로, 서버에서 Access-Control-Allow-Origin 헤더에 허용할 출처를 기재해서 클라이언트에 응답하면 다른 출처의 리소스도 사용할 수 있다는 내용의 정책이다. 즉, CORS 에러를 근본적으로 해결하기 위해서는 서버 측에서 해결해야 한다. 

 

---

 

참고 자료

https://developer.mozilla.org/ko/docs/Web/HTTP/CORS

https://inpa.tistory.com/entry/WEB-%F0%9F%93%9A-CORS-%F0%9F%92%AF-%EC%A0%95%EB%A6%AC-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95-%F0%9F%91%8F