CORS 개념 & 동작방식
로컬에서 프론트엔드 서버와 백엔드 서버를 동시에 돌리면 종종 볼 수 있는 CORS.
이 CORS 가 뭔지 살펴보자
목차
1. CORS 개념
2. CORS 배경
3. 기본 동작 방식
1. CORS 개념
CORS = Cross Origin Resource Sharing
= 교차 출처 자원 공유
CORS란 서로 다른 출처(origin) 간 자원을 공유할 수 있도록 하는 기술을 말한다. 인터넷은 기본적으로 다른 출처 간 자원을 공유하는 것이 막혀 있고 이를 우회하기 위해 사용하는 기술이 CORS 라고 보면 된다.
여기서 출처란 Protocol + Host + Port 부분을 말한다. 3개가 모두 일치하면 같은 출처이고, 하나라도 다르다면 다른 출처이다.
출처(Origin) = Protocol + Host + Port
다시 돌아와서 CORS가 무엇인지 정리해보자면
CORS란 자신만 접근할 수 있던 자원을 외부 서비스가 접근할 수 있도록 하는 기술을 말한다.
2. CORS 배경
CORS가 필요한 이유는 무엇일까?
앞서 간단히 언급했다시피, CORS가 필요한 이유는 브라우저는 기본적으로 다른 도메인과의 자원 상호작용을 하지 못하도록하는 Same-Origin Policy를 사용하기 때문이다.
여기서 Same-Origin Policy(SOP)이란 웹 브라우저가 한 출처에서 로드된 문서나 스크립트가 다른 도메인(출처)의 리소스에 엑세스 하는 것을 방지하는 정책이다. 초기 인터넷에서 , 다른 도메인으로 접근하는 스크립트를 심어서 사용자의 정보를 탈취하는 CSRF 라는 해킹이 존재했다. 이러한 해킹을 방지하기 위해 다른 출처로의 접근을 제한하는 Same-Origin Policy를 기본정책으로 사용하게 된 것이다.
Same-Origin Policy로 보안상의 이슈를 해결했지만, 다른 출처의 자원에 접근을 하지 못하는 문제가 있다. 서비스를 할 때, third party의 자원을 사용해야하는 경우도 필요하기 때문에 이를 해결하는 CORS가 등장했다.
3. 기본 동작 방식
CORS의 무엇인지 알았으니 어떻게 CORS가 동작하는지 알아보자
1. 브라우저 요청
클라이언트 측에서 브라우저를 통해 다른 출처의 리소스에 접근하는 HTTP요청을 보낸다. 이때, 요청 헤더에는 origin 이라는 현재 페이지의 출처 정보를 같이 보낸다.
2. 서버 응답
서버는 CORS 관련 access-control 정보를 포함하여 응답한다.
3. 브라우저 확인
브라우저는 서버가 보낸 access-control 정보를 통해 현재 페이지의 출처가 허용되는지 확인한다. 출처가 허용되었다면 클라이언트는 다른 출처의 자원을 사용할 수 있게된다. 반대로, 출처가 허용되지 않았다면 CORS 에러가 발생한다.
[참고 링크]