모의면접 스터디 주제인 CORS에 대해서 답변한 내용을 포함한 짧막한 정리에 대한 글입니다.
공부를 하면서 정리한 내용이라 정확하지 않으니, 참고만 해주시길 바랍니다.
잘못된 부분이 있다면 피드백 남겨주세요 :)
1. CORS가 무엇인가요?
CORS는 Cross Origin Resource Sharing의 약자로, 서로 다른 출처에서 리소스를 공유하는 것을 허용하는 정책입니다. 브라우저는 기본적으로 서로 다른 출처에 대해서 공유를 제한하는 SOP을 따릅니다. 여기서 SOP란 Same Origin Policy의 약자로 같은 출처끼리만 리소스를 공유할 수 있다는 정책입니다. 여기서 말하는 출처란 URL을 의미하는데 Scheme, host, port가 같다면 같은 출처라고 브라우저는 인식합니다. (참고로 인터넷 익스플로러는 포트번호가 달라고 같은 번호라고 인지한다고 합니다.)
2. CORS가 정의된 이유
출처에 대한 비교는 브라우저에서 이루어지게 됩니다. 즉 브라우저에서 SOP는 브라우저의 쿠키, 세션, 로컬스토리지 등에 사용자의 정보를 저장할 수 있기 때문에 다른 출처에 리소스를 공유하게 되면 보안상 취약해질 수 있다는 문제점 때문에 생긴 정책입니다. 따라서 다른 출처에서 정보를 얻고자 한다면 CORS를 정의해야 합니다.
3. CORS의 동작원리
CORS의 동작원리는 간략하게 설명하면, 서버와 통신을 할 때 응답을 받는 브라우저에서 요청 헤더의 Origin 필드아 응답 헤더의 Access-Control-Allow-Origin 필드를 비교하여 응답의 유효성을 판단하는 것입니다. 즉, 요청을 보내는 쪽에서 요청 허더에 리소스를 필요로하는 URL을 Origin 필드에 담아서 보내고, 응답을 보내는 서버 쪽에선 Access-Control-Allow-Origin 필드에 리소스 접근이 허용된 출처를 담아서 보내 브라우저가 이를 비교하는 것입니다.
구체적인 요청 방법으로는 예비 요청을 보내는 preflight request, 예비 요청이 없이 본 요청을 바로 보내는 simple request, 인증 정보를 담아서 보내는 credentialed request가 존재합니다.
4. Preflight를 하는 이유가 무엇인가요?
preflight는 브라우저가 CORS를 지원하지 않은 서버에 도달하면 요청에 대한 응답을 보내지 않아 실제 요청이 수행되지 않도록 보호하기 위해서 만들어졌습니다. 예를들어, POST요청을 할 때 preflight가 없다면, 브라우저가 CORS를 관리하기 때문에 CORS의 여부에 상관없이 이미 서버에서는 요청한 로직이 수행이 된 응답 값이 브라우저에 도달하게 됩니다. 하지만 CORS 에러로 인해서 브라우저는 그 사실을 알지 못하게되고 치명적인 서버의 오류로 남아있을 수 있습니다. 따라서 이를 방지하고자 preflight request를 보내는 것입니다.
5. CORS를 해결하는 방법
프론트엔드에서 webpack을 사용하여 webpack-dev-server를 통해 CORS 정책을 우회하여 개발 환경에서 CORS를 해결할 수 있습니다. 하지만 Access-Control-Allow-Origin 필드에서 구체적인 URL을 명시하는 것이 가장 근본적인 방법입니다.
✔️ 더 공부해야하는 부분
- CSRF
- XXS
- webpack-dev-server
- 백엔드 서버 없이 프론트엔드에서 CORS를 해결해야하는 상황이라면 어떻게 할 수 있는가?
📚 참고자료
웨지천재
댓글