Why CORS?
웹에서 돌아가는 클라이언트 어플리케이션은 사용자의 공격에 많이 취약하다.
예를 들어, 당장 개발자도구에만 들어가도 script가 그대로 노출되는 것을 볼 수 있다. 이 때 CRSF 나 XSS 같은 방법을 이용해 사용자의 정보가 탈취될 수 있는데,
리소스를 요청를 제한하는 정책이 일종의 방어막을 만들어 보안을 더 탄탄하게 해준다.
웹 생태계에서는 이러한 정책이 두가지 존재하는데, 하나는 SOP와 CORS이다.
SOP (Same-Origin Policy) ** 란,
동일한 출처 (origin) 의 리소스만 공유할 수 있도록 제한하는 정책이다.
이 때 동일한 출처 외에도 다른 출처의 접근이 가능하도록 하용해주는 예외 조항이 있는데, 이 조항이 바로 CORS 정책을 지킨 리소스 요청이다.
CORS (Cross-Origin Resource Sharing) 란,
다른 출처에서 오는 리소스 요청을 제한하는 정책이며 무근본 출처에서 오는 것이 아닌 안전한 리소스만 가지고 올 수 있도록 보장해준다.
이 때 출처(origin) 란,
protocol, host, port로 이루어져 있으며
서버의 위치를 찾아가기 위해 필요한 가장 기본적인 URL이다.
origin은 브라우저 개발자 도구 콘솔에서도 확인이 가능한데,
Location이라는 객체가 갖고있는 속성에 접근함으로서 어플리케이션이 실행되는 있는 출처를 알아낼 수 있다.
console.log(location.origin)
https://velog.io
같은 출처, 다른 출처?
같은 출처는 URL의 구성 요소인 Protocol, Host, Port가 동일할 때며
위 3개 중 하나라도 다를 시 다른 출처로 판단한다.
이 때, 출처를 비교하는 로직은 서버가 아닌 브라우저에 구현되어있는 스펙이 판단한다. 그렇기에 만약 서버가 별도 CORS 정책을 따르는 로직을 구현해놓지 않는다면 서버는 리소스 출처와 상관없이 정상적으로 응답할 것이고 브라우저에서 받은 응답을 분석하여 CORS 정책에 위반되었다고 판단하면 서버에서 온 응답을 사용하지않고 파기한다.
그러므로 CORS 정책은 서버간 통신에서는 적용되지 않으며 리소스 요청관련 에러가 발생되어도 서버에서는 정상으로 응답하기에 CORS의 흐름 방식을 정확히 모르면 에러 트레이싱에 어려움을 겪을수도 있다..!!
CORS 동작은 어떻게되냐면
-
웹 클라이언트 어플리케이션이 HTTP 프로토콜을 이용하여 다른 출처의 리소스를 요청하는데 이 때 요청 header에는 origin 필드에 요청을 보내는 출처를 함께 담아 보낸다.
Origin: https://velog.io -
이 후 서버에서는 이 요청에 대한 응답으로 response header에 정의해놓은 Access-Control-Allow-Origin (접근이 허용된 출처) 를 알려준다.
Access-Control-Allow-Origin: https://velog.io -
응답을 받은 브라우저는 본인 보냈던 요청 origin과 서버가 보내준 응답 (Access-Control-Allow-Origin) 를 비교한 후 응답이 유효한지 아닌 지 결정한다.
CORS 해결 방법
CORS를 해결할 수 있는 방법은 크게 두가지가 있다.
1. Access-Control-Allow-Origin 세팅하기
CORS 정책으로 인해 문제를 겪는 사람은 프론트엔드 개발자이지만 문제 해결을 위해서는
백엔드 개발자가 서버 어플리케이션 응답 헤더에 올바른 값이 내려올 수 있도록 세팅 할 수있다.
Access-Control-Allow-Origin 헤더에 접근이 허용된 출처를 입력해놓으면 되는데
'*'(와일드카드) 사용 시 모든 출처에서오는 요청을 받을 수 있다.
Apache같은 서버 엔진에서 설정을 추가할 수 있으며 Spring, Expres, Django 같은 백엔드 프레임워크에서는 CORS 관련 설정을 위한 세팅이나 미들웨어 라이브러리 제공한다.
2. Webpack Dev Server로 리버스 프록싱하기
Webpack Dev Server 를 사용하여 프론트엔드에 개발환경을 구축할 수 있다. 프록시 기능을 이용하여 CORS 정책을 우회할 방식이다. 하지만 해당 방법은 로컬 개발 환경에서만 통하는 방법이기에 근본적인 해결 방법이 아니므로 운영 환경에서는 백엔드에서 세팅이 필요하다.
