CORS

에피소드

어쩌다보니 회사에서 기존에 운영하고 있던 데모 시스템의 UI를 수정하게 됐는데, React.js를 사용한 WEB UI였다. 로컬 테스트를 위해서 클라이언트와 서버(golang으로 작성되어 있음)를 띄웠고 로그인을 시도했는데, CORS 경고가 떴다. 그래서 실제로 동작하고 있는 클라우드 서버의 네트워크 로그를 보며 공부해보았다.

CORS란?

CORS란 Cross Origin Resource Sharing의 약자로 브라우저의 현재 웹페이지가 이 페이지를 받은 서버가 아닌 다른 서버의 자원을 호출하는 것을 의미한다. 이것을 허용하면 악의적인 도메인으로의 요청을 무조건 허용하게 되어 보안 문제가 발생할 수 있다. 그래서 HTTP 스펙에서 이에 대한 기준을 제시하고 있다.

나는 CORS를 ip만 같으면 되는 것으로 생각하고 있었는데 알고보니 포트만 달라도 발생할 수 있는 문제였다. 같은 로컬 내의 다른 서비스를 의심하다니... 정말 깐깐한 보안정책이다.

해결방법

HTTP에서 제시하는 절차는 다음과 같다.

• 일반적인 요청에 대해서는 아무런 처리도 하지 않음, 일반적인 요청이라고 하면 다음 사항에 부합되는 요청을 의미함

  • Accept, Accept-Language, Content-Language, Content-Type

• Content-Type은 다음만 허용

  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain

• 이런 일반적인 요청이 아닌 경우 브라우저는 접근할 리소스를 가지고 있는 서버에 preflighted 요청을 보냄

  • preflighted 요청은 특별한 목적을 가지는 요청으로 method = OPTIONS 으로 전송
  • OPTIONS 요청을 받은 서버는 Response Header에 서버가 허용할 옵션을 설정하여 브라우저에게 전달.
  • 브라우저는 서버가 보낸 Response 정보를 이용하여 허용되지 않은 요청인 경우 405 Method Not Allowed 에러를 발생시키고, 실제 페이지의 요청은 서버로 전송하지 않음
  • 허용된 요청인 경우 전송

그림으로 표현하면 다음과 같다.

서버에서 CORS 이슈를 인지하고 처리해줘야한다.

실제로 동작하고 있던 서비스의 네트워크 로그를 보니 OPTIONS 메소드를 던져 204 응답을 받는 것을 볼 수 있었다.

 

서버에서느 ㄴResponse header에 access-control-allow-origin 키워드를 추가해주면 된다.

스프링에서는 Filter 인터페이스를 구현해서 헤더에 정보를 넣어주면 된다.

결론

항상 로컬에서만, 그것도 별다른 프론트엔드 서버 없이 백엔드 서버에서만 뷰를 그려서 던지다보니 CORS에 대해서 크게 신경쓰지 않았었는데 이번 기회에 공부하게 되어 유익했다.

 

 

글, 그림 일부 출처 : https://www.popit.kr/cors-preflight-%EC%9D%B8%EC%A6%9D-%EC%B2%98%EB%A6%AC-%EA%B4%80%EB%A0%A8-%EC%82%BD%EC%A7%88/