처음 CORS라는 단어를 접했을 때는 이것이 무엇인지 전혀 몰랐는데, node.js 공부를 조금이라도 하다보면 stack overflow 같은 곳에서 "CORS"라는 단어를 종종 보게 되었다.
CORS가 무엇인지는 모르겠지만, 백엔드에서 굉장히 중요한 주제구나...! 라고 생각이 들었던 순간이었다.
그래서 CORS가 뭔데?
정말 아주아주 쉽게 예를 들자면,
구글에서 네이버 지도에게 API요청을 보낼때, 구글이 데이터값을 받아올 수 있게 네이버가 허락해주는 것이다.
허락을 받지 않으면 데이터를 못 받을까? 왜?
그렇다. 허락을 받아야 데이터를 받아올 수가 있다.
왜 이렇게 귀찮게 해놓았는지는 아래 예시를 살펴보면서 이해하자.
어떤 사이트에 로그인을 하면 다시 id, pwd를 입력하지 않더라도 다시 접속했을 때 로그인이 유지가 되고 있는 경우가 많다.
이것이 가능한 원리는 나의 브라우저에 토큰 정보(해당 요청이 나로부터 왔음을 증명해주는 인증정보)가 쿠키로 저장이 되어있고, 이것을 로그인했던 사이트에 접속할 때 요청에다 실어보내면 그 사이트에서 쿠키를 보고 로그인 여부를 판단하는 것이다.
만약 어떤 해커가 보낸 링크가 걸린 이메일을 사용자가 접속하면 해커가 만든 js 코드가 나의 브라우저에 받아지게 되는데...
🚨 이때 🚨
나의 브라우저에 저장되어 있는 인증정보를 이용해서 해커들이 악용할 수가 있게 된다. 이런 일들을 방지하기 위해 CORS가 존재하는 것이다. 원래 이렇게 출처가 다른 url끼리(구글 <-> 네이버) 데이터 요청을 보내는 것이 불가능한데, CORS는 합법적으로 가능케 해준다.
what is proxy server? (알아보기)
CORS의 반대개념, SOP(동일 출처 정책: 요청을 막는다)
: 동일한url끼리만 API등의 데이터 접근이 되도록 하는 것.
- 데이터 요청을 보냈을 때 실질적으로 막는 것은 SOP이고, 이를 허락하는 것이 CORS다.
CORS의 동작원리
그렇다면 CORS가 왜 필요한 지는 알겠는데, 어떻게 작동하는지 살펴보자.
어떤 API요청을 보냈을 때 요청이 막히는 것은, 브라우저에서 일어나는 문제다.
-
브라우저는 다른 출처 url끼리 요청을 보낼 때, 요청에 "Origin"이라는 헤더를 추가한다.
(우편을 예시로 들면, 봉투에 적힌 내용 정도) -
요청을 받은 사이트의 API는 답장의 헤더에 지정된 "Access-Control-Allow-Origin" 정보를 실어서 보낸다.
(만약 여기에 민주닷컴이 등록된 상태면 위의 url주소도 들어가 있게 된다) -
브라우저에서 이 둘을 비교해서 Origin에 보낸 출처값이 똑같이 서버의 답장 헤더에 담겨져 있으면 안전한 요청으로 간주하고, 응답 데이터를 받아오게 된다.
(없으면 빨간 에러 메시지 띄워줌)
CORS 더~ 상세한 작동원리 (옵션 방법)
개발자들은 초기에 응답을 받아오기 위해 JSONP 등의 방식으로 이를 우회하는,, 꼼수들을 사용하기 시작했다. 그래서 합의한 출처들끼리 합법적으로 허용해주기 위해 어떤 기준을 충족시키면 데이터 공유가 되도록 만들어진 메커니즘이 바로 CORS다.
what is JSONP?
(알아보기, 오래 됨)
이 기준이 뭔데요?
요청을 받는 백엔드 쪽에서 미리 명시해둠으로써 예스 / 노 판단
스프링, express등의 문서에 가보면 CORS옵션을 넣는 방법이 설명되어 있다.
우선, CORS옵션은 사용자가 보내는 요청의 종류에 따라 구분할 수 있다.
그리고 사용자가 보내는 요청에는 크게 2가지가 있다.
1. simple requests(GET, HEAD, POST 등)
일정 조건의 요청들에 사용되는 것들. 요청들이 다 보내지기는 하는데, 통과 못하면 답장만 못 받는다.
2. preflight requests
simple request를 보내기 전에 preflight request라는 것을 먼저 보내야 한다. preflight 요청에서 안전한지 확인하고 여기서 허락이 떨어져야, 본격적으로 simple request 요청을 보낼 수 있다.
(cross-origin 요청은 서버의 데이터에 영향을 줄 수 있기 때문에 요청 자체를 보내기 전에 먼저 전송(preflighted)하여 허용 여부를 검증한다)
📄 아래는 이 두가지 요청을 시각적으로 알아볼 수 있는 데모 페이지다.
https://node-cors-client.netlify.app
Example #1 CORS가 없는 경우 - 에러 뜬다
Example #2 preflight가 없는 경우 - GET 요청은 가지만, 응답은 받지 않는다.
Example #5 preflight가 있는 경우 - 요청&응답 모두 된다.
CORS 예외 처리 조항들 알아보기 (css파일, 이미지 등..)
